[javascript] $ routeProvider와 $ stateProvider의 차이점은 무엇입니까?

Program / 글쓴이

사이의 차이를 설명해주십시오 $routeProvider과 $stateProviderAngularJS와에.

가장 좋은 방법은 무엇입니까?

답변

SPA (Single Page Application)에서 라우팅 목적으로 사용되는 것과 동일한 작업을 수행합니다.

1. 각도 라우팅- $ routeProvider 문서 당

컨트롤러 및보기에 대한 URL (HTML 부분). $ location.url ()을 감시하고 경로를 기존 경로 정의에 매핑하려고 시도합니다.

HTML 

<div ng-view></div>

위의 태그는 각도의 (구성 단계) $routeProvider.when()에서 언급 한 조건 에서 템플릿을 렌더링합니다..config

한계 :-

  • 페이지는 단일 ng-view페이지 만 포함 할 수 있습니다
  • SPA가 페이지에 일부 조건에 따라 렌더링하려는 여러 개의 작은 구성 요소가있는 경우 $routeProvider실패합니다. (그것을 달성하기 위해, 우리는 같은 지시를 사용할 필요가 ng-include, ng-switch, ng-if, ng-showSPA에서 그들을 가지고, 나쁜 보이는)
  • 부모와 자식 관계와 같은 두 경로 사이에는 관련이 없습니다.
  • URL 패턴을 기반으로 뷰의 일부를 표시하거나 숨길 수 없습니다.

2. ui- router-$ stateProvider 문서 당

AngularUI 라우터는 인터페이스의 일부를 상태 머신으로 구성 할 수있는 AngularJS의 라우팅 프레임 워크입니다. UI- 라우터는 상태를 중심으로 구성되며, 다른 동작뿐만 아니라 경로가 선택적으로 포함될 수 있습니다.

다중 및 명명 된 뷰

또 다른 훌륭한 기능은 템플릿에 여러 ui-view를 가질 수 있다는 것입니다.

여러 개의 병렬 뷰는 강력한 기능이지만 views 를 중첩 하고 해당 뷰를 중첩 된 상태와 연결 하여 인터페이스를보다 효과적으로 관리 할 수 ​​있습니다 .

HTML 

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

ui-router의 힘 의 대부분은 중첩 된 상태 및보기를 관리 할 수 ​​있다는 것입니다.

찬성

  • ui-view한 페이지에 여러 개 를 가질 수 있습니다
  • 라우팅 단계에서 상태를 정의하여 다양한보기를 서로 중첩하고 유지할 수 있습니다.
  • 우리는 여기서 상태의 상속과 마찬가지로 자식 및 부모 관계를 가질 수 있으며 형제 상태를 정의 할 수도 있습니다.
  • 상태 이름과 함께 ui-view="some"절대 라우팅을 사용하여 상태를 변경할 수 있습니다 @.
  • 상대 라우팅을 수행 할 수있는 또 다른 방법은 @변경 에만 사용 하는 것 ui-view="some"입니다. ui-view중첩 여부를 확인 하는 대신 이를 대체합니다 .
  • 여기 에서 주에서 언급 한 내용을 기반으로 URL을 동적으로 ui-sref작성 하고 형식으로 상태 매개 변수를 제공 할 수 있습니다.hrefURLjson

자세한 정보 Angular ui-router

상태가 포함 된 다양한 중첩보기로 유연성을 높이려면 원하는 것을 선호합니다. ui-router

답변

URLs라우팅하는 동안 Angular의 자체 ng-Router가 고려되고 statesURL과 함께 UI-Router가 사용 됩니다.

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

ng-router에서는 <a href="">태그 를 통해 링크를 제공 할 때 URL에 대해 매우주의 해야합니다. UI- 라우터 state에서는 명심해야합니다. 와 같은 링크를 제공합니다 <a ui-sref="">. <a href="">ng-router에서와 마찬가지로 UI-Router에서 사용하더라도 여전히 작동합니다.

따라서 언젠가 URL을 변경하기로 결정하더라도 URL state은 동일하게 유지되며에서 URL 만 변경하면됩니다 .config.

ngRouter를 사용하여 간단한 앱을 만들 수 있지만 UI-Router를 사용하면 복잡한 앱을 훨씬 쉽게 개발할 수 있습니다. 여기 위키가 있습니다.

답변

$ route : URL을 컨트롤러 및보기 (HTML 부분)에 딥 링크하는 데 사용되며 기존 경로 정의에서 경로를 매핑하기 위해 $ location.url ()을 감시합니다.

ngRoute를 사용하면 경로는 $ routeProvider로 구성되고 ui-router를 사용하면 경로는 $ stateProvider 및 $ urlRouterProvider로 구성됩니다.

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });

답변