angularjs - Angular ui-router state is not loaded -
angularjs - Angular ui-router state is not loaded -
hi have started larn angular couple of days , gotta has been bumpy road.i'm not new spa apps have been working past year on project used durandal.
in 2 days have start working on project utilize angular , angular-ui-router.
for reason can not seem able configure not simplest examples found on angular-ui-router docs : https://github.com/angular-ui/ui-router/wiki
as of have next code:
this javascript code:
<script> var codeartapp = angular.module("codeartapp", ['ui.router']); codeartapp.controller('myctrl', function($state){ $state.go('contacts') }); codeartapp.config(function($stateprovider){ $stateprovider.state('contacts', { template: '<h1>{{title}}</h1>', resolve: { title: 'my contacts' }, controller: function($scope, title){ $scope.title = 'my contacts'; }, onenter: function(title){ console.log(title) }, onexit: function(title){ if(title){ } } }) }); </script>
this html:
<body ng-app="codeartapp"> <div ng-controller="myctrl"> <section ui-view></section> </div> </body>
when run app $state.go('contacts') gets executed not beingness sent contacts state , html not loaded.
if seek load state threw browser url /#/contacts still nil happens.
what doing wrong?
edit
i have binded $statechangeerror event , see getting stack trace:
it seems trying resolve "my contactsprovider" named state contacts going on here?
there working plunker. changes have are:
firstly have
declareurl : '/'
parameter, belonging state , we won't using controller="..."
setting, not how states evaluated ui-router
secondly have correctly utilize resolve
functionality must doc says
... resolve
property map object. map object contains key/value pairs of:
key – {string}
: name of dependency injected controller. mill - {string|function}
:
so can see, in resolve object can homecoming string, name of service
this adjusted and working script:
'use strict'; var codeartapp = angular.module("codeartapp", ['ui.router']); // not needed // codeartapp.controller('myctrl', function($state) { // $state.go('contacts') // }); codeartapp.config(function($stateprovider) { $stateprovider.state('contacts', { url : "/", template: '<h1>{{title}}</h1>', resolve: { // title: 'my contacts' title: function() { homecoming 'my contacts'; }, }, controller: function($scope, title) { $scope.title = 'my contacts'; }, onenter: function(title) { console.log(title) }, onexit: function(title) { if (title) { } } }) });
this way trigger default state
codeartapp.config(['$urlrouterprovider', function($urlrouterprovider) { $urlrouterprovider.otherwise('/'); } ]);
and html template:
<body ng-app="codeartapp"> <!--<div ng-controller="myctrl"> <section ui-view></section> </div> --> <section ui-view></section> </body>
check code here
angularjs angular-ui-router
Comments
Post a Comment