Angular 如果我使用抽象父状态，则不会加载状态

Question

有如下代码：

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)
])

效果不错，不过我改成了下面的代码：

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)
])

它不起作用，即我输入地址 'http://localhost/admin/signin'，浏览器正在加载，但我没有获得 'signin.html' 模板。我需要使用 'admin' 状态才能对所有子状态使用 'resolve' 函数（我的示例不完整）。有什么麻烦吗？提前致谢！

Answer 1

几乎每个parent应该有一个模板 - 将成为目标的模板它的child。有a working plunker.

因此只需将这一行添加到 parent 定义中：template: "<div ui-view></div>" - 将使该代码有效：

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

发生的事情是 - child 确实有它的目标，可以注入的锚点。

可能还有其他解决方案，例如child 的目标是根目录 ui-view="" ...但是上面的解决方案是合适的...参见 View Names - Relative vs. Absolute Names, check this answer and its plunker with more examples of absolute name targeting

实际查看 here

Angular 如果我使用抽象父状态，则不会加载状态

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

angularjs

angular-ui-router