Sự khác biệt giữa $ routeProvider và $ stateProvider là gì?

Vui lòng giải thích sự khác biệt giữa $routeProvidervà $stateProvidertrong AngularJS.

Đó là thực hành tốt nhất?

Cả hai đều làm công việc tương tự như chúng được sử dụng cho mục đích định tuyến trong SPA (Ứng dụng trang đơn).

1. Định tuyến góc - mỗi tài liệu $ routeProvider

URL tới bộ điều khiển và chế độ xem (các phần HTML). Nó xem $ location.url () và cố gắng ánh xạ đường dẫn đến một định nghĩa tuyến đường hiện có.

HTML

<div ng-view></div>

Thẻ ở trên sẽ hiển thị mẫu từ $routeProvider.when()điều kiện mà bạn đã đề cập trong .config(giai đoạn cấu hình) của góc

Hạn chế: -

• Trang chỉ có thể chứa một ng-viewtrên trang
• Nếu SPA của bạn có nhiều thành phần nhỏ trên trang mà bạn muốn kết xuất dựa trên một số điều kiện, $routeProvidersẽ thất bại. (để đạt được điều đó, chúng ta cần phải sử dụng chỉ thị như ng-include, ng-switch, ng-if, ng-show, trông xấu để có chúng trong SPA)
• Bạn không thể liên quan giữa hai tuyến đường như mối quan hệ cha mẹ và con cái.
• Bạn không thể hiển thị và ẩn một phần của chế độ xem dựa trên mẫu url.

2. ui-router - mỗi tài liệu $ stateProvider

AngularUI Router là một khung định tuyến cho AngularJS, cho phép bạn sắp xếp các phần của giao diện vào một máy trạng thái. UI-Router được tổ chức xung quanh các trạng thái, có thể tùy chọn có các tuyến đường, cũng như các hành vi khác, được đính kèm.

Nhiều lượt xem và được đặt tên

Một tính năng tuyệt vời khác là khả năng có nhiều khung nhìn ui trong một mẫu.

Mặc dù nhiều chế độ xem song song là một tính năng mạnh mẽ, nhưng bạn thường có thể quản lý các giao diện của mình hiệu quả hơn bằng cách lồng nhau viewvà ghép các chế độ xem đó với các trạng thái lồng nhau.

HTML

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

Phần lớn ui-routersức mạnh của nó là nó có thể quản lý trạng thái & khung nhìn lồng nhau.

Ưu

• Bạn có thể có nhiều ui-viewtrên một trang
• Các khung nhìn khác nhau có thể được lồng vào nhau và được duy trì bằng cách xác định trạng thái trong pha định tuyến.
• Chúng ta có thể có mối quan hệ con cái và cha mẹ ở đây, đơn giản giống như thừa kế ở trạng thái, bạn cũng có thể xác định trạng thái anh chị em.
• Bạn có thể thay đổi ui-view="some"trạng thái chỉ bằng cách sử dụng định tuyến tuyệt đối bằng @tên trạng thái.
• Một cách khác bạn có thể thực hiện định tuyến tương đối là chỉ sử dụng @để thay đổi ui-view="some". Điều này sẽ thay thế thay ui-viewvì kiểm tra nếu nó được lồng hay không.
• Tại đây, bạn có thể sử dụng ui-srefđể tạo hrefURL động trên cơ sở URLđược đề cập ở trạng thái, bạn cũng có thể cung cấp thông số trạng thái ở jsonđịnh dạng.

Để biết thêm thông tin Bộ định tuyến góc

Để linh hoạt hơn với chế độ xem lồng nhau khác nhau với các trạng thái, tôi muốn bạn đi ui-router

Bộ định tuyến ng của riêng Angular sẽ URLsđược xem xét trong khi định tuyến, Bộ định tuyến UI statesngoài URL.

Các trạng thái bị ràng buộc với các khung nhìn được đặt tên, lồng nhau và song song, cho phép bạn quản lý mạnh mẽ giao diện của ứng dụng.

Trong khi ở ng-router, bạn phải rất cẩn thận về các URL khi cung cấp liên kết qua <a href="">thẻ, trong UI-Router bạn chỉ phải ghi statenhớ. Bạn cung cấp liên kết như thế nào <a ui-sref="">. Lưu ý rằng ngay cả khi bạn sử dụng <a href="">trong UI-Router, giống như bạn làm trong ng-router, nó vẫn sẽ hoạt động.

Vì vậy, ngay cả khi bạn quyết định thay đổi URL của mình một ngày nào đó, bạn statesẽ vẫn giữ nguyên và bạn chỉ cần thay đổi URL tại .config.

Mặc dù ngRouter có thể được sử dụng để tạo các ứng dụng đơn giản, UI-Router giúp phát triển dễ dàng hơn nhiều cho các ứng dụng phức tạp. Đây là wiki của nó .

$ route: Điều này được sử dụng cho các URL liên kết sâu tới các bộ điều khiển và chế độ xem (các phần HTML) và xem $ location.url () để ánh xạ đường dẫn từ định nghĩa tuyến đường hiện có.

Khi chúng tôi sử dụng ngRoute, tuyến đường được định cấu hình với $ routeProvider và khi chúng tôi sử dụng ui-router, tuyến đường được định cấu hình với $ stateProvider và $ 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'
        });