首頁 > 開發者 > JavaScript
詳解Angular路由 ng-route和ui-router的區別，ng-routeui-router
什麼是路由？
路由是AngularJS構建單頁面應用的基礎。
路由，就是網路資料或者請求進行分發的一個網路組件。
路由就是一個用於請求URL分發和跳轉的一個應用組件，Angular中通過$routeProvider路由服務提供者進行核心的配置處理。
ng路由
ng 路由是 AngularJS 官方提供的一種簡單的路由操作。
ng 路由主要分三個組成部分：路由指令、路由服務、路由服務提供者
路由指令:ng-view
ngView指令主要用於將路由指向的頁面渲染到當前頁面的布局中。
文法：
<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>
事件：
路由視圖一旦載入時，就會自動觸發$viewContentLoaded 事件
路由提供者：$routeProvider
描述：
內建服務物件 內建服務物件 $routeProvider $routeProvider $routeProvider 主要用於進行路由配置 主要用於進行路由配置
該服務的使用必須依賴 該服務的使用必須依賴 該服務的使用必須依賴 ngRoute 模組，也就是項目中必須添加 模組，也就是項目中必須添加 animate-route.js
主要方法：
when( path, route); 用於在訪問 path 路徑時，跳轉到 route 指定的視圖 |-- path：路由跳轉的徑 |-- route：路由對象 <組件 對象 >，一個 JSON對象 otherwise(params);用於在訪問不存的路徑時，跳轉的預設路徑或者視圖 |-- params：指定路徑或者路由對象
內建服務<路由服務>：$route &$routeParams
$route 服務被用於進行深層超連結資訊的描述， 它會監聽 它會監聽 $location.url() 地址並進行url 地址和指定的路由視圖之間映射關係。
$routeParams服務允許開發人員可以進行路由中參數的處理。
ui路由
Angular官方提供的 ng 路由已經具備了非常強大的功能，但是在某些情況下存在一些不太好用的地方，項目中如果出現大量路由深層嵌套話官方的ng路由來處理就不是非常適合了。
第三方提供了一種強大的路由處理功能，對於路由嵌套也可以非常簡單的進行處理。
ui-route：ui路由，第三方路由
ui路由，主要的功能是項目中的路由操作，和官方的ng路由相比較，它的處理方式更加簡潔和易用，尤其是涉及到項目中大量路由嵌套時，使用ui路由能更加快捷方便的完成項目中路由的跳轉處理。
ui-view：指令
ui -view是 ui 路由中模板頁面用於資料展示的指令，可以作為標籤的屬性出現，同樣也可以作為標籤的屬性出現
<div ui -viewviewviewview></div>><ui -view></uiview>
同時可以給 ui -view 指令命名，用於在路由跳轉時對應名稱的 ui -view 上展示對應的資料
總結：兩者區別
① ng路由實現不了多頁面應用
② ui路由：更加方便地處理路由嵌套，在state（）函數中進行即可。
③ngRoute 和 ui-route 相比:
$when —> $state 路由狀態配置的時候
$routeParams —> $stateParams 帶參數的時候的配置
$routeProvider —> $stateProvider 依賴注入的模組
<div ng-view></div> —> <div ui-view></div> 頁面中綁定的指令
④ uiRoute中可以嵌套更深層次的路由，也就是路由中可以有路由（大致有兩種情況：1.橫向的 2.縱向的）。
（1）嵌套路由
（2）多視圖路由
ngRoute中就不能嵌套更深的路由。
用代碼看一下兩者的區別：
ng路由：首先要配置註冊 ngRoute
代碼如下：
var app = angular.module(“myApp", ['ngRoute']); app.config(["$routeProvider",function($routeProvider){ }]);
ui路由：用hello world舉例子：
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>ui-route</title> <script src="js/lib/angular.min.js" ></script> <script src="js/lib/angular-ui-router.min.js"></script> </head> <style type="text/css"> .active{ color:red; font-weight:bold; } </style> <body> <ul> <li><a ui-sref="hello" ui-sref-active='active'>Hello</a></li> <li><a ui-sref="world" ui-sref-active='active'>world</a></li> </ul> <div> <ui-view></ui-view> </div> </body> <script> var app=angular.module("myApp",["ui.router"]); /* $stateProvider: Ui路由中的狀態服務提供者 */ app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){ $urlRouterProvider.otherwise("/hello"); $stateProvider.state({ name:"hello", url:"/hello", template:"<h1>這是hello對應的內容</h1>" }).state({ name:"world", url:"/world", template:"<h1>這是world跳轉之後對應的內容</h1>" }); }]); </script> </html>
效果如下：
這是簡單的一個單頁面跳轉，有興趣可以思考一下多頁面應用。
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
