Angular ui-router : ui-views vs 디렉티브?

Angular ui-router : ui-views vs 디렉티브?

---

각 라우터 인터페이스는 허용 다중 중첩보기 . 이러한 상호 교환 가능한 견해의 역할은 지시어의 역할과 겹치는 것처럼 보입니다.

(다중, 중첩) ui-views 대 angular의 지시문 사용에 대한 장단점은 무엇입니까 ?

최신 정보

상태와 라우팅은 두 가지 다른 기능입니다. 상태를 사용하면 partial.html 템플릿과 해당 컨트롤러를 교체 할 수 있으며 (선택적으로?) 해당 URL / 경로를 지정할 수 있습니다 .

Tim Kindberg ( ui-router개발자) 의 이메일 응답 :

ui-view는 지시문이므로이를 사용하면 나머지 ui-router 모듈과 잘 작동하도록 특별히 작업 한 지시문을 사용하는 것입니다. 이 기능을 대체하기 위해 자신의 지시문을 롤링하는 것이 쉽다는 것을 상상할 수 없습니다.

그리고 여기에는 두 가지 옵션이있을 수 있습니다.

일반 지침 :

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

vs ui-view "지시"

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

보너스 질문 :

있습니까 정상 각도 지시 기능은 뷰에 사용할 수? 예 :

• Transclude
• 바꾸다
• 범위 분리
• 함수 컴파일 / 연결

ui-views ARE 지시문의 경우 사용법이 다른 것으로 보입니다. 이 모델을 조화시키는 것이 합리적이지 않습니까?

---

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

사용자 계정에 대한 CRUD 작업을 처리하는 테이블에 대한 지시문이 있다고 가정 해 보겠습니다. 지시문의 이름은 user-admin. 경로 파일은 다음과 같습니다.

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

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

• 지시문을 직접 가리키는 URL을 가질 수 있습니다.
• 상태가 지시문 일 때 두 개의 템플릿 (뷰 템플릿 및 지시문 템플릿)이 필요한 중복 제거
• Angular 2.0을 준비하면서 더 많은 컨트롤러 로직을 지시문으로 이동할 수 있습니다. 여기 와 여기를 참조 하십시오 .

---

약간의 생각 / 서신 후 결론은 다음과 같습니다.

ui-view는 컨테이너를 정의하고 상태는 해당 컨테이너에 들어가는 내용을 정의합니다.

ui-view='containerName'요소에 지시문 을 넣는 것은 무언가를 담는 컨테이너를 설정하는 것입니다. 거기에 들어가는 것에 대해 아직 아무 말도하지 않았습니다.

$stateProvider.state(...)정의 를 만들 때 다음 컨테이너에 들어갈 내용을 지정합니다.

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

기존의 모든 지시문 기능 (변환, 대체, 범위 분리, 컴파일 / 링크 기능)을 ui-view와 함께 사용할 수 있습니까? 잘 모르겠습니다. 예를 들면 :

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

---

결론적으로 각 옵션에는 장단점이있는 것 같습니다. 지시문에는 몇 가지 추가 기능이 있지만 ui-view는 상호 교환 가능하며 연결된 경로를 가질 수 있습니다.

---

상대적인 면책으로 다음과 같이 할 수있는 것 같습니다.

    $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