登錄頁面沒有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）

回答

相關問題