ng-view를 변경하는 방법

Angular JS 앱을하려고하는데 몇 가지 질문이 있습니다.ng-view를 변경하는 방법

이것은 내 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

을 참조

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을 https://thinkster.io/ 보기 자세한 내용은 https://www.tutorialspoint.com/angularjs/angularjs_views.htm –

NG-보기 Angular1의 중요한 지침 중 하나입니다.

Documentation

우리는 의존성 주입에 ngRoute를 주입해야합니다. 는 여기에서 우리는 당신은 대시 보드 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

이미 해 보았습니다. 내 문제는 디자인을 존중하지 않는다는 것입니다 loging는 indepent 페이지입니다 내가 그럼 난 NG 쇼 지시어 –

그것을 보여주고 싶어하지 않는다는 것입니다 – Zooly

NG 쇼의 문제를 사용하도록 운영자 추천 것 NG-보기 –

등이

Routing Example

유지하십시오 경로와 같은 경로를 유지해야합니다.

로그인 템플릿은하지 대시 보드 템플릿 메뉴와 헤더를 모두 포함 된 메뉴와 헤더가 포함되어 있습니다.

는 다른 템플릿 페이지에 하나의 템플릿 페이지에서 경로를 변경해야합니다. 당신은 ui-router 앵귤러 모듈을 사용해야합니다. ng-route를 사용하면 경로를 한 템플리트 페이지에서 다른 템플리트 페이지로 변경할 수 없습니다.

UI 라우터 모듈 :

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

는 app.js

<!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

답변

관련 문제