angularjs - ui-router resolve is not working with the index page controller -
i want resolve value before load first page of application, kept telling me
unknown provider: programclasssummaryprovider <- programclasssummary <- homectrl
i pretty sure did correctly, because did same thing other controller , routing. not working homepage controller. seems load controller first, before resolved in routing. wrong code?
in routing.js
$stateprovider .state('home', { url: '/home', controller: 'homectrl', controlleras: 'vm', templateurl: 'index_main.html', resolve: { programclasssummary: ['groupdatafactory', function (groupdf) { return groupdf.getprogramclasssummary(); }] }, ncybreadcrumb: { skip: true } });
in controller.js
angular .module('issmccapp') .controller('homectrl', homectrl); homectrl.$inject = ['$scope', '$location', '$state', '$auth', 'programclasssummary']; /* @nginject */ function homectrl($scope, $location, $state, $auth, programclasssummary) { var vm = this; vm.isauthenticated = isauthenticated; vm.programclasssummary = programclasssummary; if (!$auth.isauthenticated()) { $state.go('login'); return; } function isauthenticated() { return $auth.isauthenticated(); } }
in factory.js
function getprogramclasssummary(showall) { var query = ""; if (showall) query = apiconfigobj.base_url + '/api/group/infor/programclasssummary?all=1'; else query = apiconfigobj.base_url + '/api/group/infor/programclasssummary'; return $http.get(query) .success(function (result) { return result; }) .error(function (err) { return err; }) }
i'd say, have distinguish ui-router
state world, , angular itself. reason why defined here (extracted $resolve ui-router api documentation):
$resolve
resolve(invocables, locals, parent, self)
resolves set of invocables. invocable function invoked via
$injector.invoke()
, , can have arbitrary number of dependencies. invocable can either return value directly, or$q
promise. if promise returned resolved , resulting value used instead. dependencies of invocables resolved (in order of precedence)
- from specified locals
- from invocable part of $resolve call
- from invocable inherited parent call $resolve (or recursively
- from ancestor $resolve of parent).
there a wroking plunker, uses index.html
<body ng-controller="rootctrl"> summary root: <pre>{{summary}}</pre> <ul> <li><a href="#/home">home</a> <li><a href="#/other">other</a> </ul> <div ui-view=""></div>
so, here use rootctrl
, won't go through state machine ui-router, angular basic stuff
the root controller must defined as
.controller('rootctrl', ['$scope', 'groupdatafactory', function ($scope, groupdf) { $scope.summary = groupdf.getprogramclasssummary(); }])
for state home, can use different approach, in fact same above (simplifed version below)
.state('home', { url: "/home", templateurl: 'tpl.home.html', resolve: { programclasssummary: ['groupdatafactory', function (groupdf) { return groupdf.getprogramclasssummary(); }] }, controller: 'homectrl', })
and controller able consume locals
.controller('homectrl', ['$scope', 'programclasssummary', function ($scope, summary) { $scope.summaryforhome = summary; }])
check in action here
Comments
Post a Comment