javascript - 예제 - 앵귤러 ui router




각도 경로와 각도 ui 라우터의 차이점은 무엇입니까? (10)

내 큰 응용 프로그램에서 AngularJS를 사용할 계획입니다. 그래서 사용할 모듈을 찾아야합니다.

ngRoute (angular-route.js ) 모듈과 ui-router (angular-ui-router.js) 모듈의 차이점은 무엇입니까?

ngRoute 를 사용할 때 많은 기사에서 route는 $ routeProvider 로 구성됩니다. 그러나 ui-router 와 함께 사용할 경우 route는 $ stateProvider 및 $ urlRouterProvider로 구성됩니다.

관리 성 및 확장 성을 높이기 위해 어떤 모듈을 사용해야합니까?



1-ngRoute는 앵귤러 팀에 의해 개발되었지만 ui-router는 타사 모듈로 개발되었습니다. 2- ngRoute는 라우트 URL을 기반으로 라우팅을 구현하는 반면, ui-router는 애플리케이션의 상태에 따라 라우팅을 구현합니다. 3-ui-router는 ng-route가 제공하는 모든 기능과 중첩 된 상태 및 여러 개의 명명 된보기와 같은 몇 가지 추가 기능을 제공합니다.


AngularUI Router는 AngularJS를위한 라우팅 프레임 워크입니다.이 인터페이스를 사용하면 인터페이스의 일부를 상태 시스템으로 구성 할 수 있습니다. URL 경로를 중심으로 구성되는 Angular ngRoute 모듈의 $ route 서비스와 달리 UI-Router는 상태를 중심으로 구성되며 선택적으로 경로와 기타 동작을 첨부 할 수 있습니다.

ui-router


ngRoute 패러다임 내에서 구현 된 중첩 된 뷰 기능을 사용하려면 angular-route-segment.com 사용해보십시오. 즉, ngRoute를 대체하는 대신 연장하는 것이 목표입니다.


ngRoute는 기본적인 클라이언트 측 라우팅 기능을 제공하는 Angular 팀에 의해 개발 된 모듈입니다. 이 모듈은 라우팅에 대한 상당히 강력한 기반을 제공하며, 이 블로그 게시물에 나와 있는 것처럼 견고한 라우팅 기능을 제공하기 위해 매우 쉽게 빌드 될 수 있습니다 (저자 인 Ward Bell과 Ben Nadel 사이의 주석 흔적을 읽으십시오. 앵귤러 프로 부부)

ui-router는 URL 중심 경로에서 URL에 반영 될 수도 있고 적용되지 않을 수도있는 "상태"로 초점을 이동합니다.

ui-router가 추가하는 주요 기능은 중첩 된 상태와 명명 된보기입니다.

중첩 된 상태를 통해 응용 프로그램의 다양한 부분에 대한 컨트롤러 논리를 분리 할 수 ​​있습니다. 이것의 아주 간단한 예는 상단에 기본 탐색, 왼쪽에 보조 탐색 목록, 오른쪽에 내용이있는 응용 프로그램입니다. 중첩 된 상태가 없으면 단일 제어기는 일반적으로 2 차 탐색 및 내용의 표시 논리를 처리해야합니다. 중첩 라우팅을 사용하면 이러한 우려를 구분할 수 있습니다.

명명 된 뷰는 ui-router의 또 다른 추가 기능입니다. ngRoute를 사용하면 페이지에 하나의 ngView 지시문 만있을 수 있지만 ui-router의 명명 된 뷰에서는 여러 개의 ui-view 지시문을 지정할 수 있으며 각 상태는 이름 뷰의 템플리트와 제어기에 영향을 미칠 수 있습니다. 이것의 아주 간단한 예제는 앱의 기본 콘텐츠를 기본보기로하고 별도의 UI 뷰인 바닥 글 막대를 추가하는 것입니다. 이 시나리오에서 바닥 글의 컨트롤러는 더 이상 상태 / 경로 변경을 수신 할 필요가 없습니다.

이 팟 캐스트 에피소드에서 ngRoute와 ui-router를 잘 비교할 수 있습니다.

상황을 좀 더 혼란스럽게 만들기 위해 Angular 팀이 Angular 버전 1.5 및 2.0 용으로 출시 할 예정인 새로운 "공식"라우팅 모듈을 계속 주시하십시오. 이것은 ngRoute 모듈을 대체 할 것입니다. Here 에 새로운 라우터 모듈에 대한 현재 문서가 있습니다. 구현이 아직 완료되지 않았기 때문에이 게시에는 상당히 희박합니다. 이 모듈이 실제로 공개 될시기에 대한 더 많은 뉴스를 보려면 here 를보십시오.


