AngularJS UI-Router 多页面 [英] AngularJS UI-Router multiple pages
问题描述
由于 Angular 是 SPA，这很棒，但是如果我需要其他一些与 index.html 无关的页面怎么办，如何通过具有不同 ui-views 的 UI-Router 状态来实现?
As Angular is SPA that's terrific, but what if I need some other page not related to index.html, how is realised by UI-Router states with different ui-views?
例如，我有 index.html:
<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body>
<header>
<data-user-profile class="user-profile"></data-user-profile>
</header>
<section class="content-wrapper">
<aside data-main-menu></aside>
<div class="main-content" data-ui-view></div>
</section>
<footer class="row"></footer>
...
</body>
</html>
app.js:
var app = angular.module('npAdmin', ['ui.router']);
app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: '/app/dashboard/dashboard.html',
controller: 'DashboardCtrl'
})
.state('crm', {
url: '/crm',
templateUrl: '/app/crm/crm.html',
controller: 'CrmCtrl'
})
...
现在我需要 login.html，它与 index.html 完全不同(不需要索引的页眉、页脚、侧边栏)但配置 stateProvider 只查看 index.html ui-view 和更改各州对其的内容.如何合并login.html?
Now I need login.html which is totally different from index.html (don't need index's header, footer, sidebar) but config stateProvider only looks to index.html ui-view and changes content to it by states. How to combine login.html?
好像没那么难，但我不明白.
It seems not that hard, but I don't get it.
推荐答案
如你所料，没有那么难，有一个 plunker.
As you expected, it is not so difficult, there is a plunker.
诀窍是在特定模板中移动所有视图的通用内容，例如common.html 并创建抽象状态.换句话说，index.html 将保持干净:
The trick is to move the common stuff for all views inside of the specific template e.g. common.html and create the abstract state. Other words, the index.html will remain clean:
<body>
<div ui-view=""></div>
</body>
它之前的内容(index.html的内容)将被移动到common.html.状态定义可能如下所示:
And its previous content (content of the index.html) would be moved to common.html. The state definition could look like this:
$stateProvider
.state('common', {
templateUrl: 'tpl.common.html',
abstract: true,
})
.state('dashboard', {
url: '/dashboard',
parent: 'common',
...
})
.state('crm', {
url: '/crm',
parent: 'common',
...
})
.state('login', {
url: '/login',
templateUrl: 'tpl.login.html',
});
$urlRouterProvider.otherwise('/crm');
有趣的 (我想说)是我们引入了抽象状态，没有网址.所以所有当前逻辑将保持，只是抽象将扮演布局模板的角色.
What is interesting (I'd say) is that we introduced abstract state, without url. So the all current logic will remain, just the abstract will play role of a layout template.
在此处查看更多信息:示例
这篇关于AngularJS UI-Router 多页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
