레이아웃의 모범 사례

Question

고유 한 각 모듈로 시작된 dashboard.html이라는 관리 대시 보드 응용 프로그램이 있습니다. 이 응용 프로그램은 맨 위, 왼쪽 막대 탐색 등의 n 머리글 막대와 일관된 레이아웃을 가지고 있습니다. 경로가 변경되면 내용 컨테이너 만 업데이트되고 나머지 레이아웃은 영향을받지 않습니다.

내 문제는 헤더 바 및 탐색 기능없이 완전히 다른 레이아웃의 로그인 페이지입니다.

현재 사용자가 성공적으로 로그인하면 dashboard.html 앱으로 리디렉션되는 자체 모듈로 login.html 파일을 작성하여이 문제를 해결합니다.

일반적인 사용 방법입니까, 아니면 경로를 변경하고 다른 응용 프로그램으로 리디렉션하지 않고 단일 응용 프로그램에서 깨끗하게 수행 할 수 있습니까?

Answer 1

각도 UIrouter를 사용하여이를 수행 할 수 있습니다.

이 피들을 봐, http://jsfiddle.net/thardy/eD3MU/.

<div ui-view="main"></div> 



angular.module('myApp', ['ui.state']) 
.config(['$stateProvider', '$routeProvider', 
    function ($stateProvider, $routeProvider) { 
     $stateProvider 
      .state('test', { 
       abstract: true, 
       url: '/test', 
       views: { 
        'main': { 
         template: '<h1>Hello!!!</h1>' + 
            '<div ui-view="view1"></div>' + 
            '<div ui-view="view2"></div>' 
        } 
       } 
      }) 
      .state('test.subs', { 
       url: '', 
       views: { 
        'view1@test': { 
         template: "Im View1" 
        }, 
        'view2@test': { 
         template: "Im View2" 
        } 
       } 
      }); 
    }]) 
    .run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
     $state.transitionTo('test.subs'); 
    }]); 

당신은 당신의 앱은 로그인 및 대시 보드 페이지 메인 뷰를 만들 수있는 앱으로 주요 전망과 하위 뷰를 생성 할 수 있으며, 필요에 따라 당신은 당신의 대시 보드 페이지에서 하위 뷰를로드 할 수 있습니다.