Javascript AngularJS UI路由器多页_Javascript_Angularjs_Single Page Application_Angular Ui Router

Javascript AngularJS UI路由器多页

javascript angularjs

Javascript AngularJS UI路由器多页,javascript,angularjs,single-page-application,angular-ui-router,Javascript,Angularjs,Single Page Application,Angular Ui Router,由于角度是SPA，这太棒了，但是如果我需要一些与index.html无关的其他页面，那么UI路由器状态如何通过不同的UI视图实现呢例如，我有index.html： <!DOCTYPE html> <html data-ng-app="npAdmin"> <head> ... </head> <body> <header> <data-user-profile class="user-profile"

由于角度是SPA，这太棒了，但是如果我需要一些与index.html无关的其他页面，那么UI路由器状态如何通过不同的UI视图实现呢

例如，我有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>

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完全不同（不需要index的页眉、页脚、侧边栏），但ConfigStateProvider只查看index.html ui视图，并按状态更改其中的内容。如何组合login.html

这似乎没那么难，但我不明白。

我以前也遇到过这个问题，如果您感兴趣，请参阅。在该链接中，我还处理了

returnUrl

和

401http状态码

，以防用户未经授权

在您的情况下，我建议您按照以下方式设计应用程序：

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

index.html：

<!DOCTYPE html>
<html data-ng-app="npAdmin">
<head>
...
</head>
<body data-ui-view>

</body>
...
</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>

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

由于角度是SPA，因此index.html应该覆盖应用程序的所有视图。有多种方法可以确保这一点。在本例中，

登录

也是应用程序中与
主
分离的状态。通过在angular router中利用状态继承，您可以在
主
中进一步拥有子状态，在这种情况下，这些子状态是
仪表板
和
crm
。
正如您所预期的，这并不是那么困难，有一个
诀窍是将所有视图的公共内容移动到特定模板内，例如
common.html
，并创建抽象状态。换句话说，
index.html
将保持干净：

<body> <div ui-view=""></div> </body>
有趣的是，我们引入了无url的抽象状态。因此，所有当前逻辑将保持，只有摘要将扮演布局模板的角色

检查此处的更多信息：
除上述内容外，如果要使用单独的登录页面，请确保实现身份验证检查服务。这样，如果用户没有登录，他们将被重新定向到登录页面。有关基本实现，请参见。@Ed B:当然可以，因为这不包括在问题中。我们将检查所有请求，不仅是登录页面。非常感谢，非常详尽的回答，但有一些小错误。Radim的抽象状态解决方案似乎是完美的解决方案。@swolfish:我没有测试代码，我只是给出了想法。正如我所说，有多种方法可以做到这一点。这只是一个设计问题。现在我知道如何使用抽象状态属性。谢谢。很高兴见到你；）<代码>用户界面路由器功能强大，令人难以置信。。。享受它；）@我建议基拉布格，提出问题。显示更多细节。你肯定会得到答案的。或者让我知道我也可以检查。注释不适用于调查为什么您的代码不起作用。。。这有意义吗？@KillABug如果我知道，我会帮忙的。但你的问题会针对比我更多的人，所以你会得到答案。。。我是sure@RadimK奥勒