AngularJS UI-路由器多页

本文介绍了AngularJS UI-路由器多页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

由于角是SPA这是了不起的，但如果我需要一些其他的页面不相关的index.html，如何用不同的UI，UI意见，路由器的状态实现呢？

As Angular is SPA that's terrific, but what if I need some other page not related to index.html, how is realised by UI-Router states with different 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'
    })
...

现在我需要的的login.html 这是index.html的完全不同的（不需要索引的页眉，页脚，侧边栏），但是配置stateProvider只是看起来index.html的用户界面视图和变化内容给它的状态。如何结合的login.html？

Now I need login.html which is totally different from index.html (don't need index's header, footer, sidebar) but config stateProvider only looks to index.html ui-view and changes content to it by states. How to combine login.html?

这似乎并不难，但我不明白这一点。

It seems not that hard, but I don't get it.

推荐答案

如您所料，也不是那么难，有一个的。

As you expected, it is not so difficult, there is a plunker.

诀窍是例如移动的共同的东西全部享有特定的模板内 common.html 并创建抽象状态。换句话说， index.html的将保持清洁：

The trick is to move the common stuff for all views inside of the specific template e.g. common.html and create the abstract state. Other words, the index.html will remain clean:

<body>

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

和它的previous内容的的将被移到通用（的 index.html的内容）。 HTML 。状态定义可能是这样的：

And its previous content (content of the index.html) would be moved to common.html. The state definition could look like this:

$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');

什么是的有意思 （我说）的是，我们推出的摘要状态，无网址。因此，所有的当前逻辑仍将，只是抽象将发挥的布局模板的作用

What is interesting (I'd say) is that we introduced abstract state, without url. So the all current logic will remain, just the abstract will play role of a layout template.

检查更多在这里：

这篇关于AngularJS UI-路由器多页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！