ui-router：不将状态加载到状态中答案

【问题标题】：ui-router: doesn't load states into stateui-router：不将状态加载到状态中
【发布时间】：2017-03-15 03:46:27
【问题描述】：

我想创建这样的架构：

导航栏状态必须始终插入，它有我们的模板和控制器。

Content 状态必须根据 URL 路径插入模板和控制器。示例：

mysite.com/ 将 main.html 和 mainCtrl.js 插入 Content 状态。

mysite.com/articles 将articles.html 和articlesCtrl.js 插入Content 状态。

我的实际尝试：

//app.js
var app = angular.module('myApp', [
    'ui.router',
    'ngCookies',
    'myApp.content',
    'myApp.main',
    'myApp.navbar',
    'myApp.articles',
]);

app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
    .state('index', {
            url: '/',
            views: {
                'navbar': {
                    templateUrl: 'templates/navbar.html',
                    controller: 'navbarCtrl'
                },
                'content': {
                    templateUrl: 'templates/content.html',
                    controller: 'contentCtrl'
                }
            }
        })


//contentCtrl.js
angular.module('myApp.content', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('content.main', {
                url: '/',
                views: 'templates/content/main.html',
                controller: 'mainCtrl'
            })
            .state('content.articles', {
                url: '/articles',
                views: 'templates/content/articles.html',
                controller: 'articlesCtrl'
            }
    }])
.controller('contentCtrl', ['$scope', function ($scope) {

}
]);

//index.html
<body ng-app='myApp'>
  <div ui-view="navbar"></div>
  <div ui-view="content"></div>
</body>

//content.html
<h1>Content template</h1>
<ui-view></ui-view>

我看到导航栏和内容状态，但主要和文章没有加载到内容状态。

如何创建这种模式？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

如果导航必须始终存在于页面中，那么您可以执行以下操作：

<body ng-app='myApp'>
  <div ng-include="templates/navbar.html"></div>
  <div ng-include="templates/content.html"></div>
</body>

接下来，在您的 navbar.html 模板中，直接从视图中包含控制器，这样您就不需要特殊的状态了：

<div ng-controller="navbarCtrl">
   <!-- THE ACTUAL NAVIGATION HTML -->
</div>

现在您应该能够只管理应用程序的“真实”状态，并且您不需要在内部状态之前添加 content. 前缀，并且在 content.html 中您已经拥有用于加载的 <ui-view></ui-view> 容器实际状态。

【讨论】：