亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Angular 路由route實(shí)例代碼

 更新時間:2016年07月12日 09:52:21   投稿:jingxian  
下面小編就為大家?guī)硪黄狝ngular 路由route實(shí)例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

AngularJS 路由 routing

能夠從頁面的一個視圖跳轉(zhuǎn)到另外一個視圖,對單頁面應(yīng)用來講是至關(guān)重要的。當(dāng)應(yīng)用變得越來越復(fù)雜時,我們需要一個合理的方式來管理用戶在使用過程中看到的界面。AngularJS的做法是將視圖分解成布局和模板視圖,并且根據(jù)用戶當(dāng)前訪問的URL來展示對應(yīng)的視圖。

本文對 AngularJS routing 做一簡單示例,并提及其涉及的一些概念。

一、布局頁面

引用scripts:

 <script src="../Scripts/jquery-1.9.1.min.js"></script>
 <script src="../Scripts/angular.min.js"></script>
 <script src="../Scripts/angular-route.min.js"></script>

頁面的布局比較簡單:

<div>
   <ul>
     <li><a href="#page1">go page 1</a></li>
     <li><a href="#page2">go page 2</a></li>
     <li><a href="#other">to other page</a></li>
   </ul>
 </div>
 <div ng-view></div>

ng-view是由ngRoute模塊提供的一個特殊指令,其告訴AngularJS把模板渲染到何處。這個例子中,我們將需要渲染的內(nèi)容放到 下面的 div 中。上面的三個 a 鏈接分別指向了三個視圖view。

二、模板頁面

創(chuàng)建兩模板頁面,分別叫 Subpage_1.html 和 Subpage_2.html。

3、路由規(guī)則 routing config

angular.module("myRouteApp", ["ngRoute"])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "Subpage_1.html"
      })
      .when("/page2", {
        templateUrl: "Subpage_2.html"
      })
      .otherwise({
        redirectTo: "/"
      });
  }]);

把 ngRoute 模塊在我們的應(yīng)用中當(dāng)作依賴加載進(jìn)來。用 config 函數(shù)在模塊或應(yīng)用中定義路由,使用AngularJS提供的when和otherwise兩個方法來定義應(yīng)用的路由。

templateUrl:

應(yīng)用會根據(jù) templateUrl 屬性所指定的路徑通過XHR讀取視圖(或者從$templateCache中讀?。?。如果能夠找到并讀取這個模板,AngularJS將模板的內(nèi)容渲染到具有ng-view指令的DOM元素中。

redirectTo:

如果redirectTo屬性的值是一個字符串,那么路徑會被替換成這個值,并根據(jù)這個目標(biāo)路徑觸發(fā)路由變化。如果redirectTo屬性的值是一個函數(shù),那么路徑會被替換成函數(shù)的返回值,并根據(jù)這個目標(biāo)路徑觸發(fā)路由變化。

運(yùn)行結(jié)果

點(diǎn)擊 go page 1

點(diǎn)擊 go page 2

以上這篇Angular 路由route實(shí)例代碼就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解Angular2學(xué)習(xí)筆記之Html屬性綁定

    詳解Angular2學(xué)習(xí)筆記之Html屬性綁定

    本篇文章主要介紹了詳解Angular2學(xué)習(xí)筆記之Html屬性綁定,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • ng-repeat指令在迭代對象時的去重方法

    ng-repeat指令在迭代對象時的去重方法

    今天小編就為大家分享一篇ng-repeat指令在迭代對象時的去重方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-10-10
  • Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例

    Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)示例

    本篇文章主要介紹了Angular 2.0+ 的數(shù)據(jù)綁定的實(shí)現(xiàn)實(shí)例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • AngularJS實(shí)現(xiàn)Input格式化的方法

    AngularJS實(shí)現(xiàn)Input格式化的方法

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-11-11
  • AngularJS自定義指令詳解(有分頁插件代碼)

    AngularJS自定義指令詳解(有分頁插件代碼)

    本篇文章主要介紹了AngularJS自定義指令詳解(有分頁插件代碼),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • angular異步驗(yàn)證防抖踩坑實(shí)錄

    angular異步驗(yàn)證防抖踩坑實(shí)錄

    這篇文章主要給大家介紹了關(guān)于angular異步驗(yàn)證防抖踩坑的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • angularjs的select使用及默認(rèn)選中設(shè)置

    angularjs的select使用及默認(rèn)選中設(shè)置

    本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價值,需要的朋友可以參考下
    2017-04-04
  • Angular.js實(shí)現(xiàn)動態(tài)加載組件詳解

    Angular.js實(shí)現(xiàn)動態(tài)加載組件詳解

    這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動態(tài)加載組件的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • 簡單講解AngularJS的Routing路由的定義與使用

    簡單講解AngularJS的Routing路由的定義與使用

    這篇文章主要介紹了AngularJS的Routing路由的定義與使用,講解了when()和otherwise()兩個相關(guān)的常用方法,需要的朋友可以參考下
    2016-03-03
  • 如何在Angular2中使用jQuery及其插件的方法

    如何在Angular2中使用jQuery及其插件的方法

    本篇文章主要介紹了如何在Angular2中使用jQuery及其插件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02

最新評論