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

1091
Premchandra Singh 2014-01-10 05:03.

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)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?

15 answers

1117
TheSharpieOne 2014-01-10 05:24.

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 nhaunhiề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:

136
gab 2014-01-10 05:30.

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.

73
Asik 2014-12-19 03:05.

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/

52
Jake Johnson 2014-01-10 05:28.

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

35
artch 2014-04-08 09:24.

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ó.

19
UniCoder 2016-01-03 12:36.

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.

18
Mahesh K 2016-08-31 02:12.

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

13
Sean 2015-06-27 17:58.

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.

11
Kunal Kapadia 2014-08-29 00:06.

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.

10
digish a d 2016-10-30 14:18.

Đ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.

8
Alireza 2015-10-17 03:34.

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 ....

6
vaheeds 2016-02-08 19:16.

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

4
Rajat-Systematix 2017-03-08 23:51.

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.

3
Noname 2017-01-19 23:32.

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.

0
Ragupathy 2017-08-17 02:12.

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.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language