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