SPA（single page application）
- 指的是通过单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染。
- 特点：
- 1.只有一个页面，不会发生跳转。
- 2.只有页面当中的某一部分在变化
- 3.页面当中的内容是通过异步加载。
- 4.SPA
通过Ajax来实现单页面应用程序
<body>
<div class="box">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#my">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<div class="content"></div>
</body>
<script>
//1.监听锚点变化
window.addEventListener('hashchange',function () {
//2.获取hash值（锚点）
var hash = location.hash;
hash = hash.slice(1); //去除锚点前面的#
//3.根据hash值来发送请求
var xhr = new XMLHttpRequest();
var url = 'single.php?hash='+hash;
xhr.open('get',url,true);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200){
var res = xhr.responseText;
console.log(res);
//4.拿到请求结果展示到页面当中。
document.querySelector('.content').innerHTML = res;
}
}
})
</script>
angular路由
- 在angular当中路由就是锚点，用来做单页面应用程序的切换。锚点的变化，又称为路由的变化。
- 路由在angular当中属于单独的一个模块，帮你监听锚点的跳转，它就是路由。
使用angular路由来实现单页面应用程序
- 原理：监听锚点的变化，根据锚点不同，发送的ajax参数不同，返回的结果就不同。
- 1.引入angular-route.js
- 2.实例化模块时注入ngRoute模块
- 3.配置路由模块
- 4.布局模板
<body ng-app="app" ng-controller="myController">
<div class="box">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#my">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<div class="content">
//注意别忘写
<div ng-view></div>
</div>
</body>
<script src="angular.js"></script>
//1.引入angular-route.js
<script src="angular-route.js"></script>
<script>
//2.实例化模块时注入ngRoute路由模块
var app = angular.module('app', ['ngRoute']);
//3.配置路由
//让路由去监听哪些锚点的变化。
app.config(['$routeProvider',function ($routeProvider) {
//当锚点变成home时，展示以下模板。
$routeProvider.when('/home',{
template:'<h1>首页</h1>'
}).when('/my',{
template:'<h1>关于我们</h1>'
}).when('/contact',{
template:'<h1>联系我们</h1>'
}).otherwise({
redirectTo:'/home' //重定向（初始化页面）
});
}]);
//创建控制器
app.controller('myController', ['$scope', function ($scope) {
}]);
//绑定模块
//绑定控制器
