AngularJS实现单页应用的原理——路由(Route)

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#/路由地址

AngularJS实现单页应用的原理——路由(Route)

AngularJS实现单页应用的原理——路由(Route)

爱卡(深圳)管理有限公司

分享每一刻精彩

微信:iCafeYOJOY

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

官网:www.icafe.im

上一篇:POJ1006: 中国剩余定理的完美演绎(非原创)


下一篇:三十、【C#.Net开发框架】WCFHosting服务主机的利用WCF服务通讯和实现思路