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