Geek Answers Handbook

Stateprovider in angularjs - not displaying ui-view

Good. I was stuck with this part for two days. I tried everything I know. I have downloaded my ui-router and statevvider. I have a user interface, as shown in a few examples on the website. But when I start, it does not show my ui-view.

Index.html

<body ng-app='ngBRep'> <div> <div data-ng-include="'app/layout/shell.html'"></div> </div> <!--Angular--> <script src="scripts/angular.js"></script> <script src="scripts/angular-ui-router.js"></script> </body>

Shell.html

 <div data-ng-controller="shell as vm"> SHELL <div ui-view></div> </div>

Entry.html

 <section id="entry-view" data-ng-controller="entry as vm"> ENTRY </section>

app.js

 var app = angular.module('ngBRep', [ 'ui.router' ]);

routes.js

 var app = angular.module('ngBRep'); app.config(['$stateProvider', '$urlRouterProvider', routeConfigurator]); function routeConfigurator($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('/', { url: '/', templateUrl: 'app/views/entry.html' }) .state('profile', { url: '/profile', templateUrl: 'app/views/profile.html' }); // Send to login if the URL was not found }

My expectation is that when I look at index.html, I should see a SHELL PROFILE

But I only get SHELL.

And the worst part, our project has an existing website that does just that and works.

Any help would be appreciated. Thanks.

+2
angularjs angular-ui-router
source share
1 answer

There is a working plunker . The problem in this case is due to the fact that we use two functions (which are not really expected / are not intended to work together):

  • ng-include - to populate the root view (usually this is part of index.html )
  • ui-router - target root , which is not loaded yet
  • and in fact, that include is executed later than the default ui-router call $urlRouterProvider.otherwise("/") )

So, although this template is included in the root index index.html

 <div data-ng-controller="shell as vm"> SHELL <div ui-view></div> </div>

We must do this in our controller:

 app.controller('shell', function($scope, $state, ....){ $state.go("/"); });

Thus, we solve the difference in boot time (the router is ready to enable the template as soon as possible, so there are not enough goals)

Make sure here

+3
source share

More articles:


All Articles