AngularJS UI-Router 多页答案

【问题标题】：AngularJS UI-Router multiple pagesAngularJS UI-Router 多页
【发布时间】：2014-07-24 16:36:13
【问题描述】：

由于 Angular 是一个很棒的 SPA，但是如果我需要一些与 index.html 无关的其他页面，那么 UI-Router 状态如何通过不同的 ui-views 实现？

例如，我有 index.html：

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body>
   <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>
...
</body>
</html>

app.js：

var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('dashboard', {
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('crm', {
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })
...

现在我需要与 index.html 完全不同的 login.html（不需要索引的页眉、页脚、侧边栏），但配置 stateProvider 只查看 index.html ui-view 和更改各国对此感到满意。 login.html如何结合？

好像没那么难，但我不明白。

【问题讨论】：

标签： javascript angularjs single-page-application angular-ui-router

【解决方案1】：

如你所料，没那么难，有plunker。

诀窍是移动特定模板内所有视图的通用内容，例如common.html 并创建抽象状态。换句话说，index.html 将保持干净：

<body>

    <div ui-view=""></div>
</body>

并且它之前的内容（index.html的内容）将被移动到common.html。状态定义可能如下所示：

$stateProvider
  .state('common', {
    templateUrl: 'tpl.common.html',
    abstract: true,
  })
  .state('dashboard', {
    url: '/dashboard',
    parent: 'common',
    ...
  })
  .state('crm', { 
    url: '/crm',
    parent: 'common',
    ...
  })
  .state('login', {
    url: '/login',
    templateUrl: 'tpl.login.html',
  });

$urlRouterProvider.otherwise('/crm');

有趣 （我想说）是我们引入了抽象状态，没有网址。所以所有当前逻辑将保留，只是摘要将扮演布局模板的角色。

在此处查看更多信息：example

【讨论】：

现在我知道如何使用抽象状态属性了。谢谢。
很高兴看到这一点；）ui-router 令人难以置信，而且非常强大……尽情享受吧；）
@KillABug 我建议，提出问题。显示更多细节。你一定会得到答案的。或者让我知道我也可以检查它。评论不适合调查为什么你的代码不工作...有意义吗？
@KillABug 如果我知道，我会提供帮助。但是你的问题会针对比我更多的人，所以你会得到答案......我敢肯定
@RadimKöhler stackoverflow.com/questions/29073389/…

【解决方案2】：

我之前也遇到过这个问题，有兴趣可以参考THIS。在该链接中，我还处理了returnUrl 和401 http status code，以防用户未经授权。

在你的情况下，我建议你这样设计你的应用程序：

index.html:

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body data-ui-view>

</body>
...
</html>

main.html:

  <header>
      <data-user-profile class="user-profile"></data-user-profile>
  </header>

  <section class="content-wrapper">
      <aside data-main-menu></aside>
      <div class="main-content" data-ui-view></div>
  </section>

  <footer class="row"></footer>

（包括您的 html 用于此视图）

App.js：

var app = angular.module('npAdmin', ['ui.router']);

app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('login',{
       url:"/login",
       templateUrl: '/app/login.html',
       controller: 'LoginCtrl'
     })
    .state('main',function(){
       url:"/",
       templateUrl: '/app/main.html',
       controller: 'MainCtrl',
       abstract: true //you could use abstract state or not depending on your design 
    })
    .state('main.dashboard', { //inherit from your main
        url: '/dashboard',
        templateUrl: '/app/dashboard/dashboard.html',
        controller: 'DashboardCtrl'
    })
    .state('main.crm', { //inherit from your main
        url: '/crm',
        templateUrl: '/app/crm/crm.html',
        controller: 'CrmCtrl'
    })

解释：

由于 Angular 是 SPA，因此您的 index.html 应该覆盖应用程序的所有视图。有多种方法可以确保这一点。在此示例中，login 也是您的应用程序中的一个状态，它与您的 main 分开。通过在角度路由器中利用状态继承，您可以在 main 中进一步拥有子状态，在这种情况下为 dashboard 和 crm。

【讨论】：

除上述之外，如果您要拥有一个单独的登录页面，请确保您实现了身份验证检查服务。这样，如果用户未登录，他们将被重定向到登录页面。有关基本实现，请参阅this video。
@Ed B：当然，因为这不包括在问题中。我们将检查所有请求，而不仅仅是登录页面。
非常感谢，非常详尽的回答，但有一些小错误。 Radim 的抽象状态解决方案似乎是完美的解决方案。
@swolfish：我没有测试代码，我只是给出了想法。正如我所说，有多种方法可以做到这一点。这只是设计问题。