CODEWITHSUNDEEP
angularjsangular-ui-router
Jap Evans
Jap Evans

Reputation: 1127

stateprovider in angularjs - not rendering the ui-view

Alright. I am stuck with this part for two days. I have tried everything i know. I have my ui-router loaded and stateprovider defined. I have the UI as shown in several examples in website. But when i run, it is not showing 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 when i browse to index.html, i should see SHELL PROFILE

But i get only SHELL.

And the worst part, there is an existing website in our project that does exactly this and it works.

Any help will be appreciated. Thank you.

Upvotes: 2

Views: 5722

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

There is a working plunker. The issue in this case is related to the fact, that we are using two features (which are in fact not expected / not designed to be working together):

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

So while this template is included into the root index.html

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

We have to do this in its controller:

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

This way we solve the difference in loading times (router is ready sooner then included template, so missing the targets)

Check that here

Upvotes: 3

Related Questions