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

I have an angular app that uses ui-router for view routing.

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

I have a master template with all my layout, and inside that I have my ui-view like below:

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

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

and my routes in app:

和我在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");

    }]);

In the code above, the templateUrl is injected in my content, as usual.

在上面的代码中,像往常一样,templateUrl被注入我的内容中。

Now, I have a login page that uses a completely different layout of my app. Is there any way to tell ui-router to use a custom layout? How to achieve that?

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

1 个解决方案

#1

You could make all other states share a common parent state. This parent state may have an empty string for a url.

您可以使所有其他状态共享一个共同的父状态。此父状态可能具有URL的空字符串。

The following snippet should two ways to implement parent states. The options are either to name the state parent.child. The other way is to explicitly mention the parent in the state definition.

以下代码片段应该有两种实现父状态的方法。选项要么命名状态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>

For more details see the ui-router docs.

有关更多详细信息,请参阅ui-router文档。

#1