现在非常流行单页面应用,传统都是通过ajax请求数据,前端拿到数据渲染到页面,这种无刷新的视图切换非常棒!但是致命的缺点就是刷新後无法保持原来的视图,解决此问题的一个方法是使用 hash,监听hashchange事件来进行视图切换,另一个方法是用HTML5的history API,通过pushState()记录操作历史,监听popstate事件来进行视图切换,也有人把这叫pjax技术。
现在开始介绍angular的$route!
<div ng-controller="Aaa">
<a href="#aaa">首页
<a href="#bbb">内容
<a href="#ccc">标题
<script type="text/javascript">
var m1 = angular.module('myApp',['ngRoute']);
m1.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/aaa',{
template : '
AAA
'}).when('/bbb',{
template : '
BBB
'}).when('/ccc',{
template : '
CCC
'}).otherwise({ //默认哈希值,哈希值出现错误也可以执行
redirectTo : '/aaa'
});
}]);
m1.controller('Aaa',['$scope',function($scope){
}]);