javascriptangularjsasynchronousangular-ui-routerangularjs-ng-route

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.


Solution

  • 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");
                })
    
            }]
        }
    })