[js] AngularJS

ng-app="myApp"

var app = angular.module('myApp', ['ngAnimate']);//引入模块

//ngAnimate  --> angular-animate

//ngMessages --> angular-messages

 

ng-controller="animationsCtrl" //控制器

app.controller('animationsCtrl', function($scope) {
});

ng-options="item.name for item in ngIncludeTemplates"//ngIncludeTemplates 另名为 item ，遍历 属性 name

ng-repeat="item in items"  //以item为命名 遍历 items

app.controller('animationsCtrl', function($scope) {

                $scope.items = [{
                    name: 'Richard'
                }, {
                    name: 'Bruno'
                }, {
                    name: 'Jobson'
                }];
});

ng-pattern="/^\d+$/"  正则验证

$error

 

ng-model="ngSwitchSelected"

ng-switch on="ngSwitchSelected"

ng-switch-when="item1"

 

            var app = angular.module('myApp', ['ngAnimate', 'ngRoute']);
            app.config(['$routeProvider',
                function($routeProvider) {
                    $routeProvider
                        .when('/First', {
                            templateUrl: 'first.html'
                        })
                        .when('/Second', {
                            templateUrl: 'second.html'
                        })
                        .otherwise({
                            redirectTo: '/First'
                        });
                }
            ]);

 

custom-directive

app.directive('customDirective', function($animate) {})

move-directive=""

app.directive('moveDirective', function($animate) {})

 

#默认都是false

当Angular往repeat list里面加入一个元素的时候，.ng-enter 和 .ng-enter CSS 类会被自动赋予给该元素。以下是enter:新增、leave:移除、move:移动位置 这三种不同的情况下，该元素的类变化情况：
事件          初始类             终结类                  触发该CSS类变化的指令
enter     .ng-enter     .ng-enter-active     ngRepeat, ngInclude, ngIf, ngView
leave     .ng-leave     .ng-leave-active     ngRepeat, ngInclude, ngIf, ngView
move     .ng-move     .ng-move-active     ngRepeat

 

In addition, ngAnimate also supports CSS-based animations which follow a similar naming convention. Here's a breakdown of that:
事件                                                   起始类                                  结束类                            触发该CSS类变化的指令
hide an element                                .ng-hide-add               .ng-hide-add-active                   ngShow, ngHide
show an element                              .ng-hide-remove         .ng-hide-remove-active               ngShow, ngHide
adding a class to an element             .CLASS-add                .CLASS-add-active                      ngClass and class="{{expression}}"
removing a class from an element     .CLASS-remove            .CLASS-remove-active              ngClass and class="{{expression}}"

 

隐藏触发.ng-hide-add

隐藏结束.ng-hide-add-active

隐藏移除.ng-hide-remove

隐藏移除结束.ng-hide-remove-active

 

Directive      　　　　　　Supported Animations
ngRepeat     　　　　　　enter, leave and move
ngView     　　　　　　　enter and leave
ngInclude     　　　　　　enter and leave
ngSwitch     　　　　　　enter and leave
ngIf     　　　　　　　　　enter and leave
ngClass    　　　　　　　add and remove (the CSS class(es) present)
ngShow & ngHide     　　add and remove (the ng-hide class value)
form & ngModel     　　  add and remove (dirty, pristine, valid, invalid & all other validations)
ngMessages     　　　　  add and remove (ng-active & ng-inactive)
ngMessage     　　　　   enter and leave