欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

詳解Angular路由ng-route和ui-router的區(qū)別

什么是路由？

創(chuàng)新互聯(lián)建站，為您提供成都網(wǎng)站建設(shè)、網(wǎng)站制作公司、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)宣傳片制作等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)建站網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

路由是AngularJS構(gòu)建單頁面應(yīng)用的基礎(chǔ)。

路由，就是網(wǎng)絡(luò)數(shù)據(jù)或者請(qǐng)求進(jìn)行分發(fā)的一個(gè)網(wǎng)絡(luò)組件。

路由就是一個(gè)用于請(qǐng)求URL分發(fā)和跳轉(zhuǎn)的一個(gè)應(yīng)用組件，Angular中通過$routeProvider路由服務(wù)提供者進(jìn)行核心的配置處理。

ng路由

ng 路由是 AngularJS 官方提供的一種簡(jiǎn)單的路由操作。

ng 路由主要分三個(gè)組成部分：路由指令、路由服務(wù)、路由服務(wù)提供者

路由指令:ng-view

ngView指令主要用于將路由指向的頁面渲染到當(dāng)前頁面的布局中。

語法：

<ng-view [onload=”string”] [autoscroll]=”string”></ng-view>
  1. onload:當(dāng)視圖發(fā)生改變時(shí)執(zhí)行屬性值中的表達(dá)式
  2. autoscroll:當(dāng)視圖發(fā)生改變時(shí)自動(dòng)觸發(fā)$anchorScroll事件

事件：

路由視圖一旦加載時(shí)，就會(huì)自動(dòng)觸發(fā)$viewContentLoaded 事件

路由提供者：$routeProvider

描述：

內(nèi)置服務(wù)對(duì)象 內(nèi)置服務(wù)對(duì)象 $routeProvider $routeProvider $routeProvider 主要用于進(jìn)行路由配置 主要用于進(jìn)行路由配置
該服務(wù)的使用必須依賴 該服務(wù)的使用必須依賴 該服務(wù)的使用必須依賴 ngRoute 模塊，也就是項(xiàng)目中必須添加 模塊，也就是項(xiàng)目中必須添加 animate-route.js

主要方法：

when( path, route); 用于在訪問 path 路徑時(shí)，跳轉(zhuǎn)到 route 指定的視圖
  |-- path：路由跳轉(zhuǎn)的徑
  |-- route：路由對(duì)象 <組件 對(duì)象 >，一個(gè) JSON對(duì)象
 otherwise(params);用于在訪問不存的路徑時(shí)，跳轉(zhuǎn)的默認(rèn)路徑或者視圖
  |-- params：指定路徑或者路由對(duì)象

內(nèi)置服務(wù)<路由服務(wù)>：$route &$routeParams

$route 服務(wù)被用于進(jìn)行深層超鏈接信息的描述， 它會(huì)監(jiān)聽 它會(huì)監(jiān)聽 $location.url() 地址并進(jìn)行url 地址和指定的路由視圖之間映射關(guān)系。

$routeParams服務(wù)允許開發(fā)人員可以進(jìn)行路由中參數(shù)的處理。

ui路由

Angular官方提供的 ng 路由已經(jīng)具備了非常強(qiáng)大的功能，但是在某些情況下存在一些不太好用的地方，項(xiàng)目中如果出現(xiàn)大量路由深層嵌套話官方的ng路由來處理就不是非常適合了。

第三方提供了一種強(qiáng)大的路由處理功能，對(duì)于路由嵌套也可以非常簡(jiǎn)單的進(jìn)行處理。

ui-route：ui路由，第三方路由

ui路由，主要的功能是項(xiàng)目中的路由操作，和官方的ng路由相比較，它的處理方式更加簡(jiǎn)潔和易用，尤其是涉及到項(xiàng)目中大量路由嵌套時(shí)，使用ui路由能更加快捷方便的完成項(xiàng)目中路由的跳轉(zhuǎn)處理。

ui-view：指令

ui -view是 ui 路由中模板頁面用于數(shù)據(jù)展示的指令，可以作為標(biāo)簽的屬性出現(xiàn)，同樣也可以作為標(biāo)簽的屬性出現(xiàn)

<div ui -viewviewviewview></div>>
<ui -view></uiview>

同時(shí)可以給 ui -view 指令命名，用于在路由跳轉(zhuǎn)時(shí)對(duì)應(yīng)名稱的 ui -view 上展示對(duì)應(yīng)的數(shù)據(jù)

總結(jié)：兩者區(qū)別

① ng路由實(shí)現(xiàn)不了多頁面應(yīng)用

② ui路由：更加方便地處理路由嵌套，在state（）函數(shù)中進(jìn)行即可。

③ngRoute 和 ui-route 相比:

   $when —> $state      路由狀態(tài)配置的時(shí)候          

   $routeParams —> $stateParams    帶參數(shù)的時(shí)候的配置

   $routeProvider —> $stateProvider    依賴注入的模塊

   <div ng-view></div>  —>  <div ui-view></div>   頁面中綁定的指令

④ uiRoute中可以嵌套更深層次的路由，也就是路由中可以有路由（大致有兩種情況：1.橫向的 2.縱向的）。

（1）嵌套路由

（2）多視圖路由

ngRoute中就不能嵌套更深的路由。

用代碼看一下兩者的區(qū)別：

ng路由：首先要配置注冊(cè) 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路由中的狀態(tài)服務(wù)提供者 
    */ 
    app.config(["$stateProvider","$urlRouterProvider",function($stateProvider,$urlRouterProvider){ 
      $urlRouterProvider.otherwise("/hello"); 
       
      $stateProvider.state({ 
        name:"hello", 
        url:"/hello", 
        template:"<h2>這是hello對(duì)應(yīng)的內(nèi)容</h2>" 
      }).state({ 
        name:"world", 
        url:"/world", 
        template:"<h2>這是world跳轉(zhuǎn)之后對(duì)應(yīng)的內(nèi)容</h2>" 
      }); 
    }]); 
 
  </script> 
</html>

效果如下：

詳解Angular路由 ng-route和ui-router的區(qū)別

詳解Angular路由 ng-route和ui-router的區(qū)別

這是簡(jiǎn)單的一個(gè)單頁面跳轉(zhuǎn)，有興趣可以思考一下多頁面應(yīng)用。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：詳解Angular路由ng-route和ui-router的區(qū)別
分享地址：http://chinadenli.net/article44/goggee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、建站公司、軟件開發(fā)、響應(yīng)式網(wǎng)站、云服務(wù)器、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司