ngRoute는 모든 경로에 대해 하나의보기와 컨트롤러 만 지정할 수있는 기본 라우팅 라이브러리입니다.

ui-router를 사용하면 병렬 및 중첩 된 여러보기를 지정할 수 있습니다. 따라서 애플리케이션이 복잡한 라우팅 / 뷰를 필요로하거나 필요로 할 수 있다면 ui-router로 진행하십시오.

http://www.ng-newsletter.com/posts/angular-ui-router.html AngularUI Router를 시작하기에 가장 좋은 안내서입니다.


ui 라우터는 당신의 인생을 더 쉽게 만듭니다! AngularJS 응용 프로그램에 응용 프로그램에 삽입하여 응용 프로그램에 추가 할 수 있습니다 ...

ng-route 는 핵심 AngularJS의 일부로 제공되므로 더 간단하고 더 적은 옵션을 제공합니다 ...

ng-route를 더 잘 이해하려면 여기를 https://docs.angularjs.org/api/ngRoute . https://docs.angularjs.org/api/ngRoute

또한 사용할 때 ngView ..를 사용하는 것을 잊지 마십시오.

ng-ui-router는 다르지만 다음과 같습니다.

ui-router 하지만 더 많은 옵션을 제공합니다 ....


당신이 알아야 할 기본적인 것 : ng-router는 $location.path() 하고 ui-router는 $state.go 사용합니다

모든 기능을 놓으십시오.


ui-router 는 타사 모듈이며 매우 강력합니다. 일반 ngRoute이 할 수있는 모든 기능과 많은 추가 기능을 지원합니다.

다음은 ngRoute에서 ui-router가 선택되는 몇 가지 일반적인 이유입니다.

  • ui-router는 중첩 된 뷰여러 개의 명명 된 뷰를 허용합니다. 이것은 다른 섹션에서 상속받은 페이지가있는 더 큰 앱에서 매우 유용합니다.

  • ui-router를 사용하면 상태 이름을 기반으로 상태간에 강력한 유형의 연결을 가질 수 있습니다. 한 곳에서 url을 변경하면 ui-sref 링크를 구축 할 때 해당 주에 대한 모든 링크가 업데이트됩니다. URL이 변경 될 수있는 대규모 프로젝트에 매우 유용합니다.

  • 또한 액세스하려는 URL을 기반으로 경로를 동적으로 생성 할 수 있도록 decorator 개념이 있습니다. 이것은 당신이 전에 모든 경로를 지정할 필요가 없음을 의미 할 수 있습니다.

  • states 사용하면 서로 다른 상태에 대한 서로 다른 정보를 매핑하고 액세스 할 수 있으며 $stateParams 를 통해 상태간에 쉽게 정보를 전달할 수 있습니다.

  • $state 를 설정하여 노출 할 수있는 ui-router가 제공하는 $state 를 통해 템플릿 내 UI 요소 (현재 상태의 탐색 강조 표시)를 조정할 수있는 상태 또는 부모의 상태를 쉽게 확인할 수 있습니다. run .

본질적으로, ui-router는 더 많은 기능을 갖춘 ngRouter입니다. 이러한 추가 기능은 대규모 응용 프로그램에 매우 유용합니다.

추가 정보 :


ngRoute 는 AngularJS 팀에서 개발 한 모듈로 AngularJS 코어의 초기 부분이었습니다.

ui-router 는 라우팅 기능을 개선하고 향상시키기 위해 AngularJS 프로젝트 외부에서 만들어진 프레임 워크입니다.

ui-router ui-router :

AngularUI Router는 AngularJS를위한 라우팅 프레임 워크입니다.이 인터페이스를 사용하면 인터페이스의 일부를 상태 시스템으로 구성 할 수 있습니다. URL 경로를 중심으로 구성된 Angular 코어의 $ route 서비스와 달리 UI-Router는 상태를 중심으로 구성되며 선택적으로 경로와 기타 동작을 첨부 할 수 있습니다.

상태는 명명 된, 중첩 된 및 병렬 뷰에 바인딩되므로 응용 프로그램의 인터페이스를 강력하게 관리 할 수 ​​있습니다.

둘 다 더 나을 것이 아니라 프로젝트에 가장 적합한 것을 선택해야합니다.

그러나 애플리케이션에서 복잡한 뷰를 가질 계획이라면 "$ state"개념을 다루고 싶을 것입니다. ui-router를 선택하는 것이 좋습니다.





angularjs-module