2017-05-04 67 views
0

我得到了2次,我想它們之間進行切換。更改視圖和UI與AngularJS

我的第一個觀點(index.ejs)看起來像這樣,是所有用戶的儀表板,他們登錄之前(OnePager:報名及相關信息):

<!DOCTYPE html> 
<html lang="en" ng-app="app" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <title>app.com</title> 
    <link type="text/css" rel="stylesheet" href="../css/style.css"> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
</head> 
<body> 
    <div ng-view></div> 
    <script src="../lib/angular/angular.js"></script> 
    <script src="../lib/angular-route/angular-route.js"></script> 
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script> 
    <script src="../lib/angular-resource/angular-resource.js"></script> 
    <script src="../js/app.js"></script> 
    <script src="../js/controllers/indexCtrl.js"></script> 
    <script src="../js/services/Api.js"></script> 
</body> 
</html> 

與Passport身份驗證後,我想轉行這個(home.ejs):

<!DOCTYPE html> 
<html lang="en" ng-app="app" class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <title>app.com</title> 
    <link type="text/css" rel="stylesheet" href="../css/style.css"> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script> 
     <script> 
      var socket = io(); 
     </script> 
</head> 
<body> 
<SOME OTHER HTML INCLUDED SIDEBARS & TOP BARS> 
    <div ng-view></div> 
    <script src="../lib/angular/angular.js"></script> 
    <script src="../lib/angular-route/angular-route.js"></script> 
    <script src="../lib/angular-sanitize/angular-sanitize.js"></script> 
    <script src="../lib/angular-resource/angular-resource.js"></script> 
    <script src="../js/app.js"></script> 
    <script src="../js/controllers/homeCtrl.js"></script> 
    <script src="../js/services/Api.js"></script> 
</body> 
</html> 

所以我的側面和頂欄應保持靜態像一個水療中心和剛剛通過的路線導航改變NG-視圖。

這樣做的最好方法是什麼?

感謝,Chzn

回答

0

首先,有沒有必要宣佈所有在home.ejs因爲一旦你把他們在他們可以留在標籤NG-應用程序中定義的所有應用程序的索引腳本。現在,你的問題本身,你可以做一個單獨的文件只是創建你的HTML代碼,並在索引文件中添加它的引用,並把下面的語句在你的NG-應用程序的js腳本是什麼:

var app = angular.module('app', []); 

app.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/home', { templateUrl: home.html, controller:homeController }); 
    $routeProvider.otherwise({ redirectTo: '/' }); 
}]); 

app.controller('mainController', ['$scope', $location, function($scope, $routeProvider){ 
    $location.path("/home"); 
}]) 

而這一切,你只需要把mainController的NG-控制器標籤內的索引和可以工作,我想。

讓我知道,如果有幫助,

+0

首先非常感謝。但我確實知道所有這一切。如何使用路線提供者以及如何從單獨的文件中顯示部分頁面。但是我的主要問題是如何我可以得到一個靜態的側面和頂欄,如抽搐SPA [鏈接](https://www.twitch.tv/)。我想加載沒有靜態頂部和側邊欄的索引文件。它看起來像這個詛咒[鏈接](http://www.curse.com/)。經過身份驗證載荷靜頂部和側邊欄,只是通過像抽搐的應用程序在第一個鏈接確實routeprovider改變NG-視圖。 – chzn

0

嗯,我發現它自己。我在找什麼是嵌套視圖(子視圖)。它可以很容易地完成與ui路由器從角的傢伙。這可以在這裏找到了答案快https://github.com/angular-ui/ui-router