<div id="container">
<a href="#/index">首页</a>
<a href="#/lst">商品列表</a>
</div>
<script type="text/javascript">
var divContainer = angular.element(document.getElementById('container'));
var app = angular.module('myApp', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider.when('/index', {
template: '<div>这是首页</div>'
}).when('/lst', {
template: '<div>这是商品列表页<br/><a href="#/detail/2">商品一</a></div>'
}).when('/detail/:id', {
template: '<div>这是商品详情页</div>'
}).otherwise({
redirectTo: '/index'
});
});
app.run(function ($rootScope) {
// 为“路由开始改变”绑定事件
$rootScope.$on('$routeChangeStart', function (evt, next, current) {
divContainer.removeAttr('class');
// 在路由开始改变时(还未开始改变)移除divContainer上的所有class,这里是先假定不使用任何动画效果
if (next.$$route.originalPath == '/detail/:id' && current && current.$$route.originalPath == '/lst') {
// 当即将切换到的路由的路径为“/detail/:id”(即商品详情),且当前路由的路径为“'/lst'”时,给 divContainer 加入一个 class,使其具有动画效果
divContainer.addClass('slide');
}
});
});
</script>