3

I'm trying to use an abstract state but I cannot load the child.

My app is setup as following:

angular
  .module('milordApp', [
    'ui.router',
    'ngAnimate',
    'ngCookies',
    'ngMessages',
    'ngResource',
    'ngRoute',
    'ngSanitize',
   'ngTouch'
])
.run(function($rootScope) {
    $rootScope.$on('$routeChangeStart', function(event, toState,  toParams, fromState, fromParams) {
      console.log(toState, toParams, fromState, fromParams);
    });
})
.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/login");
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl',
        data: {
          requireLogin: false
        }
     })
     .state('app', {
       abstract: true,
       url: '/app',
       data: {
        requireLogin: true
       }
     })
     .state('app.dashboard', {
       url: '/dashboard',
       templateUrl: 'views/dashboard.html',
       controller: 'DashboardCtrl',
     });
});

The login route is working fine. However, the app or app.dashboard route does not register as I can't even console.log from the controller.

Just a note that the index.html is creating the navigation correctly

<ul class="nav navbar-nav">
   <li><a ui-sref="login" href="#/login">Login</a></li>
   <li><a ui-sref="app.dashboard" href="#/app/dashboard">Dashboard</a></li>
</ul>
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
jjkilpatrick
  • 45
  • 1
  • 3

1 Answers1

3

In case that snippet of the abstract state is real (as is), the issue should be fixed like this:

.state('app', {
   abstract: true,
   url: '/app',
   data: {
    requireLogin: true
   }
   // add template for child
   template: "<div ui-view></div>",
 })

Simply, every state needs to be injected somewhere. If we do not use named views (or even absolute naming) it is expected that:

every child is injected into its parent target ui-view

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Great thats fixed it. So in that case I can define multiple divs in my index and use different abstract states for them. An example would be to have abstract state for a particular graph in a div which can be changed depending on a checkbox being ticked? – jjkilpatrick Sep 23 '15 at 13:45
  • You can really do a lot of magic. There could be many states, many children. The point is just to have a target for them. Or use another features of UI-Router... e.g. absolute naming, named views etc.. but read the wiki and observe SO ;) hope it helps a bit – Radim Köhler Sep 23 '15 at 13:47
  • stateHelper module <3 – jjkilpatrick Sep 23 '15 at 13:53
  • Oh my god, I would marry you if I wasn't. Have been searching and pulling my hair out on this. – hogan Nov 04 '15 at 00:37
  • @hogan that is amazing ;) enjoy mighty UI-Router ;) – Radim Köhler Nov 04 '15 at 05:42