javascript - 如何在 ui-router 中使用单独的模板？

Question

我有一个 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 使用自定义布局？如何实现这一目标？

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 .