UI路由器：沒有狀態裝入狀態

導航欄狀態必須始終插入，它有自己的模板和控制器。

內容狀態必須根據URL路徑插入模板和控制器。示例：

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>

我看到導航欄和內容狀態，但主要和文章不加載到內容的狀態。

如何創建這種模式？

來源

2017-03-14 Sergei R

如果導航必須始終出現在頁面上，那麼你可以這樣做：

<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>用於加載實際狀態的容器。

來源

2017-03-14 19:46:27

UI路由器：沒有狀態裝入狀態

回答

相關問題