没有 Index.html 设计的登录页面 - ngRoute (AngularJS)

Question

我正在使用 ngRoute 进行 AngularJS 应用程序 (myApp) 的路由，但我遇到了一个问题：我不知道如何不应用我的 index.html设计（包括我所有的侧边栏）到我的 login.html 页面，如果它被定义为视图，它似乎默认应用。我想为我的 login.html 页面设计一个简单的设计：只有两个字段要填写，没有我的 index.html 的设计，它应用于 myApp 中的所有视图。因此，我不知道如何进行路由来完成这样的任务。非常感谢。

<-- 这是我如何在 myApp 中进行路由的示例（仅针对一个视图 - “/view1”）-->

app.js的样本：

'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ngCookies',
'myApp.view1',
])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

对于每个视图，都有一个关联的 .js 文件，我在其中定义了它的路由和控制器。例如，对于视图“/view1” - view1.js:

'use strict';

 angular.module('myApp.view1', ['ngRoute', 'ngResource'])

 .config(['$routeProvider', function($routeProvider) {
   $routeProvider.when('/view1', {
    templateUrl: 'view1.html',
    controller: 'View1Ctrl'
   });
 }])

.controller('View1Ctrl', ['$scope', function($scope) {
// something
}]);

还有我的样本 index.html:

<!doctype html>
<html lang="en" ng-app="myApp">
 <head>
  <script src="view1.js"></script>
  <-- MORE SCRIPTS ARE LOADED --> 
 </head>
 <body class="hamburg" ng-controller="MasterCtrl">
  <-- SIDEBARS ARE DEFINED -->
  <div id="content-wrapper">
   <div class="page-content">

    <!-- Main Content -->
    <div class="row">
     <div class="col-xs-12">
       <div class="widget">
         <div class="widget-body">
          <div ng-view></div>
         </div>
       </div>
     </div>
    </div>

  </div>
 </div>
</body>

Answer 1

路由用于在 angular SPA 中注入视图。我从你的问题中得到的是你需要一个登录对话框。为此，您可以查看 ngDialog 或 uibDialog

Answer 2

在您的情况下，您需要加载新布局。我了解，对于登录和应用程序，布局大多不同。此操作相当于将页面重定向到新位置。使用新的 angular 应用程序和控制器进行登录。您可以使用：

$window.location.href="new/layout/template"。

阅读更多@ Angular Dev Docs。

Answer 3

您需要创建您的登录页面作为一个不同的 ngApp，将您的会话存储在 localSotarge 以防登录成功，然后重定向到您的主 ngApp。

在您的主 ngApp 中，验证 localStorage 中是否存在会话，如果不存在则重定向到 loginApp。

我知道这听起来有点过头了，但在我与 AngularJS 一起工作的 3 年里，我还没有找到任何其他解决方案。现在，请记住这是必要的，因为您不需要应用您的 index.html，唯一的方法是使用另一个 ngApp。

Answer 4

鉴于上面的情况看起来你想要两个页面布局（页面设计或页面模板），第一个现在用于index.html，第二个您想要在 login.html 中使用的一个，它只有两个字段需要填写。所以 angular-ui/ui-router (doc url: https://github.com/angular-ui/ui-router/wiki) 可能是这个问题的解决方案。

其背后的想法是 ui-router 有一个名为 ui-view 的非常强大的工具，您可以将其视为布局或模板。因此，当路径位于 /index 或 /home 等登录页面以外的任何页面时，请使用一个 ui-view，而在 /login 页面上则使用另一个不同的 ui-view。

举个粗略的例子： index.html 页数：

<html>
    <head></head>
    <body>
        <div ui-view="layout"></div>
    </body>
</html>

我假设你会重复使用头部部分，所以只需将正文中的所有东西都包裹在原来的 index.html 中，然后放入新的 index.html 中。同登录页面login.html.

配置文件：

$stateProvider
  .state('index', {
      url: '/index',
      views: {
          layout: {
              templateUrl: "/path/to/index.html"
          }
      },
      controller: 'indexController'
  }

  .state('login', {
      url: '/login',
      views: {
          layout: {
              templateUrl: "/path/to/login.html"
          }
      },
      controller: 'loginController'
})

所以上面的代码做了什么和你用 $routeProvider 做的非常相似，它定义了 url 使用哪个 controller 和加载哪个 view.

希望对您有所帮助，如有任何问题，请告诉我。

没有 Index.html 设计的登录页面 - ngRoute (AngularJS)

Login Page without Index.html Design - ngRoute (AngularJS)

javascript

html

angularjs

ngroute

angularjs-ng-route