AngularJS UI-Router multiple pages

AngularJS UI-Router multiple pages

本文关键字：pages multiple UI-Router AngularJS      更新时间：2023-09-26

由于Angular是SPA，这很棒，但如果我需要一些与index.html无关的其他页面，如何通过不同的ui-view实现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'
    })
...

现在我需要login.html这是完全不同于index.html(不需要索引的页眉，页脚，侧边栏)，但配置stateProvider只看index.html ui-view和改变内容到它的状态。如何结合login.html?

这似乎不难，但是我不明白。

正如你所料，没有那么难，有一个活塞。

技巧是将所有视图的通用内容移动到特定模板中，例如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。所以所有的当前逻辑将保留，只是抽象将扮演布局模板的角色。

查看更多信息:示例

我以前也遇到过这个问题，如果您感兴趣，请参阅 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>

login.html

(包含此视图的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分离的状态。通过在angular router中使用状态继承，你可以在你的main中进一步拥有子状态，在本例中是dashboard和crm。

相关文章：