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