ng-viewを変更するには

私はAngular JSアプリをやろうとしていますが、私はいくつか質問しています。ng-viewを変更するには

これは私の質問は、私の最初のページには、私は、デNG-図であるdiv要素内login.htmlとを表示したくないログインであるということである私の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-viewを変えることができないのか、ログインを別のページに渡すことができないのか分かりません。

誰かが私を助けることを願っています。

出典

2017-04-26 Enya Valeria Martínez

はhttps://thinkster.io/参照ng-aを見るより理解のためのhttps://www.tutorialspoint.com/angularjs/angularjs_views.htm –

ng-viewはAngular1の重要な指令の1つです。

Documentation

私たちは、依存性の注入でngRouteを注入する必要があります。ここでは、この

Routing Example

のようなルートを維持する必要があるあなたは、ログインしてダッシュボードのための別のために2角度のテンプレートを作成する必要があり、この

 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の問題は、デザインを尊重しないことです –

のようなルートを維持してください。

ログインテンプレートには、メニューとヘッダーが含まれています。ダッシュボードテンプレートにはメニューとヘッダーの両方が含まれています。

あなたは、1つのテンプレートページから別のテンプレートページへのルートを変更する必要があります。あなたはui-router angle moduleを使用する必要があります。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

答えて

関連する問題