代码中，ngClick中使用了showBlock函数，参数是当前点击的功能字符串，这个函数的参数在使用路由功能后，没有使用，仅仅是在此函数中增加了隐藏与显示导航部分以及功能演示部分的代码，详情请查看下面的脚本代码。
angular.module('weuiapp', ['ngAnimate', 'ngRoute']) .config(function($routeProvider) { $routeProvider .when('https://www.jb51.net/', { controller: 'home', templateUrl: '' }) .when('/button',{ controller: 'button', templateUrl: 'button.html' }) .when('/cell', { controller: 'cell', templateUrl: 'cell.html' }) .when('/toast', { controller: 'toast', templateUrl: 'toast.html' }) .when('/msg', { controller: 'msg', templateUrl: 'msg.html' }) .when('/article', { controller: 'article', templateUrl: 'article.html' }) .when('/icons', { controller: 'icons', templateUrl: 'icons.html' }) .when('/panel', { controller: 'panel', templateUrl: 'panel.html' }) .otherwise({ redirectTo: 'https://www.jb51.net/' }) }) .controller('home', function($scope) { $scope.homeShow = true; $scope.viewShow = false; $scope.showBlock = function() { $scope.homeShow = false; $scope.viewShow = true; } }) .controller('toast', ['$scope', '$interval', toast]) .animation('.aweui-show', ['$animateCss', toastAnimate]) .animation('.home', ['$animateCss', function($animateCss) { return { enter: function(element, doneFn) { return $animateCss(element, { from: { left: '100%', top: 0, opacity: 0 }, to: { left: 0, top: 0, opacity: 1 }, duration: .3 }); }, leave: function(element, doneFn) { return $animateCss(element, { from: { left: 0, top: 0, opacity: 1 }, to: { left: '-100%', top: 0, opacity: 0 }, duration: .3 }); } } }]) .animation('.view', ['$animateCss', function($animateCss) { return { enter: function(element, doneFn) { return $animateCss(element, { from: { left: '100%', top: 0, opacity: 0 }, to: { left: 0, top: 0, opacity: 1 }, duration: .3 }); }, leave: function(element, doneFn) { return $animateCss(element, { from: { left: 0, top: 0, opacity: 1 }, to: { left: '-100%', top: 0, opacity: 0 }, duration: .3 }); } } }]) $scope.showBlock = function() { $scope.homeShow = false; $scope.viewShow = true; }
这一段便是函数要实现的功能代码，分别控制变量homeShow以及viewShow来实现导航与功能演示两部分的显示与隐藏。
.animation('.home', ['$animateCss', function($animateCss) { return { enter: function(element, doneFn) { return $animateCss(element, { from: { left: '100%', top: 0, opacity: 0 }, to: { left: 0, top: 0, opacity: 1 }, duration: .3 }); }, leave: function(element, doneFn) { return $animateCss(element, { from: { left: 0, top: 0, opacity: 1 }, to: { left: '-100%', top: 0, opacity: 0 }, duration: .3 }); } } }])
以上是导航部分显示时的动画效果代码。导航部分初始化为绝对定位，让其在消失前先做一个向左移出显示区域，并且渐隐的动画。当查看完功能演示，回到导航时，进行动画反转。这里使用的ngAnimate的$animateCss服务，并且使用了此服务提供的进入事件enter以及移出事件leave。其它的动画功能与其相同。
$routeProvider .when('https://www.jb51.net/', { controller: 'home', templateUrl: '' }) .when('/button',{ controller: 'button', templateUrl: 'button.html' }) .when('/cell', { controller: 'cell', templateUrl: 'cell.html' }) .when('/toast', { controller: 'toast', templateUrl: 'toast.html' }) .when('/msg', { controller: 'msg', templateUrl: 'msg.html' }) .when('/article', { controller: 'article', templateUrl: 'article.html' }) .when('/icons', { controller: 'icons', templateUrl: 'icons.html' }) .when('/panel', { controller: 'panel', templateUrl: 'panel.html' }) .otherwise({ redirectTo: 'https://www.jb51.net/' })
这是路由服务，对应html中的a标签href属性，所以，此程序中没有使用showBlock函数的参数，已经没有用处了，此函数只是为了增加了动态效果而创造的。
下面，再来看看功能演示部分的页面代码。
<div> <div> <h1>Toast</h1> </div> <div> <a href="javascript:;" ng-click="showToast()">点击弹出Toast</a> <a href="javascript:;" ng-click="showLoadingToast()">点击弹出Loading Toast</a> </div> <!--BEGIN toast--> <div ng-if="toastHide"> <div></div> <div> <i></i> <p>已完成</p> </div> </div> <!--end toast--> <!-- loading toast --> <div ng-if="loadingToastHide"> <div></div> <div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <p>数据加载中</p> </div> </div> </div>
这就是加载等待提示功能的演示页面代码，一共两种样式，其一，显示文字；其二，有一个加载等待的动画并且有提示文字显示。
页面有两个按钮，功能就是分别呼出这两种样式，每种样式呼出后，停留3秒后自动消失。