AngularJS에서 중첩된 보기를 설정하려면 어떻게 해야 합니까?
저는 다양한 화면을 가진 어플을 가지고 있습니다.각 화면에는 다음과 같은 URL이 할당됩니다.#
,mails
,contacts
기타 등등.
내 메인 HTML 파일에는ng-view
사용자가 선택한 경로에 따라 업데이트됩니다.지금까지는 좋아.
일부 화면에는 하위 탐색 기능이 있습니다.예.,#mails
에는 수신 트레이와 송신 폴더가 있습니다.두 개의 컬럼이 표시됩니다.왼쪽의 서브 네비게이션, 오른쪽의 해당 폴더의 메일.
에 네비게이트 하는 경우#mails
, 로 리다이렉트 됩니다.#mails/inbox
따라서 기본적으로 받은 편지함이 메일의 기본 하위 보기입니다.
이걸 어떻게 세팅하지?
현재 생각할 수 있는 유일한 접근법(AngularJs는 처음이라 질문이 조금 순진하다면 양해 바랍니다)은 두 가지 관점을 갖는 것입니다.하나는 다음을 위한 것입니다.#mails/inbox
, 및 다른 하나는#mails/sent
.
경로를 선택하면 이러한 보기가 로드됩니다.선택할 때#mails
단순히 로 리다이렉트 할 수 있습니다.#mails/inbox
.
그러나 이는 두 보기 모두 다음 명령을 사용해야 한다는 것을 의미합니다.ng-include
네비게이션을 위해서요.어쩐지 이건 내게 잘못된 것 같아.
더 필요한 것은 중첩된 보기를 갖는 것입니다.위쪽은 메일, 연락처 등의 화면을 전환하고 아래쪽은 받은 편지함, 보낸 편지함 등의 하위 보기를 전환합니다.
이걸 어떻게 해결하죠?
AngularJS UI-Router가 문제를 해결했습니다:-)
다른 라이브러리: http://angular-route-segment.com
빌트인 대신 사용할 수 있습니다.ng-view
그리고.$route
.
루트 설정의 예는 다음과 같습니다.
$routeSegmentProvider.
when('/section1', 's1.home').
when('/section1/prefs', 's1.prefs').
when('/section1/:id', 's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2', 's2').
segment('s1', {
templateUrl: 'templates/section1.html',
controller: MainCtrl}).
within().
segment('home', {
templateUrl: 'templates/section1/home.html'}).
segment('itemInfo', {
templateUrl: 'templates/section1/item.html',
controller: Section1ItemCtrl,
dependencies: ['id']}).
within().
segment('overview', {
templateUrl: 'templates/section1/item/overview.html'}).
segment('edit', {
templateUrl: 'templates/section1/item/edit.html'}).
up().
segment('prefs', {
templateUrl: 'templates/section1/prefs.html'}).
up().
segment('s2', {
templateUrl: 'templates/section2.html',
controller: MainCtrl});
언급URL : https://stackoverflow.com/questions/15460279/how-do-i-setup-nested-views-in-angularjs
'programing' 카테고리의 다른 글
Enzyme - How to access and set value? (0) | 2023.02.27 |
---|---|
Large scale AngularJS app - multiple UI layouts (0) | 2023.02.27 |
React에서 구성 요소 간에 기능을 공유하는 올바른 방법 (0) | 2023.02.27 |
AngularJS HotTowel에서 vm "ControllerAs" 구문을 사용하는 경우 장치 테스트 파일에서 $scope에 액세스합니다. (0) | 2023.02.27 |
Spring MVC에서 @ResponseBody를 사용할 때 MIME 유형 헤더를 설정하려면 어떻게 해야 합니까? (0) | 2023.02.27 |