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

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

< - 这是我怎么做我的对myApp路由的样本（只有一个观点 - “/厂景”） - >

的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.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>

来源

2016-04-14 Ariana

一个真正的裸骨的方法将是这样的：https://jsfiddle.net/u2um2yeq/ 请注意，还有更多的需要做，使小提琴登录安全，如使用服务来验证用户或每个请求上的令牌。 – Rob

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

希望这可以帮助你，如果有任何问题请让我知道。

来源

2016-04-14 15:44:57

谢谢，我认为这是最好的解决方案。我用ui-router更新了路由，现在它正在工作。非常感谢你。 – Ariana

很高兴帮助你:) –

我有类似的问题。我尝试了上面的代码。但只有包含页眉和页脚的母版页正在加载。内容页面未加载。

不工作@ David你有什么想法吗？ –

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

来源

2016-04-14 14:13:51

不是我想要的，但是谢谢你。 – Ariana

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

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

了解更多@ Angular Dev Docs。

来源

2016-04-14 14:22:02

您需要将您的登录页面创建为不同的ngApp，并在成功登录时将您的sesion存储在localSotarge中，然后重定向到您的主要ngApp。

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

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

来源

2016-04-14 14:37:42

谢谢。这似乎是我的问题的一个很好的解决方案，但我认为最简单的解决方案可能是使用angular-ui-router更新我的路由。 – Ariana

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

回答

相关问题