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

declare url : '/' 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

... resolve property map object. map object contains key/value pairs of:

key – {string}: name of dependency injected controller. mill - {string|function}:

if string, alias service. otherwise if function, injected , homecoming value treated dependency. if result promise, resolved before controller instantiated , value injected controller.

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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -