programing

앵귤러 루트와 앵귤러 라우터의 차이점은 무엇입니까?

sourcejob 2022. 9. 27. 23:49
반응형

앵귤러 루트와 앵귤러 라우터의 차이점은 무엇입니까?

Angular를 사용할 예정입니다.JS를 사용하고 있습니다.그래서 저는 사용할 수 있는 모듈을 찾고 있습니다.

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

많은 기사에서는 ngRoute를 사용할 때 루트는 $routeProvider로 설정됩니다.단, ui-router와 함께 사용할 경우 루트는 $stateProvider 및 $urlRouterProvider로 설정됩니다.

관리성과 확장성을 향상시키려면 어떤 모듈을 사용해야 합니까?

ui-party는 서드파티제 모듈로 매우 강력합니다.일반 ngRoute가 수행할 수 있는 모든 기능과 많은 추가 기능을 지원합니다.

다음은 ui-route가 ngRoute보다 선택되는 일반적인 이유입니다.

  • ui-module을 사용하면 중첩보기와 여러 개의 명명된 보기를 사용할 수 있습니다.이것은 다른 섹션에서 상속된 페이지가 있는 큰 앱에서 매우 유용합니다.

  • ui-module을 사용하면 상태 이름을 기반으로 상태 간에 강력한 유형의 링크를 설정할 수 있습니다.한 곳에서 URL을 변경하면 와의 링크를 빌드할 때 모든 링크가 해당 상태로 업데이트됩니다.URL이 변경될 수 있는 대규모 프로젝트에 매우 유용합니다.

  • 접근을 시도하는 URL을 기반으로 루트를 동적으로 작성할 수 있도록 하기 위해 사용할 수 있는 데코레이터 개념도 있습니다.이는 사전에 모든 루트를 지정할 필요가 없음을 의미합니다.

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

  • 템플릿 내의 UI 요소를 조정할 수 있는 상태인지 부모 상태인지를 쉽게 판별할 수 있습니다(현재 상태의 탐색을 강조 표시). UI 라우터는 UI 요소를 설정함으로써 표시할 수 있습니다.$rootScoperun.

본질적으로 ui-router는 더 많은 기능을 가진 ngRouter로 시트 아래에서는 상당히 다릅니다.이러한 추가 기능은 대규모 애플리케이션에 매우 유용합니다.

상세 정보:

ngRoute는 Angular에 의해 개발된 모듈입니다.Angular의 초기 부분이었던 JS 팀은JS 코어

ui-router는 Angular 외부에서 만들어진 프레임워크입니다.JS는 라우팅 기능을 개선하고 강화하는 프로젝트입니다.

UI 라우터의 메뉴얼에서는, 다음과 같이 설명합니다.

AngularUI Router는 AngularJS의 라우팅 프레임워크입니다.이것에 의해, 인터페이스의 일부를 스테이트 머신으로 정리할 수 있습니다.URL 루트를 중심으로 구성된 Angular core의 $route 서비스와는 달리 UI-Router는 상태 중심으로 구성되며 선택적으로 루트와 다른 동작이 연결될 수 있습니다.

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

둘 다 더 낫지 않습니다. 프로젝트에 가장 적합한 것을 선택해야 합니다.

그러나 애플리케이션을 복잡한 뷰로 표시할 계획이며 "$state" 개념을 다루고 싶은 경우에는 다음과 같습니다.ui-router를 선택하는 것을 추천합니다.

ngRoute는 기본적인 시나리오에 적합한 각도 코어 모듈입니다.앞으로 출시될 제품에는 더 강력한 기능이 추가될 것으로 생각합니다.

URL : https://docs.angularjs.org/api/ngRoute

Ui-router는 ngRoute의 문제를 극복한 기여 모듈입니다.주로 중첩/복합 뷰입니다.

URL : https://github.com/angular-ui/ui-router

ui-route와 ngRoute의 차이점

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

여기에 이미지 설명 입력

ngRoute는 코어 Angular의 일부입니다.JS 프레임워크

ui-module은 기본 라우팅 기능을 개선하기 위해 작성된 커뮤니티 라이브러리입니다.

다음은 UI 라우터의 설정/설정에 관한 좋은 문서입니다.

http://www.ng-newsletter.com/posts/angular-ui-router.html

ngRoute 패러다임 내에서 구현된 중첩된 뷰 기능을 사용하려면 angular-route-segment를 사용해 보십시오.이 기능은 ngRoute를 대체하는 것이 아니라 확장을 목적으로 합니다.

일반적으로 UI 라우터는 상태 메커니즘에서 작동합니다.이것은 간단한 예시로 이해할 수 있습니다.

예를 들어 음악 라이브러리(..gaana, saavan 등)의 큰 어플리케이션이 있다고 합시다.페이지 하부에 음악 플레이어가 있습니다.이 플레이어는 페이지의 모든 상태에서 공유됩니다.

이제 재생할 노래를 클릭한다고 가정해 보겠습니다.이 경우 페이지 전체를 새로고침하지 않고 해당 음악 플레이어 상태만 변경해야 합니다.그것은 ui-router로 간단하게 처리할 수 있습니다.

ngRoute에서는 뷰와 컨트롤러를 접속하기만 하면 됩니다.

각도 1.x

ng-route:

ng-route는 라우팅용으로 angularJS 팀에 의해 개발됩니다.

ng-route : URL(Location) 기반 라우팅.

예:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

ui-route:

서드파티 모듈에 의해 ui-module이 개발되었습니다.

ui-based : 스테이트베이스 라우팅

예:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

--> ui-displays는 네스트된 뷰를 허용합니다.

--> ng-route보다 강력한 ui-route

