CODEWITHSUNDEEP
javascriptangularjsasynchronousangular-ui-routerangularjs-ng-route
user3718908x100
user3718908x100

Reputation: 8509

ngRouter to ui-router

I recently purchased an angularjs template which i am using to build my application, however i noticed that ngRouter was used instead of ui-router which i prefer and am more familiar with.

I tried including ui-router and changing all the routes and it worked, however there was some extra code in my routes that i still do not understand and do not know where to put, this is the old route for my dashboard:

$routeProvider.when("/dashboard", {
    templateUrl: "views/dashboard.html",
    resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }
});

This is what i changed it to:

.state('admin.dashboard', {
    url: '/dashboard',
    views: {
        'content@': {
            templateUrl: '/_admin/views/dashboard.html',
            controller: 'DashboardCtrl'
        }
    }

As you can see there is a great portion of code missing which affects certain functionality of my dashboard. My question is using ui-router where do i place all the code in resolve:

resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }

I've never come across resolve before, i am quite new to angularjs and dunno what to do about this section after switching to ui-router.

Upvotes: 2

Views: 90

Answers (1)

Daniel Cottone
Daniel Cottone

Reputation: 4480

The resolve property essentially tells angularjs that the callbacks within it must complete before the state is displayed. NgRouter has this, but so does ui-router. Here's some reading for you.

This code should work:

.state('admin.dashboard', {
    url: '/dashboard',
    views: {
        'content@': {
            templateUrl: '/_admin/views/dashboard.html',
            controller: 'DashboardCtrl'
        }
    },
    resolve: {
        deps: ["$ocLazyLoad", function(a) {
            return a.load([jqload.c3, jqload.sparkline])
            .then(function() {
                return a.load({
                    name: "app.directives",
                    files: ["scripts/lazyload/directives/sparkline.directive.js"]
                })
            })
            .then(function() {
                return a.load("angular-c3");
            })
            .then(function() {
                return a.load("easypiechart");
            })

        }]
    }
})

Upvotes: 1

Related Questions