Angular module

Angular Module
Peggy
2015-08-21

angular.module('myModule', [‘xxx']);
Dependencies
Application
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 htmln' +
'<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>

Angular module

More Related Content

What's hot (20)

Viewers also liked (8)

More from LearningTech (20)

Recently uploaded (20)

Angular module

Editor's Notes