swo*_*ish 13 javascript angularjs single-page-application angular-ui-router
由于Angular是SPA非常好,但如果我需要一些与index.html无关的其他页面,如何通过UI-Router状态实现不同的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？
看起来并不难,但我不明白.
Rad*_*ler 14
正如你所料,它并不是那么困难,有一个吸烟者.
诀窍是为特定模板内的所有视图移动公共内容,例如common.html创建抽象状态.换句话说,index.html意志保持清洁:
<body>
<div ui-view=""></div>
</body>
它的先前内容(内容index.html)将被移至common.html.状态定义可能如下所示:
$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');
什么是有趣的 (我说)是我们引进抽象的状态,没有网址.所以当前所有逻辑都将保留,只是抽象将扮演布局模板的角色.
在这里查看更多:示例
| 归档时间： |
|
| 查看次数： |
21097 次 |
| 最近记录： |