Question

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

＆lt; - 这是我在myApp中进行路由的示例（仅适用于一个视图 - ＆＃34; / view1＆＃34;） - ＆gt;

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文件关联，我定义了它的路由和控制器。例如，对于视图＆＃34; / view1＆＃34; - 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

您需要将您的登录页面创建为不同的ngApp，在成功登录的情况下将您的会话存储在localSotarge上，然后重定向到您的主要ngApp。

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

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

Answer 2

鉴于上面的情况看起来你想要两个页面布局（页面设计或页面模板），第一个现在在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。

希望这可以帮助你，如果有任何问题，请告诉我。

Answer 3

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

Answer 4

在您的情况下，您需要加载新的布局。我理解，对于登录和应用程序，主要有不同的布局。此操作等于将页面重定向到新位置。使用新的角度应用程序和控制器登录。您可以使用：

<Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}"> <Setter Property="OverridesDefaultStyle" Value="true"/> <Setter Property="IsTabStop" Value="false"/> <Setter Property="Focusable" Value="false"/> <Setter Property="ClickMode" Value="Press"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="templateRoot" BorderBrush="{StaticResource ComboBox.Static.Border}" BorderThickness="{TemplateBinding BorderThickness}" Background="Red" SnapsToDevicePixels="true"> <Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="true" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"> <Path x:Name="arrow" Data="F1 M 0,0 L 2.667,2.66665 L 5.3334,0 L 5.3334,-1.78168 L 2.6667,0.88501 L0,-1.78168 L0,0 Z" Fill="{StaticResource ComboBox.Static.Glyph}" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/> </Border> </Border>。

了解更多@ Angular Dev Docs。

没有Index.html设计的登录页面 - ngRoute（AngularJS）

4 个答案: