Sự khác biệt giữa angle-route và angle-ui-router là gì?

Tôi dự định sử dụng AngularJS trong các ứng dụng lớn của mình. Vì vậy, tôi đang trong quá trình tìm kiếm các mô-đun phù hợp để sử dụng.

Sự khác biệt giữa mô-đun ngRoute (angle-route.js) và ui-router (angle-ui-router.js) là gì?

Trong nhiều bài báo khi ngRoute được sử dụng, route được cấu hình với $ routeProvider . Tuy nhiên, khi được sử dụng với ui-router , tuyến đường được định cấu hình với $ stateProvider và $ urlRouterProvider .

Tôi nên sử dụng mô-đun nào để có khả năng quản lý và mở rộng tốt hơn?

ui-router là một mô-đun của bên thứ 3 và rất mạnh mẽ. Nó hỗ trợ mọi thứ mà ngRoute bình thường có thể làm cũng như nhiều chức năng bổ sung.

Dưới đây là một số lý do phổ biến khiến ui-router được chọn trên ngRoute:

• ui-router cho phép các khung nhìn lồng nhau và nhiều khung nhìn được đặt tên . Điều này rất hữu ích với ứng dụng lớn hơn, nơi bạn có thể có các trang kế thừa từ các phần khác.

• ui-router cho phép bạn có liên kết kiểu mạnh giữa các trạng thái dựa trên tên trạng thái. Thay đổi url ở một nơi sẽ cập nhật mọi liên kết đến trạng thái đó khi bạn tạo liên kết của mình với ui-sref. Rất hữu ích cho các dự án lớn hơn mà URL có thể thay đổi.

• Ngoài ra còn có khái niệm về trình trang trí có thể được sử dụng để cho phép các tuyến đường của bạn được tạo động dựa trên URL đang cố gắng được truy cập. Điều này có nghĩa là bạn sẽ không cần phải xác định trước tất cả các tuyến đường của mình.

• trạng thái cho phép bạn lập bản đồ và truy cập thông tin khác nhau về các trạng thái khác nhau và bạn có thể dễ dàng chuyển thông tin giữa các trạng thái qua $stateParams.

• Bạn có thể dễ dàng xác định xem bạn đang ở trong một trạng thái hoặc phụ huynh của nhà nước để điều chỉnh giao diện người dùng yếu tố (làm nổi bật sự chuyển hướng của nhà nước hiện hành) trong các mẫu của bạn thông qua $statecung cấp bởi ui-router mà bạn có thể phơi bày qua đặt nó ở $rootScopetrên run.

Về bản chất, ui-router là ngRouter với nhiều tính năng hơn, dưới các sheet thì nó khá khác biệt. Các tính năng bổ sung này rất hữu ích cho các ứng dụng lớn hơn.

Thêm thông tin:

• Github: https://github.com/angular-ui/ui-router
• Tài liệu:
  • Tham khảo API: http://angular-ui.github.io/ui-router/site/#/api
  • Hướng dẫn: https://github.com/angular-ui/ui-router/wiki
• Câu hỏi thường gặp: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• Ứng dụng Mẫu: http://angular-ui.github.io/ui-router/sample/#/

ngRoute là một mô-đun được phát triển bởi nhóm AngularJS, trước đó là một phần của lõi AngularJS.

ui-router là một khuôn khổ được thực hiện bên ngoài dự án AngularJS để cải thiện và nâng cao khả năng định tuyến.

Từ tài liệu ui-router :

AngularUI Router là một khung định tuyến cho AngularJS, cho phép bạn tổ chức các phần của giao diện thành một máy trạng thái. Không giống như dịch vụ $ route trong Angular core, được tổ chức xung quanh các tuyến URL, 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, cũng như các hành vi khác, được đính kèm.

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

Không có cái nào tốt hơn, bạn sẽ phải chọn cái thích hợp nhất cho dự án của mình.

Tuy nhiên, nếu bạn dự định có các dạng xem phức tạp trong ứng dụng của mình và bạn muốn đối phó với khái niệm "$ state". Tôi khuyên bạn nên chọn ui-router.

ngRoute là một mô-đun lõi góc cạnh rất tốt cho các kịch bản cơ bản. Tôi tin rằng họ sẽ bổ sung nhiều tính năng mạnh mẽ hơn trong các bản phát hành sắp tới.

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

Ui-router là một mô-đun góp phần khắc phục các sự cố của ngRoute. Chủ yếu là các khung nhìn lồng nhau / phức tạp.

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

Một số điểm khác biệt giữa ui-router và ngRoute

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

ngRoute là một phần của khung AngularJS cốt lõi.

ui-router là một thư viện cộng đồng đã được tạo ra để cố gắng cải thiện khả năng định tuyến mặc định.

Đây là một bài viết hay về cấu hình / thiết lập ui-router:

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

Nếu bạn muốn sử dụng chức năng dạng xem lồng nhau được triển khai trong mô hình ngRoute, hãy thử phân đoạn góc-tuyến - nó nhằm mục đích mở rộng ngRoute hơn là thay thế nó.

Nói chung ui-router hoạt động trên cơ chế trạng thái ... Có thể hiểu nó bằng một ví dụ dễ hiểu:

Giả sử chúng ta có một ứng dụng lớn của thư viện nhạc (như ..gaana hoặc saavan hoặc bất kỳ ứng dụng nào khác). Và ở cuối trang, bạn có một trình phát nhạc được chia sẻ trên tất cả các trạng thái của trang.

Bây giờ giả sử bạn chỉ cần nhấp vào một số bài hát để chơi. Trong trường hợp này, chỉ trạng thái trình phát nhạc đó sẽ thay đổi thay vì tải lại toàn bộ trang. Điều đó có thể được xử lý dễ dàng bởi ui-router.

Trong khi ở trong ngRoute, chúng tôi chỉ gắn khung nhìn và bộ điều khiển.

Góc 1.x

ng-route :

ng-route được phát triển bởi angleJS Team để định tuyến.

ng-route: định tuyến dựa trên url (Location).

Ví dụ:

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

ui-route :

ui-router được develoepd bởi mô-đun của bên thứ ba.

ui-router: định tuyến dựa trên trạng thái

Ví dụ:

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

-> ui-router cho phép các chế độ xem lồng nhau

-> ui-router mạnh hơn ng-route

ng-router , ui-router

ngRoute là một mô-đun do nhóm Angular xây dựng, cung cấp chức năng định tuyến phía máy khách cơ bản. Mô-đun này cung cấp một cơ sở khá mạnh mẽ để định tuyến và có thể được xây dựng dựa trên khá dễ dàng để cung cấp chức năng định tuyến vững chắc, như được minh họa trong bài đăng blog này (hãy nhớ đọc đoạn bình luận giữa tác giả Ward Bell và Ben Nadel - họ là một một số ưu điểm của Angular)

ui-router chuyển trọng tâm từ các tuyến tập trung vào url sang các "trạng thái" của ứng dụng, có thể có hoặc không được phản ánh trong url.

Các tính năng chính được thêm vào bởi ui-router là các trạng thái lồng nhau và các khung nhìn được đặt tên.

Các trạng thái lồng nhau cho phép bạn tách logic bộ điều khiển cho các phần khác nhau của ứng dụng. Một ví dụ rất đơn giản về điều này sẽ là một ứng dụng có điều hướng chính ở trên cùng, danh sách điều hướng phụ ở bên trái và nội dung ở bên phải. Nếu không có các trạng thái lồng nhau, một bộ điều khiển đơn lẻ thường phải xử lý logic hiển thị cho điều hướng phụ cũng như nội dung. Định tuyến lồng nhau cho phép bạn tách biệt những mối quan tâm này.

Chế độ xem được đặt tên là một tính năng bổ sung khác của ui-router. Với ngRoute, bạn chỉ có thể có một chỉ thị ngView duy nhất trên một trang, trong khi với các chế độ xem được đặt tên trong ui-router, bạn có thể chỉ định nhiều lệnh ui-view và sau đó mỗi trạng thái có thể ảnh hưởng đến khuôn mẫu và bộ điều khiển của các chế độ xem tên. Một ví dụ siêu đơn giản về điều này là có nội dung chính của ứng dụng của bạn là chế độ xem chính và sau đó cũng có thanh chân trang sẽ là chế độ xem ui riêng biệt. Trong trường hợp này, bộ điều khiển của footer không còn phải lắng nghe các thay đổi trạng thái / tuyến đường.

Bạn có thể tìm thấy một so sánh tốt giữa ngRoute và ui-router trên tập podcast này.

Chỉ để làm cho mọi thứ trở nên khó hiểu hơn, hãy theo dõi mô-đun định tuyến "chính thức" mà nhóm Angular đang mong đợi để phát hành cho các phiên bản 1.5 và 2.0 của Angular. Điều này sẽ thay thế mô-đun ngRoute. Đây là tài liệu hiện tại cho mô-đun Bộ định tuyến mới - nó khá thưa thớt kể từ bài đăng này vì quá trình triển khai vẫn chưa được hoàn thiện. Xem tại đây để biết thêm tin tức về thời điểm mô-đun này thực sự sẽ được phát hành.

ngRoute là một thư viện định tuyến cơ bản, nơi bạn có thể chỉ định một dạng xem và bộ điều khiển cho bất kỳ tuyến nào.

Với ui-router, bạn có thể chỉ định nhiều chế độ xem, cả song song và lồng nhau. Vì vậy, nếu ứng dụng của bạn yêu cầu (hoặc có thể yêu cầu trong tương lai) bất kỳ loại định tuyến / chế độ xem phức tạp nào, thì hãy tiếp tục với ui-router.

Đây là hướng dẫn bắt đầu tốt nhất cho AngularUI Router.

Điều cơ bản bạn phải biết: cách sử dụng ng-router $location.path()và cách sử dụng ui-router$state.go

Phần còn lại của chúng tôi tất cả các tính năng.

ui router giúp cuộc sống của bạn dễ dàng hơn! Bạn có thể thêm nó vào ứng dụng AngularJS thông qua việc đưa nó vào các ứng dụng của bạn ...

ng-route là một phần của AngularJS cốt lõi, vì vậy nó đơn giản hơn và cung cấp cho bạn ít tùy chọn hơn ...

Xem tại đây để hiểu rõ hơn về ng-route: https://docs.angularjs.org/api/ngRoute

Ngoài ra khi sử dụng đừng quên sử dụng: ngView ..

ng-ui-router thì khác nhưng:

https://github.com/angular-ui/ui-router nhưng cung cấp cho bạn nhiều lựa chọn hơn ....

AngularUI Router là một khung định tuyến cho AngularJS, cho phép bạn tổ chức các phần của giao diện thành một máy trạng thái. Không giống như dịch vụ $ route trong mô-đun Angular ngRoute, được tổ chức xung quanh các tuyến URL, 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, cũng như các hành vi khác, được đính kèm.

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

ngRoute là một mô-đun được phát triển bởi nhóm Angular.js, trước đó là một phần của lõi Angular.

ui-router là một khuôn khổ được thực hiện bên ngoài dự án Angular.js để cải thiện và nâng cao khả năng định tuyến.

1- ngRoute được phát triển bởi đội ngũ góc trong khi ui-router là một mô-đun của bên thứ ba. 2- ngRoute thực hiện định tuyến dựa trên URL định tuyến trong khi ui-router thực hiện định tuyến dựa trên trạng thái của ứng dụng. 3- ui-router cung cấp mọi thứ mà ng-route cung cấp cộng với một số tính năng bổ sung như trạng thái lồng nhau và nhiều khung nhìn được đặt tên.

ng-View(do nhóm AngularJS phát triển) chỉ có thể được sử dụng một lần trên mỗi trang, trong khi ui-View(mô-đun của bên thứ 3) có thể được sử dụng nhiều lần trên mỗi trang.

ui-View do đó là lựa chọn tốt nhất.