angularjs - ui.router not rendering ui-view immediately

Question

I am trying to use ui-router on my project.

Core module:

  var core = angular.module('muhamo.core', ['angular-loading-bar', 'anguFixedHeaderTable', 'ui.router']);

Tracking module:

    var app = angular.module(TRACKING_MODULE_NAME, ['muhamo.core']);
    app.config(Configure);

Configure.$inject = ['$stateProvider', '$urlRouterProvider'];
function Configure($stateProvider, $urlRouterProvider) {
    $stateProvider.state('contacts', {
        templateUrl: '/static/partials/employee/employee-edit',
        controller: function () {
            this.title = 'My Contacts';
        },
        controllerAs: 'contact'
    });
    $urlRouterProvider.otherwise("/contacts");
    console.log($stateProvider);
}

and the html definition :

    <div  ui-view></div>

It works fine if i click to a ui-sref link. But on page load it does not load the default view "/contacts". Am I missing something here?

UPDATE

It works after adding missing "url" property. But now I've another problem, if I extend my implementation like that :

    function Configure($stateProvider, $urlRouterProvider) {
       $stateProvider.state('employees', {
          abstract: true,
          url: "/employees"
          /* Various other settings common to both child states */
        }).state('employees.list', {
           url: "", // Note the empty URL
           templateUrl: '/static/partials/employee/employee-list'
       });
    $urlRouterProvider.otherwise("/employees");
    console.log($stateProvider);
}

also with more states, ui-view is not rendering.

atardadi · Accepted Answer · 2015-10-14 06:43:04Z

1

There are two fishy things in your implementation. You out an empty url and your default route is abstract. Try my changes below.

 function Configure($stateProvider, $urlRouterProvider) {
   $stateProvider.state('employees', {
      abstract: true,
      url: "/employees"
      /* Various other settings common to both child states */
    }).state('employees.list', {
       url: "/list", // Note the empty URL
       templateUrl: '/static/partials/employee/employee-list'
   });
$urlRouterProvider.otherwise("/employees/list");
console.log($stateProvider);

Cheers

answered Oct 14, 2015 at 6:43

atardadi

4592 gold badges5 silver badges14 bronze badges

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

Comments

Dan Crews · Accepted Answer · 2015-10-13 17:06:18Z

1

Yes. You need to set the state.url to '/contacts'

$stateProvider.state('contacts', {
    url: '/contacts',
    templateUrl: '/static/partials/employee/employee-edit',
    controller: function () {
        this.title = 'My Contacts';
    },
    controllerAs: 'contact'
});

answered Oct 13, 2015 at 17:06

Dan Crews

4,25523 silver badges25 bronze badges

1 Comment

Dan Crews Over a year ago

I don't think you can have an empty url. You can, however, have a "/" url, and add a $urlRouterProvider.when('/employees', '/employees/');

Dzinx · Accepted Answer · 2015-10-13 17:06:50Z

1

It seems you forgot to set the url parameter, e.g.:

$stateProvider.state('contacts', {
    url: "/contacts",
    ...
}

answered Oct 13, 2015 at 17:06

Dzinx

58.2k10 gold badges63 silver badges78 bronze badges

4 Comments

aymeba Over a year ago

it works now, thanks :) sometimes we need more coffee :)

Dzinx Over a year ago

Basically, you need a dispatcher in the parent state if you want to use nested states with empty URLs. See the second part of my answer to another question.

aymeba Over a year ago

$stateProvider.state('employees.list', { url: "/employees/list", // Note the empty URL templateUrl: '/static/partials/employee/employee-list' });

aymeba Over a year ago

same issue if i remove the nested states.

Collectives™ on Stack Overflow

angularjs - ui.router not rendering ui-view immediately

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related