AngularJS动画（二）

一、官方给的ngAnimate库的使用

演示地址：http://augus.github.io/ngAnimate/

源代码地址：https://github.com/Augus/ngAnimate

二、完整的AngularJS动画+路由实例

路由配置动态加载视图和控制器

1.主页

引用：

<link href="../Content/bootstrap.min.css" target="_blank" rel="external nofollow"  rel="stylesheet" />
<link href="../Content/ng-animation.css" target="_blank" rel="external nofollow"  rel="stylesheet" />

<script src="../Scripts/Angular/angular.min.js"></script>
<script src="../Scripts/Angular/ocLazyLoad.min.js"></script>
<script src="../Scripts/Angular/angular-ui-router.min.js"></script>
<script src="../Scripts/Angular/angular-animate.min.js"></script>
           

HTML：

<div class="container" ng-app="myApp">
    <ul class="nav nav-pills">
        <li role="presentation"><a href="#/home" target="_blank" rel="external nofollow" >首页</a></li>
        <li role="presentation"><a href="#/about" target="_blank" rel="external nofollow" >关于页面</a></li>
        <li role="presentation"><a href="#/site" target="_blank" rel="external nofollow" >网站地图</a></li>
    </ul>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <div class="panel-title">模板内容</div>
        </div>
        <div class="panel-body slide-top" ui-view></div>
    </div>
</div>
           

js:

var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'oc.lazyLoad']);
//配置路由
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.
    when('', '/home')
    .when('/', 'home');
    //一级页面
    $stateProvider.state('main', {
        url: '/:first',
        /**此处动态加载控制器和视图**/
        views: {
            "": {
                templateUrl: function ($stateParams) {
                    return '/template/' + $stateParams.first + '.html';
                },
                resolve: {
                    des: function ($ocLazyLoad, $stateParams) {
                        if ($stateParams.first == 'site')
                            return;
                        return $ocLazyLoad.load('/template/' + $stateParams.first + '.js');
                    }
                }
            }
        }
    });
});
           

2.Home页

视图：

<h3>这是home页面</h3>
<div class="list-group" ng-controller="homeController">
    <div class="list-group-item list-group-item-info slide-right" ng-repeat="item in numbers">
        会员数量  <span class="badge">{{item}}</span>
    </div>
</div>
           

controller：

angular.module('myApp')
.controller('homeController', function ($scope, $timeout) {
    console.info('home.js');
    $scope.numbers = [];
    for (var i = 0; i < 5; i++) {
        (function (i) {
            $timeout(function () {
                $scope.numbers.push(i);
            }, i * 200);
        })(i);
    }
});
           

3.about页

视图：

<h3 class="text-success">
    这是关于我们页面
</h3>
<div class="row" ng-controller="aboutController" style="min-height:300px;">
    <div class="col-xs-6 col-md-3 scale-fade-in" ng-repeat="item in numbers">
        <div class="thumbnail">
            <img src="holder.js/100%x180" alt="100%x180"
                 src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDMyMSAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE4MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjEyMS41NzAzMTI1IiB5PSI5MCIgc3R5bGU9ImZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxNXB0O2RvbWluYW50LWJhc2VsaW5lOmNlbnRyYWwiPjMyMXgxODA8L3RleHQ+PC9nPjwvc3ZnPg=="
                 data-holder-rendered="true" style="height: 180px; width: 100%; display: block;">
            <div class="caption">
                <h3>图片标题内容<span class="badge">{{item}}</span></h3>
            </div>
        </div>
    </div>
</div>
           

controller：

angular.module('myApp')
.controller('aboutController', function ($scope, $timeout) {
    console.info('about.js');
    $scope.numbers = [];

    $timeout(function () {
        showInit();
    }, 500);
    function showInit() {
        for (var i = 0; i < 5; i++) {
            (function (i) {
                $timeout(function () {
                    $scope.numbers.push(i);
                }, i * 500);
            })(i);
        }
    }
});
           

其他省略。

显示结果：

更多源代码地址：

http://git.oschina.net/tiama3798/AngularJsDemo/tree/ngAnimate

更多：

ng-switch指令

ng-if指令

AngularJS动画（一）