AngularJS UI-Router 多页

2022-01-21 00:00:00 angularjs javascript single-page-application angular-ui-router

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

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'
    })
...

现在我需要与 index.html 完全不同的 login.html(不需要索引的页眉、页脚、侧边栏)，但配置 stateProvider 只查看 index.html ui-view 和更改各国对此感到满意.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.

推荐答案

如你所料，没那么难，有一个plunker.

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>

并且它之前的内容(index.html的内容)会被移动到common.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');

有趣 (我想说) 是我们引入了 abstract 状态，没有 url.所以所有当前的逻辑都将保留，只是摘要将扮演布局模板的角色.

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.

在此处查看更多信息:示例

相关文章