如何更改ng視圖

我想要做一個Angular JS應用程序，但我有一些問題。如何更改ng視圖

這是我的index.html代碼

<body ng-app="StockApp"> 
     <div id="wrapper" class="flex-column"> 
      <div ng-hide="hideNavBar" id="navbarundsub"> 
      </div> 
      <div ng-show="hideStockInformation" id="stockInformation"> 
      </div> 
      <div id="main" class="flex-row"> 
       <div ng-hide="hideSideMenu" id="sidemenu"> 
       </div> 
       <div ng-hide="hideSideMenuUser" id="sidemenuUser"> 
       </div> 
       <!--CONTENIDO--> 
       <ng-view></ng-view> 
      </div> 
     </div> 
</body>

我的問題是，我的第一個頁面爲登錄，所以我不希望顯示在那裏去NG-觀點的div裏面的login.html，所以我不知道如何改變ng-view，或者我怎樣才能將登錄傳遞給其他頁面......我不知道。

希望有人能幫助我。

來源

2017-04-26 Enya Valeria Martínez

參閱https://thinkster.io/ ng-view a nd https://www.tutorialspoint.com/angularjs/angularjs_views.htm以獲得更多理解 –

ng-view是Angular1的重要指令之一。

Documentation

我們需要扶養注射注入ngRoute。這裏我們需要保持這樣的

Routing Example

這樣

 var mainApp = angular.module("mainApp", ['ngRoute']); 
    mainApp.config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 

     when('/login', { 
      templateUrl: 'login.htm', 
      controller: 'LoginController' 
     }). 

     when('/employee', { 
      templateUrl: 'employee.htm', 
      controller: 'EmployeeController' 
     }). 

     otherwise({ 
      redirectTo: '/login' 
     }); 
    }]);

來源

2017-04-26 18:01:08

我已經這樣做了。我的問題是，登錄是一個獨立的頁面，我不想用ng-view –

顯示它然後，我會建議你使用ng-show指令 – Zooly

ng-show的問題是它不尊重設計 –

您需要創建登錄2角模板之一，另一個用於儀表板，請保持航路。

登錄模板不包含任何菜單和標題，其中儀表板模板包含菜單和標題。

你必須改變你的路線從一個模板頁面到另一個模板頁面。您需要使用ui-router角度模塊。使用ng-route不能更改從一個模板頁面到另一個模板頁面的路由。

UI路由器模塊：

https://github.com/angular-ui/ui-router/wiki

app.js

angular 
    .module('myapp', [ 
    'ui.router', 
    ]) 
    .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 
     $urlRouterProvider.otherwise('/dashboard/Home'); 
     $stateProvider 
     .state('dashboard', { 
      url: '/dashboard', 
      templateUrl: 'views/dashboard/main.html', 
     }) 
     .state('home', { 
      parent:'dashboard', 
      url: '/Home', 
      controller: 'MainCtrl', 
      templateUrl: 'views/pages/blank.html', 

      } 
     }) 
     .state('login', { 
      templateUrl: 'views/pages/login.html', 
      url: '/login' 
     }) 
    } 
    ]);

的index.html

<!doctype html> 
<html class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 


     <!-- build:css(.tmp) styles/main.css --> 
     <link rel="stylesheet" href="styles/libs/bootstrap.min.css" /> 
     <link rel="stylesheet" href="styles/main.css"> 
     <link rel="stylesheet" href="styles/sb-admin-2.css"> 
     <link rel="stylesheet" href="styles/timeline.css"> 
     <link rel="stylesheet" href="styles/libs/metisMenu.min.css"> 
     <link rel="stylesheet" href="styles/libs/loading-bar.min.css"> 
     <link rel="stylesheet" href="styles/libs/font-awesome.min.css" 
     type="text/css"> 
     <!-- endbuild --> 

     <!-- bower:js --> 
     <script src="js/libs/jquery.min.js"></script> 
     <script src="js/libs/bootstrap.min.js"></script> 
     <script src="js/libs/metisMenu.min.js"></script> 

     <script src="js/libs/angular.min.js"></script> 
     <script src="js/libs/angular-ui-router.min.js"></script> 
     <script src="js/libs/ocLazyLoad.min.js"></script> 
     <script src="js/libs/loading-bar.min.js"></script> 
     <script src="js/libs/ui-bootstrap-tpls.min.js"></script> 
     <!-- endbower --> 


     <!-- build:js({.tmp,app}) scripts/scripts.js --> 
     <script src="scripts/app.js"></script> 
     <!-- endbuild --> 
    </head> 
    <body> 
     <div ng-app="ApsilonApp"> 
      <div ui-view></div> 
     </div> 
    </body> 

</html>

來源

2017-05-02 11:40:58

如何更改ng視圖

回答

相關問題