我有一个 Angular 应用程序,它使用 ui-router 进行 View 路由。
我有一个包含所有布局的主模板,其中有我的 ui View ,如下所示:
<div class="content" ui-view>
<div>
以及我在应用程序中的路线:
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("customers", {
url: "/customers",
templateUrl: "app/customers/tpl.html",
controller: "Customers as vm"
});
$urlRouterProvider.otherwise("/dashboard");
}]);
在上面的代码中,templateUrl 像往常一样注入(inject)到我的内容中。
现在,我的登录页面使用了完全不同的应用程序布局。有没有办法告诉 ui-router 使用自定义布局?如何实现这一目标?
最佳答案
您可以让所有其他状态共享一个共同的父状态。该父状态的 url 可能为空字符串。
以下代码片段应该有两种方法来实现父状态。选项可以将状态命名为 parent.child
。另一种方法是在状态定义中明确提及父级。
'use strict';
angular.module('myApp', [
'ui.router'
]).
config(function($stateProvider, $urlRouterProvider) {
$stateProvider.
state('login', { // The login state has no parent
url: '/login',
template: '<h1>Login</h1>'
}).
state('app', {
url: '',
abstract: true,
template:
'<h1>Default template</h1>' +
'<a ui-sref="customers">Customers</a>' +
'<br/>' +
'<a ui-sref="app.dashboard">Dashboard</a>' +
'<br/>' +
'<a ui-sref="login">Login Page</a>' +
'<div class="content" ui-view></div>'
}).
state('customers', {
parent: 'app', // app is the parent state of customers
url: '/customers',
template: '<h3>Customers Page</h3>'
}).
state('app.dashboard', { // app is the parent state of dashboard
url: '/dashboard',
template: '<h3>Dashboard Page</h3>'
});
$urlRouterProvider.otherwise('/dashboard');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<div ng-app="myApp" ui-view></div>
有关更多详细信息,请参阅ui-router docs .
关于javascript - 如何在 ui-router 中使用单独的模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30175680/