具有嵌套视图/控制器的 Angular UI 路由器嵌套状态答案

【问题标题】：Angular UI Router Nested States with nested Views / Controllers具有嵌套视图/控制器的 Angular UI 路由器嵌套状态
【发布时间】：2016-06-06 17:02:01
【问题描述】：

试图找到一种在父视图和控制器下加载嵌套状态视图和控制器的方法。我让它成功路由，但它不加载嵌套模板或控制器。

感谢您的帮助！

stateHelperProvider.state({
name: 'artist',
url: '/' + artistSlug,
abstract: true,
resolve: {
  artist: ['appArtist', function(appArtist) {
    return app.getArtist();
  }]
},
children: [
  {
    name: 'events',
    url: '/',
    templateUrl: "/templates/events/events.html",
    controller: "eventsCtrl",
    parent: 'artist'
  },
  {
    name: 'extra-info',
    url: '/extra-info',
    templateUrl: "/templates/extra-info.html",
    parent: 'artist'
  },
  {
    name: 'articles',
    url: '/articles',
    templateUrl: "/templates/articles/articles.html",
    controller: "articlesCtrl",
    parent: 'artist'
  }
]
});

【问题讨论】：

标签： angularjs routing angular-ui-router

【解决方案1】：

你可以这样做：

var myApp = angular.module('angularApp', ['ui-router'])

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('artist.events', {
        url: '/events',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('artist.extra-info', {
        url: '/extra_info',
        templateUrl: '/templates/extra-info.html'
    })
    .state('artist.articles', {
        url: '/articles',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});

（或）

myApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('artist', {
        url: '/artist',
        templateUrl: 'xxxxx',
        controller: 'xxxxCtrl'
    })
    .state('events', {
        url: '/events',
        parent:'artist',
        templateUrl: '/templates/events/events.html',
        controller: 'eventsCtrl'
    })
    .state('extra-info', {
        url: '/extra_info',
        parent:'artist',
        templateUrl: '/templates/extra-info.html'
    })
    .state('articles', {
        url: '/articles',
        parent:'artist',
        templateUrl: '/templates/articles/articles.html',
        controller:'articlesCtrl'
    })
});

【讨论】：