programing

AngularJS에서 중첩된 보기를 설정하려면 어떻게 해야 합니까?

powerit 2023. 2. 27. 22:16
반응형

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

반응형