[英]Login Page without Index.html Design - ngRoute (AngularJS)
我正在使用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>
您需要創建登錄頁面作為diferente ngApp，如果成功登錄，則將您的sesion存儲在localSotarge上，然后重定向到主ngApp。
在主要的ngApp中，驗證localStorage中是否存在會話，如果不存在則驗證是否存在重定向到loginApp。
我知道這聽起來有點像過度的東西，但我在使用AngularJS的3年中沒有找到任何其他解決方案。 現在，請記住這是必要的，因為您不需要應用index.html，唯一的方法是使用另一個ngApp。
鑒於上面的情況看起來你想要兩個頁面布局 （頁面設計或頁面模板），第一個現在在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 。
希望這可以幫到你，如果有任何問題請告訴我。
路由用於在角度SPA中注入視圖。 我從你的問題中得到的是你需要一個登錄對話框。 為此你可以看看ngDialog或uibDialog
在您的情況下，您需要加載新的布局。 我理解，對於登錄和應用程序，主要有不同的布局。 此操作等於將頁面重定向到新位置。 使用新的角度應用程序和控制器登錄。 您可以使用：
$window.location.href="new/layout/template" 。
閱讀更多@ Angular Dev Docs 。
AngularJS-需要在index.html頁面中訪問服務中的數據
[英]AngularJS - need access in index.html page to data from a service
我無法使用Angularjs在index.html中包含另一個html頁面
[英]I can't include another html page in my index.html using Angularjs
AngularJS Web應用程序視圖頁面源僅顯示“ index.html”內容
[英]AngularJS web application view page source only showing “index.html” contents
我的ng-view與index.html頁面angularjs無限循環
[英]My ng-view being infinite loop with index.html page angularjs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.