Question

我有一个使用 ui-router 进行视图路由的角度应用。

我有一个包含所有布局的主模板，在里面我有我的ui-view，如下所示：

<div class="content" ui-view>
<div>

和我在app中的路线：

 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注入我的内容中。

现在，我有一个登录页面，它使用了我的应用程序的完全不同的布局。有没有办法告诉ui-router使用自定义布局？如何实现？

Answer 1

您可以让所有其他州共享一个共同的父状态。此父状态可能包含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。

如何在ui-router中使用分离的模板？

1 个答案: