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