ng-module, UI-module

ngRoute는 기본적인 클라이언트 측 라우팅 기능을 제공하는 Angular 팀에 의해 구축된 모듈입니다.이 모듈은 매우 강력한 라우팅 기반을 제공하며, 이 블로그 투고에서 예시된 바와 같이 견고한 라우팅 기능을 제공하기 위해 매우 쉽게 구축될 수 있습니다(Ward Bell과 저자인 Ben Nadel 사이의 코멘트 트레일을 읽어보십시오.그들은 Angular 전문가입니다).

ui-timeouts는 URL 중심 경로에서 응용 프로그램 "상태"로 포커스를 이동합니다.이 상태는 URL에 반영되거나 반영되지 않을 수 있습니다.

UI 라우터에 의해 추가된 주요 기능은 중첩된 상태와 명명된 보기입니다.

중첩된 상태를 사용하면 응용 프로그램의 다양한 조각에 대한 컨트롤러 로직을 분리할 수 있습니다.가장 간단한 예로는 위쪽에 기본 네비게이션이 있고 왼쪽에 보조 네비게이션 목록이 있고 오른쪽에 콘텐츠가 있는 앱이 있습니다.중첩된 상태가 없으면 일반적으로 단일 컨트롤러가 세컨더리 내비게이션의 디스플레이 로직과 콘텐츠를 처리해야 합니다.네스트된 루팅을 사용하면 이러한 문제를 분리할 수 있습니다.

명명된 보기는 UI 라우터의 또 다른 추가 기능입니다.ngRoute를 사용하면 페이지에 ngView 디렉티브를 1개만 지정할 수 있습니다.ui-router의 이름 있는 뷰에서는 여러 개의 UI 뷰 디렉티브를 지정할 수 있습니다.그 후 각 상태는 이름 뷰의 템플릿과 컨트롤러에 영향을 줍니다.예를 들어 앱의 주요 콘텐츠를 프라이머리 뷰로 하고 별도의 UI 뷰가 되는 바닥글 바를 설치하는 것이 매우 간단한 예입니다.이 시나리오에서는 바닥글의 컨트롤러가 더 이상 상태/경로 변경을 수신할 필요가 없습니다.

ngRoute와 ui-router의 적절한 비교는 팟캐스트 에피소드에서 확인할 수 있습니다.

상황을 좀 더 혼란스럽게 하기 위해 Angular 팀이 Angular 버전 1.5 및 2.0용으로 출시할 예정인 새로운 "공식" 라우팅 모듈에 주목하십시오.이로 인해 ngRoute 모듈이 교체됩니다.다음은 새로운 라우터 모듈의 최신 매뉴얼입니다.실장이 아직 완료되지 않았기 때문에 이 게시물에서는 매우 희박합니다.이 모듈의 실제 출시 시기에 대한 자세한 내용은 여기를 참조하십시오.

ngRoute는 기본 라우팅 라이브러리입니다.여기서 임의의 루트에 대해 1개의 뷰와 컨트롤러만 지정할 수 있습니다.

UI 라우터를 사용하면 병렬 및 중첩된 여러 뷰를 지정할 수 있습니다.따라서 애플리케이션에서 복잡한 라우팅/뷰가 필요한 경우(또는 향후 필요할 수 있음) ui-router로 진행합니다.

이 가이드는 Angular를 위한 시작 가이드입니다.UI 라우터

기본적으로 알아야 할 사항: ng-router는$location.path()및 ui-module 사용$state.go

모든 기능을 정지시켜 주세요.

ui 라우터를 사용하면 생활이 쉬워집니다!Angular를 추가할 수 있습니다.JS 어플리케이션을 어플리케이션에 삽입하여...

ng-route핵심 AngularJS의 일부로 제공되므로 더 심플하고 선택지가 적습니다.

ng-route에 대한 자세한 내용은 여기를 참조하십시오.https://docs.angularjs.org/api/ngRoute

또, 사용할 때는, ngView 를 사용하는 것을 잊지 말아 주세요.

ng-ui-module은 다르지만:

https://github.com/angular-ui/ui-router을 이용하실 수 있습니다.

AngularUI Router는 AngularJS의 라우팅 프레임워크입니다.이것에 의해, 인터페이스의 일부를 스테이트 머신으로 정리할 수 있습니다.URL 루트를 중심으로 구성되는 Angular ngRoute 모듈의 $route 서비스와는 달리 UI-Router는 스테이트를 중심으로 구성되어 있습니다.또, 옵션으로 루트와 그 외의 동작이 부가되어 있는 경우도 있습니다.

https://github.com/angular-ui/ui-router

ngRoute는 Angular.js 팀에 의해 개발된 모듈로 Angular 코어의 초기 일부입니다.

ui-router는 라우팅 기능을 개선하고 강화하기 위해 Angular.js 프로젝트 외부에서 작성된 프레임워크입니다.

1-ngRoute는 angular team에 의해 개발된 반면, ui-router는 서드파티 모듈입니다.2-ngRoute는 루트 URL을 기반으로 루팅을 구현합니다.ui-router는 ng-route가 제공하는 모든 추가 기능과 함께 ng-route가 제공하는 네스트된 상태 및 여러 개의 이름 있는 뷰도 제공합니다.

ng-View (Angular)에됨)은 만 사용할 수 , JS팀)은 1페이지에 1회만 할 수 .ui-View(서드파티 모듈)은 1페이지당 여러 번 사용할 수 있습니다.

ui-View따라서 최선의 선택입니다.

언급URL : https://stackoverflow.com/questions/21023763/what-is-the-difference-between-angular-route-and-angular-ui-router

반응형