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

Question

我有一个 angular 应用程序，它使用 ui-router 进行视图路由。

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

<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 像往常一样被注入到我的内容中。

现在，我有一个使用完全不同的应用程序布局的登录页面。有没有办法告诉 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 中使用分离模板？

How to use a separated template in ui-router?

javascript

angularjs

angular-ui

angular-ui-router