AngularJS UI-Router多个页面

一尘不染

AngularJS UI-Router多个页面

angularjs

SPA是Angular的绝妙之处，但是如果我需要其他与index.html不相关的页面怎么办，具有不同ui视图的UI-Router状态又如何实现呢？

例如，我有 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 （不需要索引的页眉，页脚，侧边栏），但是config
stateProvider仅查找index.html ui视图并按状态更改内容。如何结合login.html？

似乎并不难，但我不明白。

阅读 236

2020-07-04

共1个答案

一尘不染

正如您所期望的那样，它并不是那么困难，它有一个plnkr。

诀窍是在特定模板内移动所有视图的通用内容，例如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');

有趣的 是 （我会说） 我们引入了 没有url的 抽象状态。因此，所有 当前逻辑将保留 ，仅摘要将充当布局模板的 角色。

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

2020-07-04