javascript ui-router教學 - angular-route和angular-ui-router有什麼區別?




angularjs title (13)

我正計劃在我的大型應用程序中使用AngularJS。 所以我正在找出正確的模塊來使用。

ngRoute(angular-route.js)ui-router(angular-ui-router.js)模塊有什麼區別

在使用ngRoute的許多文章中,路由配置為$ routeProvider 。 但是,使用ui-router時 ,路由配置為$ stateProvider和$ urlRouterProvider

我應該使用哪個模塊以獲得更好的可管理性和可擴展性?


Answers

ngRoute是一個基本的路由庫,您可以為任何路由指定一個視圖和控制器。

使用ui路由器,您可以指定多個視圖,包括並行和嵌套。 因此,如果您的應用程序需要(或將來可能需要)任何類型的複雜路由/視圖,請繼續使用ui-router。

http://www.ng-newsletter.com/posts/angular-ui-router.html是AngularUI路由器最好的入門指南。


ngRoute是由Angular團隊構建的模塊,提供基本的客戶端路由功能。 這個模塊為路由提供了一個相當強大的基礎,並且可以很容易地構建,以提供可靠的路由功能,如本博客文章所示 (請務必閱讀Ward Bell和Ben Nadel之間的評論,作者 - 他們是幾個角利)

ui-router將焦點從以URL為中心的路線轉移到應用程序“狀態”,這可能會或可能不會反映在url中。

ui-router添加的主要功能是嵌套狀態和命名視圖。

嵌套狀態允許您為應用程序的各個部分分離控制器邏輯。 一個非常簡單的例子就是一個應用程序,其頂部為主導航,左側為輔助導航列表,右側為內容。 沒有嵌套狀態,單個控制器通常必須處理輔助導航的顯示邏輯以及內容。 嵌套路由允許您分離這些問題。

命名的視圖是UI路由器的另一個附加功能。 使用ngRoute,您只能在頁面上使用單個ngView指令,而在ui-router中使用命名視圖可以指定多個ui-view指令,然後每個狀態都能夠影響名稱視圖的模板和控制器。 一個非常簡單的例子就是將應用程序的主要內容作為主視圖,然後再創建一個可以作為單獨UI視圖的頁腳欄。 在這種情況下,頁腳的控制器不再需要偵聽狀態/路由更改。

這個podcast插曲中可以找到ngRoute和ui-router的比較。

為了讓事情更加令人困惑,請關注Angular團隊預計將為Angular 1.5和2.0版發布的新“官方”路由模塊。 這將取代ngRoute模塊。 Here是新的路由器模塊的當前文檔 - 由於實現尚未最終確定,因此在本文中相當稀少。 here觀看關於這個模塊何時會被發布的更多消息。


ng-View (由AngularJS團隊開發)每頁只能使用一次,而ui-View (第三方模塊)可以每頁多次使用。

ui-View因此是最佳選擇。


ui路由器讓您的生活更輕鬆! 您可以通過將AngularJS應用程序注入您的應用程序中來將它添加到您的...

ng-route是AngularJS核心的一部分,因此它更簡單,並為您提供更少的選擇......

看看這裡來更好地理解ng-route: https://docs.angularjs.org/api/ngRoutehttps://docs.angularjs.org/api/ngRoute

另外當使用它時,不要忘記使用:ngView ..

ng-ui-router是不同的,但是:

ui-router但給你更多的選擇....


基本的東西你必須知道:ng-router使用$location.path()和ui-router使用$state.go

休息我們的所有功能。


通常ui-router工作在一個狀態機制上......可以通過一個簡單的例子來理解:

比方說,我們有一個音樂庫的大型應用程序(如..gaana或saavan或其他)。 在頁面的底部,你有一個音樂播放器可以在頁面的所有狀態中共享。

現在讓我們假設你只需點擊一些歌曲即可播放。 在這種情況下,只有該音樂播放器狀態應該改變,而不是重新加載整個頁面。 這可以通過ui-router輕鬆處理。

在ngRoute中我們只是附加視圖和控制器。


AngularUI Router是AngularJS的一個路由框架,它允許你將界面的各個部分組織成一個狀態機。 與圍繞URL路由組織的Angular ngRoute模塊中的$ route服務不同,UI-Router是圍繞各個狀態組織的,這些狀態可以選擇附加路由以及其他行為。

ui-router


ngRoute是由AngularJS團隊開發的一個模塊,AngularJS團隊是AngularJS核心的早期部分。

ui-router是一個在AngularJS項目之外製作的框架,用於改進和增強路由功能。

從ui-router ui-router

AngularUI Router是AngularJS的一個路由框架,它允許你將界面的各個部分組織成一個狀態機。 與圍繞URL路由組織的Angular核心中的$ route服務不同,UI-Router是圍繞各個狀態組織的,這些狀態可以選擇附加路由以及其他行為。

各國必須使用命名,嵌套和並行視圖,使您能夠有效地管理應用程序的界面。

他們都不是更好,你將不得不選擇最適合你的項目。

但是,如果您計劃在應用程序中擁有復雜的視圖,並且想要處理“$狀態”概念。 我建議你選擇ui-router。




如果你想使用在ngRoute範例中實現的嵌套視圖功能,試試angular-route-segment.com - 它旨在擴展ngRoute而不是替換它。


ui-router是第三方模塊,功能非常強大。 它支持ngRoute的正常功能以及許多額外的功能。

這裡有一些常見的原因ui路由器選擇ngRoute:

  • ui-router允許嵌套視圖多個命名視圖 。 這對於較大的應用程序非常有用,您可能會從其他部分繼承頁面。

  • ui-router允許您根據狀態名稱在狀態之間進行強類型鏈接。 當您使用ui-sref創建鏈接時,在一個地方更改網址會更新每個到該狀態的鏈接。 對於URL可能更改的大型項目非常有用。

  • 還有decorator的概念可用於允許您的路由根據嘗試訪問的URL動態創建。 這可能意味著您不需要事先指定所有路線。

  • states允許您映射和訪問有關不同狀態的不同信息,並且您可以通過$stateParams輕鬆地在狀態之間傳遞信息。

  • 您可以輕鬆地確定您是否處於狀態或父母狀態,以通過ui-router提供的$state調整UI模板(突出顯示當前狀態的導航),您可以通過在$rootScope設置run

從本質上講,ui-router是具有更多功能的ngRouter,在它們之下它是完全不同的。 這些附加功能對於大型應用程序非常有用。

更多信息:


http://ng-learn.org/2013/11/Bower-vs-npm/找到這個有用的解釋

一方面,npm被創建用於安裝node.js環境中使用的模塊,或者使用node.js(例如Karma,lint,minifiers等)構建的開發工具。 npm可以在項目中本地安裝模塊(默認情況下在node_modules中)或全局安裝,以供多個項目使用。 在大型項目中,指定依賴項的方式是創建一個名為package.json的文件,其中包含一系列依賴項。 當您運行npm install時,該列表會被npm識別,然後它會為您下載並安裝它們。

另一方面,為了管理您的前端依賴性而創建了bower。 像jQuery,AngularJS,下劃線等庫。與npm類似,它有一個文件,您可以在其中指定一個名為bower.json的依賴項列表。 在這種情況下,您的前端依賴項通過運行bower安裝來安裝,bower安裝默認將它們安裝在名為bower_components的文件夾中。

正如你所看到的,雖然他們執行類似的任務,但他們的目標是一組非常不同的庫。







javascript angularjs angularjs-routing angular-ui-router angularjs-module