AngularJS UI-Router 多页

时间：2023-09-30

本文介绍了AngularJS 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.

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

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

上一篇：Angular UI路由器:具有相同URL的不同状态? 下一篇：Angular JS ui-router如何从父母重定向到子状态?

layer.open打开的页面关闭时，父页面刷新的方法layer.open打开的页面关闭时，父页面刷新的方法，在layer.open中添加： end: function(){ window.parent.location.reload();//关闭open打开的页面时，刷新父页面 }

AngularJS UI-Router 多页

问题描述

推荐答案

相关文章