【知識點】為什么推薦用ui-router替代ngRoute

Shonim 發(fā)布于2019-08-26 11:29 / 2015人閱讀

摘要：被認為是為開發(fā)者提供的最實用的一個模塊。與集成的服務不同的是，可以將視圖嵌套，因為它基于的是操作狀態(tài)而僅非。與傳統(tǒng)做法使用不同的是，在里需要使用服務。當在中處理路由和狀態(tài)時，開發(fā)者的重心是當前的狀態(tài)是什么以及在哪一個頁面里。

初學angularjs，第一個實例是官網的phoneCat，里面路由用的是ngRoute，后來看到別的用ui-router，覺得好奇，ui-route是什么呢？百度一些，得到如下解釋：

ui-router 的工作原理非常類似于 Angular 的路由控制器，但它只關注狀態(tài)。
ui-router是一個web客戶端的路由解決方案，它最大的作用是將web界面的設計分塊了
UI-Router被認為是AngularUI為開發(fā)者提供的最實用的一個模塊，它是一個讓開發(fā)者能夠根據(jù)URL狀態(tài)或者說是"機器狀態(tài)"來組織和控制界面UI的渲染，而不是僅僅只改變路由（傳統(tǒng)AngularJS應用實用的方式）

看了以上解釋后，懂了嗎？我是沒動，但好像很牛掰的樣子，繼續(xù)研究，終于看到說不同的地方了：

AngularUI Router是AngularUI 團隊開發(fā)的一個AngularJS路由模塊，相比AngularJS的標準路由ngRoute，它更靈活，基于state而不是URL在一個頁面中加載多個View并保持View的層次，Nested States & Views以及Multiple & Named Views。UI-Router被認為是AngularUI為開發(fā)者提供的最實用的一個模塊。

與集成的ngRoute服務不同的是，UI-Router可以將視圖嵌套，因為它基于的是操作狀態(tài)而僅非URL。與傳統(tǒng)做法使用ng-view不同的是，在ngRoute里需要使用ui-view服務。當在ui-router中處理路由和狀態(tài)時，開發(fā)者的重心是當前的狀態(tài)是什么以及在哪一個頁面里。

上面說集成的ngRoute服務不同，實際上在我當前用的版本中已經把ngRoute模塊獨立出來了；

1、UI-Router支持嵌套視圖，ngRoute不支持

使用ngRoute時，在主頁面添加標簽，會把視圖渲染好自動加載到此標簽，而如果想在視圖里面再加一個，用別的子視圖渲染好來填充視圖里面種的標簽，這是不支持的（這話說得很繞，就是不支持視圖里面嵌套視圖）；而UI-Router支持這個特性，ui-router使用ui-view標簽，可以層層嵌套視圖。

2、UI-Router支持多視圖，ngRoute不支持

ngRoute的頁面只能添加一個標簽，及時添加多個，都是填充同樣的內容；
UI-Router可以通過為ui-view命名的方式支持多個視圖，如:

這里有對的詳細分析：ui.router源碼解析

最后，還是要根據(jù)自己的需求來：是否需要用到這些特性？ngRoute是否能夠滿足你的要求？如果ngRoute夠用了，還是使用ngRoute吧，雖然UI-Router不會增加使用難度，但是UI-Router壓縮后還有30kb，而ngRoute壓縮后只有5kb！

GPU云服務器云服務器阿里云服務器推薦碼有什么用有什么技術可以替代webrtc 替代cdn的技術是什么 ngRoute

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/107014.html

AngularJs功能（九）--路由

摘要：該內的內容會根據(jù)路由的變化而變化。配置，用來定義路由規(guī)則。由此我們就需要另一個第三方路由模塊，叫做，當然它是基于開發(fā)的。造成這種現(xiàn)象的最根本原因路由沒有明確的父子層級關系。監(jiān)聽路由路由狀態(tài)發(fā)生改變時可以通過監(jiān)聽，通過注入實現(xiàn)狀態(tài)的管理。何為路由路由機制運可以實現(xiàn)多視圖的單頁Web應用（single page web application，SPA）。單頁應用在使用期間不會重新加載...

mingde 2019-08-22 13:59 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數(shù)當參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)和，下面的方法請求成功執(zhí)行，失敗執(zhí)行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數(shù)當參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)success和error，下...

dreamGong 2019-08-23 11:59 評論0 收藏0
angularjs+springMvc學習筆記

摘要：回調說白了，就是把函數(shù)當參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)和，下面的方法請求成功執(zhí)行，失敗執(zhí)行異步異步的原理我看了網上的一些博客和例子，大都以定時任務為例子說明，但具體的原理我還是不太回調說白了，就是把函數(shù)當參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)success和error，下...

rozbo 2019-08-19 11:10 評論0 收藏0
AngularJs

摘要：當左右服務都被解析并返回時，會以服務為參數(shù)去調用組件的構造函數(shù)。發(fā)送或廣播的消息應該限定在最小的作用域。置頂一個通過，發(fā)送的消息列表并且窒息的管理以防止命名沖突在需要格式化數(shù)據(jù)時，將格式 angular 數(shù)據(jù)雙向綁定的框架提供數(shù)據(jù)綁定，DOM指令。angular，定義了一套規(guī)則，開發(fā)中就必須遵守規(guī)則，這套規(guī)則為項目提供了一套解決方案。模塊，組件，模板，元數(shù)據(jù)，數(shù)據(jù)綁定, 指令，服務...

sf190404 2019-08-19 18:44 評論0 收藏0
ui-router學習

摘要：關于應用程序的行為類似于狀態(tài)機。將應用程序的每個功能視為一組狀態(tài)。當嵌套狀態(tài)處于活動狀態(tài)時，該片段將附加到瀏覽器中父狀態(tài)的。父狀態(tài)可用于限制對整個子狀態(tài)樹的訪問，但本身不提供任何。如果方案返回，則轉換將暫停，直到解決狀態(tài)頂級狀態(tài)嵌套狀態(tài) 關于state UI-Router應用程序的行為類似于狀態(tài)機。將應用程序的每個功能視為一組狀態(tài)。一次只能有一個狀態(tài)為活動狀態(tài)。用戶可以從一種狀態(tài)轉換...

sixleaves 2019-08-22 14:57 評論0 收藏0