각도 UI 라우터: UI 뷰 vs 디렉티브?

각도 UI 라우터: UI 뷰 vs 디렉티브?

각도 UI 라우터를 사용하면 중첩된 보기를 여러 개 사용할 수 있습니다.이러한 상호 교환 가능한 견해의 역할은 지시의 역할과 겹치는 것처럼 보인다.

(복수, 중첩된) s와 angular의 지시어를 사용할 때의 장단점은 무엇입니까?

갱신하다

상태와 라우팅은 2개의 다른 기능입니다.상태에서는 partial.html 템플릿과 해당 컨트롤러를 스왑할 수 있으며 대응하는 URL/루트를 (옵션으로) 지정할 수 있습니다.

Tim Kindberg의 이메일 답변(a)ui-router개발):

ui-view는 명령어이므로 이 명령어를 사용하는 경우 다른 ui-view 모듈과 잘 연동되도록 특별히 작업한 명령을 사용합니다.이 기능을 대체하기 위해 직접 지시하는 것이 쉽다고는 생각할 수 없습니다.

여기에는 다음 두 가지 옵션이 있습니다.

통상의 지시:

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */}) 

vs UI 뷰 "지침"

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

보너스 질문:

정상적인 각도 지시 피쳐를 뷰에 사용할 수 있습니까?예를 들어 다음과 같습니다.

• 트랜슬루드
• 교체하다
• 범위를 분리하다
• 컴파일/링크 함수

ui-views가 지시사항인 경우 사용방법이 다른 것이 분명합니다.이 모델들을 조화시키는 것이 말이 되지 않을까요?

Angular UI 라우터의 인라인 뷰를 사용하여 지시사항을 가리켰다면 어떨까요?

사용자 계정의 CRUD 작업을 처리하는 테이블에 대한 지침이 있다고 가정합니다.우리는 그 지시가 이 지령이라고 말할 것이다.user-admin루트 파일은 다음과 같습니다.

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

이것은 당신에게 많은 좋은 것을 줄 것입니다.

• 지시문을 직접 가리키는 URL을 사용할 수 있습니다.
• 상태가 단순한 지시어일 때 두 개의 템플릿(뷰 템플릿 및 지시 템플릿)이 필요 없는 중복을 제거합니다.
• Angular 2.0을 준비하면 컨트롤러 로직을 디렉티브로 더 많이 이동할 수 있습니다.여기랑 여기 보세요.

몇 가지 생각/서신 교환 후, 제 결론은 다음과 같습니다.

ui-module은 컨테이너를 정의하고 상태는 이러한 컨테이너에 들어가는 것을 정의합니다.

를 넣었을 때ui-view='containerName'무언가를 담는 컨테이너를 설치하는 것입니다.안에 뭐가 들었는지 아직 아무 말도 안 했잖아

를 작성할 때$stateProvider.state(...)다음 컨테이너에 무엇이 들어가는지 지정하는 정의:

$stateProvider.state('someState', {
  views: {
    "containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

기존의 모든 지시 기능(트랜스케이프 기능, 교환 기능, 분리 기능, 컴파일 기능/링크 기능)을 UI 뷰와 함께 사용할 수 있습니까?잘 모르겠어요.예를 들어 다음과 같습니다.

$stateProvider.state('someState', {
  views: {
    "containerName": { 
              templateUrl: "someContents.html",
              scope: { localVar: "@" },  // can you
              transclude: true,          // do this?
              controller: function(){}
    },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

---

결론적으로, 각 옵션에는 트레이드오프가 있는 것 같습니다.디렉티브에는 몇 가지 추가 기능이 있지만 UI 뷰는 서로 호환되며 루트가 관련지어질 수 있습니다.

비교적 처벌받지 않고 다음과 같은 일을 할 수 있을 것 같습니다.

    $stateProvider.state('general', {
        url: '/general',
        views: {
            main: {
                template: '<general-directive></general-directive>'
            }
        }
    });

**In Config function:**
.state('list', {
            url:'/list',
            template:'<user-info-table></user-info-table>',
            controller:'UserInfoTableController',
        });

**In Directive:**
angular.module('UserInfo').directive("userInfoTable", function() {
    return {
       templateUrl:'templates/UserInfoTable.html',
       restrict:'EA',
    };
});

언급URL : https://stackoverflow.com/questions/22790209/angular-ui-router-ui-views-vs-directives