Angular doesn't load state if I use abstract parent state

Question

There is the following code:

angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

  $urlRouterProvider.otherwise("/404")

  $stateProvider.state('signIn'
    url: '/admin/signin'
    controller: 'SignInController'
    templateUrl: 'signin.html'
  )

  $locationProvider.html5Mode(true)
])

It works good, but I change it to the following code:

angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
  $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')

  $urlRouterProvider.otherwise("/404")

  $stateProvider.state('admin.signIn'
    url: '/admin/signin'
    controller: 'SignInController'
    templateUrl: 'signin.html'
  ).state('admin'
    abstract: true
  )

  $locationProvider.html5Mode(true)
])

It doesn't work, i.e. I enter the address 'http://localhost/admin/signin', browser is loading, but I don't get 'signin.html' template. I need to use 'admin' state in order to use a 'resolve' function for all child states (my example is not complete). What's the trouble ? Thanks in advance!

score 2 · Accepted Answer · edited May 23 '17 at 12:23

Almost each parent should have a template - the one which will be a target for its child. There is a working plunker.

So just adding this line to the parent definition: template: "<div ui-view></div>" - will make that code working:

.state('admin', {
  abstract: true,
  template: "<div ui-view></div>"
})

What happened is - child does have its target, the anchor where it could be injected.

There could be other solution, e.g. child is targeting the root ui-view="" ... but above solution is appropriate... See View Names - Relative vs. Absolute Names, check this answer and its plunker with more examples of absolute name targeting

Check it in action here

Angular doesn't load state if I use abstract parent state

1 Answers1