stateprovider in angularjs - not rendering the ui-view

Question

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.

Do you have a script element for app.js and another for routes.js in your index.html? — JB Nizet
– JB Nizet, Commented Aug 15, 2014 at 22:14

Radim Köhler · Accepted Answer · 2014-08-16 14:54:17Z

3

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

answered Aug 16, 2014 at 14:54

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jap Evans Over a year ago

Thanks Radim. That worked. I checked the other code that i had which was working and it had the following in the app.js app.run(['$route', '$rootScope', '$q', '$state', function ($route, $rootScope, $q, $state) { }]);

Jap Evans Over a year ago

[cont] although nothing was inside the function, i guess the injection of $route, $routeScope did some trick.

Jap Evans Over a year ago

Actually this has introduced new problem. When i try to browse /profile/series directly by giving the url in the browser, it always goes to '/' since i have $state.go("/"); in shell and shell loads first. Please help. Let me know if you want my new routes.js

Jap Evans Over a year ago

found this link that supports my second comment. github.com/angular/angular.js/issues/4957

Collectives™ on Stack Overflow

stateprovider in angularjs - not rendering the ui-view

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related