Question

我想创建这样的架构：

必须始终插入

Navbar 状态，它具有我们的模板和控制器。

内容状态必须根据网址路径插入模板和控制器。例如：

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

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

我的实际尝试：

//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>

我看到Navbar和Content状态，但主要内容和文章没有加载到内容状态。

如何创建这种架构？

Answer 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> 1}}用于加载实际状态的容器。

ui-router：不会将状态加载到状态

1 个答案: