AngularJS實現單頁應用的原理——路由(Route)

 

AngularJS實現單頁應用的原理——路由(Route)

  路由：告訴你一個通往某個特定頁面的途徑

  

 

  http://127.0.0.1/index.html#/start

  http://127.0.0.1/index.html#/main

  #/start <=> start.html

  #/main <=> main.html

  SPA應用中的頁面切換的原理：

  (1)使用JS解析當前的頁面地址 location.hash( )

  (2)查找字典，找到指定的路由地址對應的真正的頁面名稱

  (3)發起異步AJAX請求，讀取目標頁面的內容，加載到當前頁面指定位置

 

 

AngularJS中的路由模塊——用於實現SPA應用中的「僞頁面切換效果」

  步驟：

  (1)在index.html中引入angular.js 和 angular-route.js

  (2)頁面中聲明一個容器帶ngView指令： <div ng-view></div>

  (3)建立模塊聲明模塊依賴於ngRoute模塊

angular.module('模塊名', ['ngRoute', 'ng'])

  (4)配置路由地址的映射信息：

.config( function( $routeProvider ){

$routeProvider.when( '/路由地址', { templateUrl: '僞頁面地址' })

} )

  (5)測試： 地址欄中輸入 http://...../index.html#/路由地址

 

愛卡（深圳）管理有限公司

       分享每一刻精彩

     微信：iCafeYOJOY

    微博：http://weibo.com/iCafeYOJOY

    官網：www.icafe.im