Angular module

Angular ModulePeggy2015-08-21

angular.module('myModule', [‘xxx']);

DependenciesApplication

NameAngularJS

Install

In the html<script src="angular.js"><script src="angular-animate.js">

Download this file from Google CDN - //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js Bower - bower install angular-animate.js @X.Y.Z code.angularjs.org - //code.angularjs.org/X.Y.Z/angular-animate.js

ngAnimate

The ngAnimate module provides support for CSS-based animations (keyframes and transitions) as well as JavaScript-based animations via callback hooks. Animations are not enabled by default, however, by including ngAnimate then the animation hooks are enabled for an Angular app.

var myModule = angular.module('myModule', ['ngAnimate']);

ngAnimate by Css

ng-enter class 主要用於新添加的並渲染到頁面中 . ng-move class 主要用於當元素被移動時 . ng-leave class 主要用於被刪除時 .

starting class 表示一個將要開始的動畫 active class 表示一個將要結束的動畫

/* The starting CSS styles for the enter animation */ .fade.ng-enter { transition:0.5s linear all; opacity:0; } /* The finishing CSS styles for the enter animation */ .fade.ng-enter.ng-enter-active { opacity:1; }

<div ng-if="bool" class="fade"> Fade me in out

</div> <button ng-click="bool=true">Fade In!</button> <button ng-click="bool=false">Fade Out!</button>

ngAnimate by JavaScript

By making use of the module.animation() module function we can register the ainmation.<div ng-repeat="item in items" class="slide"> {{ item }} </div>

myModule.animation('.slide', [function() { return { // make note that other events (like addClass/removeClass) have different function input parameters enter: function(element, doneFn) { jQuery(element).fadeIn(1000, doneFn); // remember to call doneFn so that angular knows that the animation has concluded }, move: function(element, doneFn) { jQuery(element).fadeIn(1000, doneFn); }, leave: function(element, doneFn) { jQuery(element).fadeOut(1000, doneFn); } } }]

ngAria

The ngAria module provides support for common ARIA attributes that convey state or semantic information about the application for users of assistive technologies, such as screen readers.

ngAria – 幫助製作 AngularJS 自定義組件的新模塊

ngAria - example

The disabled attribute is only valid for certain elements such as button, input and textarea. To properly disable custom element directives such as <md-checkbox> or <taco-tab>, using ngAria with ngDisabled will also add aria-disabled. This tells assistive technologies when a non-native input is disabled, helping custom controls to be more accessible.

<md-checkbox ng-disabled="disabled">

<md-checkbox disabled aria-disabled="true">

ngCookies

The ngCookies module provides a convenient wrapper for reading and writing browser cookies.

angular.module('app', ['ngCookies']); Module Components

Service $cookieStore: Objects put or retrieved from this storage are automatically

serialized or deserialized by angular's toJson/fromJson. $cookies: Provides read/write access to browser's cookies.

Provider $cookiesProvider: Change the default behavior of the $cookies service.

ngCookies - example

angular.module('cookieStoreExample', ['ngCookies']) .controller('ExampleController', ['$cookieStore', function($cookieStore) { // Put cookie $cookieStore.put('myFavorite','oatmeal'); // Get cookie var favoriteCookie = $cookieStore.get('myFavorite'); // Removing a cookie $cookieStore.remove('myFavorite'); }]);

ngMessages

The ngMessages module provides enhanced support for displaying messages within templates

Instead of relying on JavaScript code and/or complex ng-if statements within your form template to show and hide error messages specific to the state of an input field, the ngMessages and ngMessage directives are designed to handle the complexity

ngMessages - example <form name="yourForm"> <label for="yourField"> 名稱 1</label> <input id="yourField" type="text" ng-model="field1" name="yourField" required minlength="3" /> <div ng-if="yourForm.yourField.$error">  <div ng-if=“yourForm.yourField.$error.required”> 名稱是必填 </div> <div ng-if="yourForm.yourField.$error.minlength"> 長度需要大於 3</div> </div> </form>

<form name="myForm"> <label for="myField"> 名稱 </label> <input id="myField" type="text" ng-model="field2" name="myField" required minlength="3" /> <div ng-messages="myForm.myField.$error">  <div ng-message=“required”> 名稱是必填 </div> <div ng-message="minlength"> 長度需要大於 3</div> </div> </form>

ngSanitize

The ngSanitize module provides functionality to sanitize( 清理 ) HTML.

angular.module('sanitizeExample', ['ngSanitize']) .controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {

$scope.snippet = '<p style="color:blue">an html\n' + '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' + 'snippet</p>';

$scope.deliberatelyTrustDangerousSnippet = function() { return $sce.trustAsHtml($scope.snippet); };

}]);

ngTouch

The ngTouch module provides touch events and other helpers for touch-enabled devices.

ngClick A more powerful replacement for the default ngClick designed to be used on

touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-release before sending the click event.

ngSwipeLeft, ngSwipeRight Specify custom behavior when an element is swiped to the left(right) on a

touchscreen device.

ngTouch - ngSwipeLeft, ngSwipeRight

Ex. http://plnkr.co/edit/?p=preview<div ng-show="!showActions" ng-swipe-left="showActions = true">

Some list content, like an email in the inbox </div> <div ng-show="showActions" ng-swipe-right="showActions = false">

<button ng-click="reply()">Reply</button> <button ng-click="delete()">Delete</button>

</div>

http://plnkr.co/edit/?p=preview

Technology

Angular module