SlideShare a Scribd company logo
Date:20-1-16
Reusing and Overriding Messages
In addition to prioritization, ngMessages also allows for including messages from a remote or an
inline template. This allows for generic collection of messages to be reused across multiple parts of
an application.
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-messages="myForm.myField.$error" role="alert">
<div ng-messages-include="error-messages"></div>
</div>
However, including generic messages may not be useful enough to match all input fields,
therefore, ngMessages provides the ability to override messages defined in the remote template by
redefining them within the directive container.
<!-- a generic template of error messages known as "my-custom-messages" -->
<script type="text/ng-template" id="my-custom-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<form name="myForm">
<label>
Email address
<input type="email"
id="email"
name="myEmail"
ng-model="email"
minlength="5"
required />
</label>
<!-- any ng-message elements that appear BEFORE the ng-messages-include will
override the messages present in the ng-messages-include template -->
<div ng-messages="myForm.myEmail.$error" role="alert">
<!-- this required message has overridden the template message -->
<div ng-message="required">You did not enter your email address</div>
<!-- this is a brand new message and will appear last in the prioritization -->
<div ng-message="email">Your email address is invalid</div>
<!-- and here are the generic error messages -->
<div ng-messages-include="my-custom-messages"></div>
</div>
</form>
Feel free to use other structural directives such as ng-if and ng-switch to further control what
messages are active and when. Be careful, if you place ng-message on the same element as these
structural directives, Angular may not be able to determine if a message is active or not.
Therefore it is best to place the ng-message on a child element of the structural directive.
<div ng-messages="myForm.myEmail.$error" role="alert">
<div ng-if="showRequiredError">
<div ng-message="required">Please enter something</div>
</div>
</div>
<div ng-messages="myMessages" class="my-messages" role="alert">
<div ng-message="alert" class="some-message">...</div>
<div ng-message="fail" class="some-message">...</div>
</div>
Animations
If the ngAnimate module is active within the application then
the ngMessages, ngMessage and ngMessageExp directives will trigger animations whenever any
messages are added and removed from the DOM by the ngMessages directive.
Whenever the ngMessages directive contains one or more visible messages then the .ng-
active CSS class will be added to the element. The .ng-inactive CSS class will be applied when
there are no messages present. Therefore, CSS transitions and keyframes as well as JavaScript
animations can hook into the animations whenever these classes are added/removed.
Example in a animation
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngMessages-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
<script src="animatescript.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base
href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngMessagesExample">
<style type="text/css">
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
.fade.ng-leave {
animation: my_fade_animation 0.5s linear;
-webkit-animation: my_fade_animation 0.5s linear;
}
@keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; }
}
@-webkit-keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; }
}
</style>
<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>
<br>
<div ng-show="bool1" class="fade1">
Show and hide me
</div>
<button ng-click="bool1=!bool1">Toggle</button>
<style>
.fade1.ng-hide {
transition:0.5s linear all;
opacity:0;
}
</style>
<div ng-class="{on:onOff}" class="highlight"> Highlight this box</div>
<button ng-click="onOff=!onOff">Toggle</button>
<style>
.highlight {
transition:0.5s linear all;
}
.highlight.on-add {
background:white;
}
.highlight.on {
background:yellow;
}
.highlight.on-remove {
background:black;
}
</style>
</body>
</html>
Installation
First, get the file:
 Google CDN e.g.
"//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"
Then, include angular-animate.js in your HTML:
<script src="path/to/angular.js"></script>
<script src="path/to/angular-animate.js"></script>
Finally, load the module in your application by adding it as a dependent module:
angular.module('app', ['ngAnimate']);
Directive Support
The following directives are "animation aware":
Directive SupportedAnimations
ngRepeat enter,leave andmove
ngView enterandleave
ngInclude enterandleave
ngSwitch enterandleave
ngIf enterandleave
ngClass add and remove (the CSSclass(es)present)
ngShow & ngHide add and remove (the ng-hide classvalue)
form& ngModel add and remove (dirty,pristine,valid,invalid&all other validations)
ngMessages add and remove (ng-active &ng-inactive)
ngMessage enterandleave
(More information can be found by visiting each the documentation associated with each directive.)
CSS-based Animations
CSS-based animations with ngAnimate are unique since they require no JavaScript code at all. By
using a CSS class that we reference between our HTML and CSS code we can create an animation
that will be picked up by Angular when an the underlying directive performs an operation.
The example below shows how an enter animation can be made possible on an element using ng-
if:
<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>
Notice the CSS class fade? We can now create the CSS transition code that references this 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;
}
The key thing to remember here is that, depending on the animation event (which each of the
directives above trigger depending on what's going on) two generated CSS classes will be applied to
the element; in the example above we have .ng-enter and.ng-enter-active. For CSS transitions,
the transition code must be defined within the starting CSS class (in this case .ng-enter). The
destination class is what the transition will animate towards.
If for example we wanted to create animations for leave and move (ngRepeat triggers move) then we
can do so using the same CSS naming conventions:
/* now the element will fade out before it is removed from the DOM */
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
We can also make use of CSS Keyframes by referencing the keyframe animation within the starting
CSS class:
/* there is no need to define anything inside of the destination
CSS class since the keyframe will take charge of the animation */
.fade.ng-leave {
animation: my_fade_animation 0.5s linear;
-webkit-animation: my_fade_animation 0.5s linear;
}
@keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; }
}
@-webkit-keyframes my_fade_animation {
from { opacity:1; }
to { opacity:0; }
}
Feel free also mix transitions and keyframes together as well as any other CSS classes on the same
element.
CSS Class-based Animations
Class-based animations (animations that are triggered via ngClass, ngShow, ngHide and some other
directives) have a slightly different naming convention. Class-based animations are basic enough
that a standard transition or keyframe can be referenced on the class being added and removed.
For example if we wanted to do a CSS animation for ngHide then we place an animation on the .ng-
hide CSS class:
<div ng-show="bool" class="fade">
Show and hide me
</div>
<button ng-click="bool=!bool">Toggle</button>
<style>
.fade.ng-hide {
transition:0.5s linear all;
opacity:0;
}
</style>
All that is going on here with ngShow/ngHide behind the scenes is the .ng-hide class is
added/removed (when the hidden state is valid). Since ngShow and ngHide are animation aware
then we can match up a transition and ngAnimate handles the rest.
In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods
that we can use to further decorate the animation with CSS styles.
<div ng-class="{on:onOff}" class="highlight">
Highlight this box
</div>
<button ng-click="onOff=!onOff">Toggle</button>
<style>
.highlight {
transition:0.5s linear all;
}
.highlight.on-add {
background:white;
}
.highlight.on {
background:yellow;
}
.highlight.on-remove {
background:black;
}
</style>
We can also make use of CSS keyframes by placing them within the CSS classes.
CSS Staggering Animations
A Staggering animation is a collection of animations that are issued with a slight delay in between
each successive operation resulting in a curtain-like effect. The ngAnimate module (versions >=1.2)
supports staggering animations and the stagger effect can be performed by creating a ng-EVENT-
stagger CSS class and attaching that class to the base CSS class used for the animation. The style
property expected within the stagger class can either be a transition-delay or an animation-
delay property (or both if your animation contains both transitions and keyframe animations).
.my-animation.ng-enter {
/* standard transition code */
transition: 1s linear all;
opacity:0;
}
.my-animation.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.1s;
/* As of 1.4.4, this must always be set: it signals ngAnimate
to not accidentally inherit a delay property from another CSS class */
transition-duration: 0s;
}
.my-animation.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of
ngRepeat, to use staggering animations on your own, they can be triggered by firing multiple calls to
the same event on $animate. However, the restrictions surrounding this are that each of the
elements must have the same CSS className value as well as the same parent element. A stagger
operation will also be reset if one or more animation frames have passed since the multiple calls
to $animate were fired.
The following code will issue the ng-leave-stagger event on the element provided:
var kids = parent.children();
$animate.leave(kids[0]); //stagger index=0
$animate.leave(kids[1]); //stagger index=1
$animate.leave(kids[2]); //stagger index=2
$animate.leave(kids[3]); //stagger index=3
$animate.leave(kids[4]); //stagger index=4
window.requestAnimationFrame(function() {
//stagger has reset itself
$animate.leave(kids[5]); //stagger index=0
$animate.leave(kids[6]); //stagger index=1
$scope.$digest();
});
Stagger animations are currently only supported within CSS-defined animations.
The ng-animate CSS class
When ngAnimate is animating an element it will apply the ng-animate CSS class to the element for
the duration of the animation. This is a temporary CSS class and it will be removed once the
animation is over (for both JavaScript and CSS-based animations).
Therefore, animations can be applied to an element using this temporary class directly via CSS.
.zipper.ng-animate {
transition:0.5s linear all;
}
.zipper.ng-enter {
opacity:0;
}
.zipper.ng-enter.ng-enter-active {
opacity:1;
}
.zipper.ng-leave {
opacity:1;
}
.zipper.ng-leave.ng-leave-active {
opacity:0;
}
(Note that the ng-animate CSS class is reserved and it cannot be applied on an element directly
since ngAnimate will always remove the CSS class once an animation has completed.)
The ng-[event]-prepare class
This is a special class that can be used to prevent unwanted flickering / flash of content before the
actual animation starts. The class is added as soon as an animation is initialized, but removed
before the actual animation starts (after waiting for a $digest). It is also only added
for structural animations (enter, move, and leave).
In practice, flickering can appear when nesting elements with structural animations such as ngIf into
elements that have class-based animations such as ngClass.
<div ng-class="{red: myProp}">
<div ng-class="{blue: myProp}">
<div class="message" ng-if="myProp"></div>
</div>
</div>
It is possible that during the enter animation, the .message div will be briefly visible before it starts
animating. In that case, you can add styles to the CSS that make sure the element stays hidden
before the animation starts:
.message.ng-enter-prepare {
opacity: 0;
}
JavaScript-based Animations
ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar
to CSS-based animations (where there is a shared CSS class that is referenced in our HTML code)
but in addition we need to register the JavaScript animation on the module. By making use of
the module.animation() module function we can register the animation.
Let's see an example of a enter/leave animation using ngRepeat:
<div ng-repeat="item in items" class="slide">
{{ item }}
</div>
See the slide CSS class? Let's use that class to define an animation that we'll structure in our
module code by using module.animation:
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);
}
}
}]);
The nice thing about JS-based animations is that we can inject other services and make use of
advanced animation libraries such as greensock.js and velocity.js.
If our animation code class-based (meaning that something
like ngClass, ngHide and ngShow triggers it) then we can still define our animations inside of the
same registered animation, however, the function input arguments are a bit different:
<div ng-class="color" class="colorful">
this box is moody
</div>
<button ng-click="color='red'">Change to red</button>
<button ng-click="color='blue'">Change to blue</button>
<button ng-click="color='green'">Change to green</button>
myModule.animation('.colorful', [function() {
return {
addClass: function(element, className, doneFn) {
// do some cool animation and call the doneFn
},
removeClass: function(element, className, doneFn) {
// do some cool animation and call the doneFn
},
setClass: function(element, addedClass, removedClass, doneFn) {
// do some cool animation and call the doneFn
}
}
}]);
CSS + JS Animations Together
AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations
more flexible. However, unlike earlier versions of Angular, defining CSS and JS animations to work
off of the same CSS class will not work anymore. Therefore the example below will only result in JS
animations taking charge of the animation:
<div ng-if="bool" class="slide">
Slide in and out
</div>
myModule.animation('.slide', [function() {
return {
enter: function(element, doneFn) {
jQuery(element).slideIn(1000, doneFn);
}
}
}]);
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
}
Does this mean that CSS and JS animations cannot be used together? Do JS-based animations
always have higher priority? We can make up for the lack of CSS animations by using
the $animateCss service to trigger our own tweaked-out, CSS-based animations directly from our
own JS-based animation code:
myModule.animation('.slide', ['$animateCss', function($animateCss) {
return {
enter: function(element) {
// this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
return $animateCss(element, {
event: 'enter',
structural: true
});
}
}
}]);
The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and
we don't need to rely on a 3rd-party animation framework.
The $animateCss service is very powerful since we can feed in all kinds of extra properties that will
be evaluated and fed into a CSS transition or keyframe animation. For example if we wanted to
animate the height of an element while adding and removing classes then we can do so by providing
that data into $animateCss directly:
myModule.animation('.slide', ['$animateCss', function($animateCss) {
return {
enter: function(element) {
return $animateCss(element, {
event: 'enter',
structural: true,
addClass: 'maroon-setting',
from: { height:0 },
to: { height: 200 }
});
}
}
}]);
Now we can fill in the rest via our transition CSS code:
/* the transition tells ngAnimate to make the animation happen */
.slide.ng-enter { transition:0.5s linear all; }
/* this extra CSS class will be absorbed into the transition
since the $animateCss code is adding the class */
.maroon-setting { background:red; }
And $animateCss will figure out the rest. Just make sure to have the done() callback fire
the doneFn function to signal when the animation is over.
To learn more about what's possible be sure to visit the $animateCss service.
Animation Anchoring (via ng-animate-ref)
ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between
structural areas of an application (like views) by pairing up elements using an attribute called ng-
animate-ref.
Let's say for example we have two views that are managed by ng-view and we want to show that
there is a relationship between two components situated in within these views. By using the ng-
animate-ref attribute we can identify that the two components are paired together and we can then
attach an animation, which is triggered when the view changes.
Say for example we have the following template code:
<!-- index.html -->
<div ng-view class="view-animation">
</div>
<!-- home.html -->
<a href="#/banner-page">
<img src="./banner.jpg" class="banner" ng-animate-ref="banner">
</a>
<!-- banner-page.html -->
<img src="./banner.jpg" class="banner" ng-animate-ref="banner">
Now, when the view changes (once the link is clicked), ngAnimate will examine the HTML contents
to see if there is a match reference between any components in the view that is leaving and the view
that is entering. It will scan both the view which is being removed (leave) and inserted (enter) to see
if there are any paired DOM elements that contain a matching ref value.
The two images match since they share the same ref value. ngAnimate will now create a transport
element (which is a clone of the first image element) and it will then attempt to animate to the
position of the second image element in the next view. For the animation to work a special CSS
class called ng-anchor will be added to the transported element.
We can now attach a transition onto the .banner.ng-anchor CSS class and then ngAnimate will
handle the entire transition for us as well as the addition and removal of any changes of CSS
classes between the elements:
.banner.ng-anchor {
/* this animation will last for 1 second since there are
two phases to the animation (an `in` and an `out` phase) */
transition:0.5s linear all;
}
We also must include animations for the views that are being entered and removed (otherwise
anchoring wouldn't be possible since the new view would be inserted right away).
.view-animation.ng-enter, .view-animation.ng-leave {
transition:0.5s linear all;
position:fixed;
left:0;
top:0;
width:100%;
}
.view-animation.ng-enter {
transform:translateX(100%);
}
.view-animation.ng-leave,
.view-animation.ng-enter.ng-enter-active {
transform:translateX(0%);
}
.view-animation.ng-leave.ng-leave-active {
transform:translateX(-100%);
}
Now we can jump back to the anchor animation. When the animation happens, there are two stages
that occur: an out and an in stage. The out stage happens first and that is when the element is
animated away from its origin. Once that animation is over then the instage occurs which animates
the element to its destination. The reason why there are two animations is to give enough time for
the enter animation on the new element to be ready.
The example above sets up a transition for both the in and out phases, but we can also target the
out or in phases directly viang-anchor-out and ng-anchor-in.
.banner.ng-anchor-out {
transition: 0.5s linear all;
/* the scale will be applied during the out animation,
but will be animated away when the in animation runs */
transform: scale(1.2);
}
.banner.ng-anchor-in {
transition: 1s linear all;
}
Anchoring Demo
Edit in Plunker
index.htmlscript.jshome.htmlprofile.htmlanimations.css
<a href="#!/">Home</a>
<hr />
<div class="view-container">
<div ng-view class="view"></div>
</div>
How is the element transported?
When an anchor animation occurs, ngAnimate will clone the starting element and position it exactly
where the starting element is located on screen via absolute positioning. The cloned element will be
placed inside of the root element of the application (where ng-app was defined) and all of the CSS
classes of the starting element will be applied. The element will then animate into
the out and in animations and will eventually reach the coordinates and match the dimensions of
the destination element. During the entire animation a CSS class of.ng-animate-shim will be
applied to both the starting and destination elements in order to hide them from being visible (th e
CSS styling for the class is: visibility:hidden). Once the anchor reaches its destination then it will
be removed and the destination element will become visible since the shim class will be removed.
How is the morphing handled?
CSS Anchoring relies on transitions and keyframes and the internal code is intelligent enough to
figure out what CSS classes differ between the starting element and the destination element. These
different CSS classes will be added/removed on the anchor element and a transition will be applied
(the transition that is provided in the anchor class). Long story short, ngAnimate will figure out what
classes to add and remove which will make the transition of the element as smooth and automatic
as possible. Be sure to use simple CSS classes that do not rely on DOM nesting structure so that
the anchor element appears the same as the starting element (since the cloned element is placed
inside of root element which is likely close to the body element).
Note that if the root element is on the <html> element then the cloned node will be placed inside of
body.
Using $animate in your directive code
So far we've explored how to feed in animations into an Angular application, but how do we trigger
animations within our own directives in our application? By injecting the $animate service into our
directive code, we can trigger structural and class-based hooks which can then be consumed by
animations. Let's imagine we have a greeting box that shows and hides itself when the data changes
<greeting-box active="onOrOff">Hi there</greeting-box>
ngModule.directive('greetingBox', ['$animate', function($animate) {
return function(scope, element, attrs) {
attrs.$observe('active', function(value) {
value ? $animate.addClass(element, 'on') : $animate.removeClass(element, 'on');
});
});
}]);
Now the on CSS class is added and removed on the greeting box component. Now if we add a CSS
class on top of the greeting box element in our HTML code then we can trigger a CSS or JS
animation to happen.
/* normally we would create a CSS class to reference on the element */
greeting-box.on { transition:0.5s linear all; background:green; color:white; }
The $animate service contains a variety of other methods like enter, leave, animate and setClass.
To learn more about what's possible be sure to visit the $animate service API page.
Callbacks and Promises
When $animate is called it returns a promise that can be used to capture when the animation has
ended. Therefore if we were to trigger an animation (within our directive code) then we can continue
performing directive and scope related activities after the animation has ended by chaining onto the
returned promise that animation method returns.
// somewhere within the depths of the directive
$animate.enter(element, parent).then(function() {
//the animation has completed
});
(Note that earlier versions of Angular prior to v1.4 required the promise code to be wrapped
using $scope.$apply(...). This is not the case anymore.)
In addition to the animation promise, we can also make use of animation-related callbacks within our
directives and controller code by registering an event listener using the $animate service. Let's say
for example that an animation was triggered on our view routing controller to hook into that:
ngModule.controller('HomePageController', ['$animate', function($animate) {
$animate.on('enter', ngViewElement, function(element) {
// the animation for this route has completed
}]);
}])
(Note that you will need to trigger a digest within the callback to get angular to notice any scope-
related changes.)
Module Components
Directive
Name Description
ngAnimateChildren ngAnimateChildren allows you to specify that children of this element
should animate even if any of the children's parents are currently animating.
By default, when an element has an active enter, leave, or move (structural)
animation, child elements that also have an active structural animation are
not animated.
ngAnimateSwap ngAnimateSwap is a animation-oriented directive that allows for the
container to be removed and entered in whenever the associated expression
changes. A common usecase for this directive is a rotating banner or slider
component which contains one image being present at a time. When the
active image changes then the old image will perform a leave animation and
the new element will be inserted via an enter animation.
Service
Name Description
$animateCss The $animateCss service is a useful utility to trigger customized CSS-based
transitions/keyframes from a JavaScript-based animation or directly from a
directive. The purpose of $animateCss is NOT to side-step how $animate and
ngAnimate work, but the goal is to allow pre-existing animations or directives to
create more complex animations that can be purely driven using CSS code.
$animate The ngAnimate $animate service documentation is the same for the
core $animate service.
Example
input[datetime-local]
1. - inputinmodule ng
<script>
angular.module('dateExample', [])
.controller('DateController', ['$scope', function($scope) {
$scope.example = {
value: new Date(2010, 11, 28, 14, 57)
};
}]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
<label for="exampleInput">Pick a date between in 2013:</label>
<input type="datetime-local" id="exampleInput" name="input" ng-
model="example.value"
placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-
12-31T00:00:00" required />
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.datetimelocal">
Not a valid date!</span>
</div>
<tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
Protectot.js
var value = element(by.binding('example.value | date: "yyyy-MM-
ddTHH:mm:ss"'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('example.value'));
// currently protractor/webdriver does not support
// sending keys to all known HTML5 input controls
// for various browsers (https://github.com/angular/protractor/issues/562).
function setInput(val) {
// set the value of the element and force validation.
var scr = "var ipt = document.getElementById('exampleInput'); " +
"ipt.value = '" + val + "';" +
"angular.element(ipt).scope().$apply(function(s) {
s.myForm[ipt.name].$setViewValue('" + val + "'); });";
browser.executeScript(scr);
}
it('should initialize to model', function() {
expect(value.getText()).toContain('2010-12-28T14:57:00');
expect(valid.getText()).toContain('myForm.input.$valid = true');
});
it('should be invalid if empty', function() {
setInput('');
expect(value.getText()).toEqual('value =');
expect(valid.getText()).toContain('myForm.input.$valid = false');
});
it('should be invalid if over max', function() {
setInput('2015-01-01T23:59:00');
expect(value.getText()).toContain('');
expect(valid.getText()).toContain('myForm.input.$valid = false');
});
Reference site address https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

More Related Content

Viewers also liked

George Cooper CV Sept 2016 Final
George Cooper CV Sept 2016 FinalGeorge Cooper CV Sept 2016 Final
George Cooper CV Sept 2016 Final
George William Cooper
 
kerons's resume 2
kerons's resume 2kerons's resume 2
kerons's resume 2
Keron Crawford
 
Tutorial foro
Tutorial foroTutorial foro
Tutorial foro
TutorialesCampusEASP
 
Maratón de lectura
Maratón de lecturaMaratón de lectura
Maratón de lectura
Andres Hernandez
 
Interview with Delaware North CMO Todd Merry
Interview with Delaware North CMO Todd MerryInterview with Delaware North CMO Todd Merry
Interview with Delaware North CMO Todd Merry
Jared Frank
 
The eZ Platform view layer – eZ Conference 2016
The eZ Platform view layer – eZ Conference 2016The eZ Platform view layer – eZ Conference 2016
The eZ Platform view layer – eZ Conference 2016
Bertrand Dunogier
 
Etika pelayanan kefarmasian
Etika pelayanan kefarmasianEtika pelayanan kefarmasian
Etika pelayanan kefarmasian
khrisnaagung77
 
What impacts customer loyalty
What impacts customer loyaltyWhat impacts customer loyalty
What impacts customer loyalty
Kiren Lakhani
 
Krisis crimea-sebuah-analisis
Krisis crimea-sebuah-analisisKrisis crimea-sebuah-analisis
Krisis crimea-sebuah-analisis
Kresno Aji
 
Shared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWSShared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWS
Akshay Mathur
 
Ver participantes y Envío de mensajes en moodle
Ver participantes y Envío de mensajes en moodleVer participantes y Envío de mensajes en moodle
Ver participantes y Envío de mensajes en moodle
TutorialesCampusEASP
 
Internship review (Civil Engineering)
Internship review (Civil Engineering)Internship review (Civil Engineering)
Internship review (Civil Engineering)
Syeda Nusrath Fathima
 
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerahPermen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
Ulfah Hanum
 
Sitecore experience platform session 1
Sitecore experience platform   session 1Sitecore experience platform   session 1
Sitecore experience platform session 1
Anindita Bhattacharya
 
La Galatea
La Galatea   La Galatea
La Galatea
isarevi
 
La Galatea
La Galatea   La Galatea
La Galatea
isarevi
 
How Cloud Enhances Agile Software Development
How Cloud Enhances Agile Software DevelopmentHow Cloud Enhances Agile Software Development
How Cloud Enhances Agile Software Development
Suyati Technologies
 

Viewers also liked (17)

George Cooper CV Sept 2016 Final
George Cooper CV Sept 2016 FinalGeorge Cooper CV Sept 2016 Final
George Cooper CV Sept 2016 Final
 
kerons's resume 2
kerons's resume 2kerons's resume 2
kerons's resume 2
 
Tutorial foro
Tutorial foroTutorial foro
Tutorial foro
 
Maratón de lectura
Maratón de lecturaMaratón de lectura
Maratón de lectura
 
Interview with Delaware North CMO Todd Merry
Interview with Delaware North CMO Todd MerryInterview with Delaware North CMO Todd Merry
Interview with Delaware North CMO Todd Merry
 
The eZ Platform view layer – eZ Conference 2016
The eZ Platform view layer – eZ Conference 2016The eZ Platform view layer – eZ Conference 2016
The eZ Platform view layer – eZ Conference 2016
 
Etika pelayanan kefarmasian
Etika pelayanan kefarmasianEtika pelayanan kefarmasian
Etika pelayanan kefarmasian
 
What impacts customer loyalty
What impacts customer loyaltyWhat impacts customer loyalty
What impacts customer loyalty
 
Krisis crimea-sebuah-analisis
Krisis crimea-sebuah-analisisKrisis crimea-sebuah-analisis
Krisis crimea-sebuah-analisis
 
Shared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWSShared Security Responsibility Model of AWS
Shared Security Responsibility Model of AWS
 
Ver participantes y Envío de mensajes en moodle
Ver participantes y Envío de mensajes en moodleVer participantes y Envío de mensajes en moodle
Ver participantes y Envío de mensajes en moodle
 
Internship review (Civil Engineering)
Internship review (Civil Engineering)Internship review (Civil Engineering)
Internship review (Civil Engineering)
 
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerahPermen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
Permen no.19 th_2016 ttg pedoman pengelolaan barang milik daerah
 
Sitecore experience platform session 1
Sitecore experience platform   session 1Sitecore experience platform   session 1
Sitecore experience platform session 1
 
La Galatea
La Galatea   La Galatea
La Galatea
 
La Galatea
La Galatea   La Galatea
La Galatea
 
How Cloud Enhances Agile Software Development
How Cloud Enhances Agile Software DevelopmentHow Cloud Enhances Agile Software Development
How Cloud Enhances Agile Software Development
 

Similar to Angular js animate shashikant bhongale -20-7-16

Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
Visual Engineering
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Tailwind Animation: How to Make Eye-Catching Websites
Tailwind Animation: How to Make Eye-Catching WebsitesTailwind Animation: How to Make Eye-Catching Websites
Tailwind Animation: How to Make Eye-Catching Websites
RonDosh
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
Celeste Horgan
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
Mindy McAdams
 
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your displayDrupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Bram Goffings
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Guillaume Kossi
 
Angular animate
Angular animateAngular animate
Angular animate
Yating Chatiron
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
Peter Drinnan
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
Vivek Rajan
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
Tim Hettler
 
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
Jaime Martínez
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
William Myers
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 
Css animation
Css animationCss animation
Css animation
Aaron King
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
 
html5_css3
html5_css3html5_css3
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
Flavius-Radu Demian
 
Explore the Tailwind Hidden Utility for Great Design Control - Blogs
Explore the Tailwind Hidden Utility for Great Design Control - BlogsExplore the Tailwind Hidden Utility for Great Design Control - Blogs
Explore the Tailwind Hidden Utility for Great Design Control - Blogs
RonDosh
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
 

Similar to Angular js animate shashikant bhongale -20-7-16 (20)

Workshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effectsWorkshop 18: CSS Animations & cool effects
Workshop 18: CSS Animations & cool effects
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
Tailwind Animation: How to Make Eye-Catching Websites
Tailwind Animation: How to Make Eye-Catching WebsitesTailwind Animation: How to Make Eye-Catching Websites
Tailwind Animation: How to Make Eye-Catching Websites
 
Landing Pages 101
Landing Pages 101Landing Pages 101
Landing Pages 101
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
Drupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your displayDrupalcamp Leuven 2013 - Display Suite, the future of your display
Drupalcamp Leuven 2013 - Display Suite, the future of your display
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
 
Angular animate
Angular animateAngular animate
Angular animate
 
AngularJS for Legacy Apps
AngularJS for Legacy AppsAngularJS for Legacy Apps
AngularJS for Legacy Apps
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
 
SMACSS Workshop
SMACSS WorkshopSMACSS Workshop
SMACSS Workshop
 
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
Enhance your WordPress development with Twig through Clarkson - WordCamp Barc...
 
Pfnp slides
Pfnp slidesPfnp slides
Pfnp slides
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
 
Css animation
Css animationCss animation
Css animation
 
I Can't Believe It's Not Flash
I Can't Believe It's Not FlashI Can't Believe It's Not Flash
I Can't Believe It's Not Flash
 
html5_css3
html5_css3html5_css3
html5_css3
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
Explore the Tailwind Hidden Utility for Great Design Control - Blogs
Explore the Tailwind Hidden Utility for Great Design Control - BlogsExplore the Tailwind Hidden Utility for Great Design Control - Blogs
Explore the Tailwind Hidden Utility for Great Design Control - Blogs
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 

Recently uploaded

MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
Colégio Santa Teresinha
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
chanes7
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
amberjdewit93
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
WaniBasim
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
Israel Genealogy Research Association
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
heathfieldcps1
 
Assessment and Planning in Educational technology.pptx
Assessment and Planning in Educational technology.pptxAssessment and Planning in Educational technology.pptx
Assessment and Planning in Educational technology.pptx
Kavitha Krishnan
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
adhitya5119
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
TechSoup
 
Smart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICTSmart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICT
simonomuemu
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
eBook.com.bd (প্রয়োজনীয় বাংলা বই)
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
camakaiclarkmusic
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
adhitya5119
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
Nguyen Thanh Tu Collection
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
Peter Windle
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
Academy of Science of South Africa
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Mohd Adib Abd Muin, Senior Lecturer at Universiti Utara Malaysia
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
RitikBhardwaj56
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Akanksha trivedi rama nursing college kanpur.
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
History of Stoke Newington
 

Recently uploaded (20)

MARY JANE WILSON, A “BOA MÃE” .
MARY JANE WILSON, A “BOA MÃE”           .MARY JANE WILSON, A “BOA MÃE”           .
MARY JANE WILSON, A “BOA MÃE” .
 
Digital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments UnitDigital Artifact 1 - 10VCD Environments Unit
Digital Artifact 1 - 10VCD Environments Unit
 
Digital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental DesignDigital Artefact 1 - Tiny Home Environmental Design
Digital Artefact 1 - Tiny Home Environmental Design
 
Liberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdfLiberal Approach to the Study of Indian Politics.pdf
Liberal Approach to the Study of Indian Politics.pdf
 
The Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collectionThe Diamonds of 2023-2024 in the IGRA collection
The Diamonds of 2023-2024 in the IGRA collection
 
The basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptxThe basics of sentences session 5pptx.pptx
The basics of sentences session 5pptx.pptx
 
Assessment and Planning in Educational technology.pptx
Assessment and Planning in Educational technology.pptxAssessment and Planning in Educational technology.pptx
Assessment and Planning in Educational technology.pptx
 
Main Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docxMain Java[All of the Base Concepts}.docx
Main Java[All of the Base Concepts}.docx
 
Introduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp NetworkIntroduction to AI for Nonprofits with Tapp Network
Introduction to AI for Nonprofits with Tapp Network
 
Smart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICTSmart-Money for SMC traders good time and ICT
Smart-Money for SMC traders good time and ICT
 
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdfবাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
বাংলাদেশ অর্থনৈতিক সমীক্ষা (Economic Review) ২০২৪ UJS App.pdf
 
CACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdfCACJapan - GROUP Presentation 1- Wk 4.pdf
CACJapan - GROUP Presentation 1- Wk 4.pdf
 
Advanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docxAdvanced Java[Extra Concepts, Not Difficult].docx
Advanced Java[Extra Concepts, Not Difficult].docx
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 CẢ NĂM - GLOBAL SUCCESS - NĂM HỌC 2023-2024 (CÓ FI...
 
A Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in EducationA Strategic Approach: GenAI in Education
A Strategic Approach: GenAI in Education
 
South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)South African Journal of Science: Writing with integrity workshop (2024)
South African Journal of Science: Writing with integrity workshop (2024)
 
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptxChapter 4 - Islamic Financial Institutions in Malaysia.pptx
Chapter 4 - Islamic Financial Institutions in Malaysia.pptx
 
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...The simplified electron and muon model, Oscillating Spacetime: The Foundation...
The simplified electron and muon model, Oscillating Spacetime: The Foundation...
 
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama UniversityNatural birth techniques - Mrs.Akanksha Trivedi Rama University
Natural birth techniques - Mrs.Akanksha Trivedi Rama University
 
The History of Stoke Newington Street Names
The History of Stoke Newington Street NamesThe History of Stoke Newington Street Names
The History of Stoke Newington Street Names
 

Angular js animate shashikant bhongale -20-7-16

  • 1. Date:20-1-16 Reusing and Overriding Messages In addition to prioritization, ngMessages also allows for including messages from a remote or an inline template. This allows for generic collection of messages to be reused across multiple parts of an application. <script type="text/ng-template" id="error-messages"> <div ng-message="required">This field is required</div> <div ng-message="minlength">This field is too short</div> </script> <div ng-messages="myForm.myField.$error" role="alert"> <div ng-messages-include="error-messages"></div> </div> However, including generic messages may not be useful enough to match all input fields, therefore, ngMessages provides the ability to override messages defined in the remote template by redefining them within the directive container. <!-- a generic template of error messages known as "my-custom-messages" --> <script type="text/ng-template" id="my-custom-messages"> <div ng-message="required">This field is required</div> <div ng-message="minlength">This field is too short</div> </script> <form name="myForm"> <label> Email address <input type="email" id="email" name="myEmail"
  • 2. ng-model="email" minlength="5" required /> </label> <!-- any ng-message elements that appear BEFORE the ng-messages-include will override the messages present in the ng-messages-include template --> <div ng-messages="myForm.myEmail.$error" role="alert"> <!-- this required message has overridden the template message --> <div ng-message="required">You did not enter your email address</div> <!-- this is a brand new message and will appear last in the prioritization --> <div ng-message="email">Your email address is invalid</div> <!-- and here are the generic error messages --> <div ng-messages-include="my-custom-messages"></div> </div> </form> Feel free to use other structural directives such as ng-if and ng-switch to further control what messages are active and when. Be careful, if you place ng-message on the same element as these structural directives, Angular may not be able to determine if a message is active or not. Therefore it is best to place the ng-message on a child element of the structural directive. <div ng-messages="myForm.myEmail.$error" role="alert"> <div ng-if="showRequiredError"> <div ng-message="required">Please enter something</div> </div> </div> <div ng-messages="myMessages" class="my-messages" role="alert"> <div ng-message="alert" class="some-message">...</div> <div ng-message="fail" class="some-message">...</div> </div>
  • 3. Animations If the ngAnimate module is active within the application then the ngMessages, ngMessage and ngMessageExp directives will trigger animations whenever any messages are added and removed from the DOM by the ngMessages directive. Whenever the ngMessages directive contains one or more visible messages then the .ng- active CSS class will be added to the element. The .ng-inactive CSS class will be applied when there are no messages present. Therefore, CSS transitions and keyframes as well as JavaScript animations can hook into the animations whenever these classes are added/removed. Example in a animation <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-ngMessages-directive-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script> <script src="animatescript.js"></script> <script type="text/javascript"> angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />')); </script> </head> <body ng-app="ngMessagesExample"> <style type="text/css"> .fade.ng-enter { transition:0.5s linear all; opacity:0; } .fade.ng-enter.ng-enter-active { opacity:1; } .fade.ng-leave {
  • 4. transition:0.5s linear all; opacity:1; } .fade.ng-leave.ng-leave-active { opacity:0; } .fade.ng-leave { animation: my_fade_animation 0.5s linear; -webkit-animation: my_fade_animation 0.5s linear; } @keyframes my_fade_animation { from { opacity:1; } to { opacity:0; } } @-webkit-keyframes my_fade_animation { from { opacity:1; } to { opacity:0; } } </style> <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> <br> <div ng-show="bool1" class="fade1"> Show and hide me </div> <button ng-click="bool1=!bool1">Toggle</button> <style> .fade1.ng-hide { transition:0.5s linear all; opacity:0; } </style> <div ng-class="{on:onOff}" class="highlight"> Highlight this box</div>
  • 5. <button ng-click="onOff=!onOff">Toggle</button> <style> .highlight { transition:0.5s linear all; } .highlight.on-add { background:white; } .highlight.on { background:yellow; } .highlight.on-remove { background:black; } </style> </body> </html> Installation First, get the file:  Google CDN e.g. "//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js" Then, include angular-animate.js in your HTML: <script src="path/to/angular.js"></script> <script src="path/to/angular-animate.js"></script> Finally, load the module in your application by adding it as a dependent module: angular.module('app', ['ngAnimate']);
  • 6. Directive Support The following directives are "animation aware": Directive SupportedAnimations ngRepeat enter,leave andmove ngView enterandleave ngInclude enterandleave ngSwitch enterandleave ngIf enterandleave ngClass add and remove (the CSSclass(es)present) ngShow & ngHide add and remove (the ng-hide classvalue) form& ngModel add and remove (dirty,pristine,valid,invalid&all other validations) ngMessages add and remove (ng-active &ng-inactive) ngMessage enterandleave (More information can be found by visiting each the documentation associated with each directive.)
  • 7. CSS-based Animations CSS-based animations with ngAnimate are unique since they require no JavaScript code at all. By using a CSS class that we reference between our HTML and CSS code we can create an animation that will be picked up by Angular when an the underlying directive performs an operation. The example below shows how an enter animation can be made possible on an element using ng- if: <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> Notice the CSS class fade? We can now create the CSS transition code that references this 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; } The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two generated CSS classes will be applied to the element; in the example above we have .ng-enter and.ng-enter-active. For CSS transitions, the transition code must be defined within the starting CSS class (in this case .ng-enter). The destination class is what the transition will animate towards. If for example we wanted to create animations for leave and move (ngRepeat triggers move) then we can do so using the same CSS naming conventions: /* now the element will fade out before it is removed from the DOM */
  • 8. .fade.ng-leave { transition:0.5s linear all; opacity:1; } .fade.ng-leave.ng-leave-active { opacity:0; } We can also make use of CSS Keyframes by referencing the keyframe animation within the starting CSS class: /* there is no need to define anything inside of the destination CSS class since the keyframe will take charge of the animation */ .fade.ng-leave { animation: my_fade_animation 0.5s linear; -webkit-animation: my_fade_animation 0.5s linear; } @keyframes my_fade_animation { from { opacity:1; } to { opacity:0; } } @-webkit-keyframes my_fade_animation { from { opacity:1; } to { opacity:0; } } Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element. CSS Class-based Animations Class-based animations (animations that are triggered via ngClass, ngShow, ngHide and some other directives) have a slightly different naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added and removed.
  • 9. For example if we wanted to do a CSS animation for ngHide then we place an animation on the .ng- hide CSS class: <div ng-show="bool" class="fade"> Show and hide me </div> <button ng-click="bool=!bool">Toggle</button> <style> .fade.ng-hide { transition:0.5s linear all; opacity:0; } </style> All that is going on here with ngShow/ngHide behind the scenes is the .ng-hide class is added/removed (when the hidden state is valid). Since ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest. In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation with CSS styles. <div ng-class="{on:onOff}" class="highlight"> Highlight this box </div> <button ng-click="onOff=!onOff">Toggle</button> <style> .highlight { transition:0.5s linear all; } .highlight.on-add { background:white; } .highlight.on { background:yellow; }
  • 10. .highlight.on-remove { background:black; } </style> We can also make use of CSS keyframes by placing them within the CSS classes. CSS Staggering Animations A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be performed by creating a ng-EVENT- stagger CSS class and attaching that class to the base CSS class used for the animation. The style property expected within the stagger class can either be a transition-delay or an animation- delay property (or both if your animation contains both transitions and keyframe animations). .my-animation.ng-enter { /* standard transition code */ transition: 1s linear all; opacity:0; } .my-animation.ng-enter-stagger { /* this will have a 100ms delay between each successive leave animation */ transition-delay: 0.1s; /* As of 1.4.4, this must always be set: it signals ngAnimate to not accidentally inherit a delay property from another CSS class */ transition-duration: 0s; } .my-animation.ng-enter.ng-enter-active { /* standard transition styles */ opacity:1; } Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this are that each of the
  • 11. elements must have the same CSS className value as well as the same parent element. A stagger operation will also be reset if one or more animation frames have passed since the multiple calls to $animate were fired. The following code will issue the ng-leave-stagger event on the element provided: var kids = parent.children(); $animate.leave(kids[0]); //stagger index=0 $animate.leave(kids[1]); //stagger index=1 $animate.leave(kids[2]); //stagger index=2 $animate.leave(kids[3]); //stagger index=3 $animate.leave(kids[4]); //stagger index=4 window.requestAnimationFrame(function() { //stagger has reset itself $animate.leave(kids[5]); //stagger index=0 $animate.leave(kids[6]); //stagger index=1 $scope.$digest(); }); Stagger animations are currently only supported within CSS-defined animations. The ng-animate CSS class When ngAnimate is animating an element it will apply the ng-animate CSS class to the element for the duration of the animation. This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations). Therefore, animations can be applied to an element using this temporary class directly via CSS. .zipper.ng-animate { transition:0.5s linear all; } .zipper.ng-enter { opacity:0; }
  • 12. .zipper.ng-enter.ng-enter-active { opacity:1; } .zipper.ng-leave { opacity:1; } .zipper.ng-leave.ng-leave-active { opacity:0; } (Note that the ng-animate CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove the CSS class once an animation has completed.) The ng-[event]-prepare class This is a special class that can be used to prevent unwanted flickering / flash of content before the actual animation starts. The class is added as soon as an animation is initialized, but removed before the actual animation starts (after waiting for a $digest). It is also only added for structural animations (enter, move, and leave). In practice, flickering can appear when nesting elements with structural animations such as ngIf into elements that have class-based animations such as ngClass. <div ng-class="{red: myProp}"> <div ng-class="{blue: myProp}"> <div class="message" ng-if="myProp"></div> </div> </div> It is possible that during the enter animation, the .message div will be briefly visible before it starts animating. In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts: .message.ng-enter-prepare { opacity: 0; }
  • 13. JavaScript-based Animations ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the module.animation() module function we can register the animation. Let's see an example of a enter/leave animation using ngRepeat: <div ng-repeat="item in items" class="slide"> {{ item }} </div> See the slide CSS class? Let's use that class to define an animation that we'll structure in our module code by using module.animation: 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); } }
  • 14. }]); The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as greensock.js and velocity.js. If our animation code class-based (meaning that something like ngClass, ngHide and ngShow triggers it) then we can still define our animations inside of the same registered animation, however, the function input arguments are a bit different: <div ng-class="color" class="colorful"> this box is moody </div> <button ng-click="color='red'">Change to red</button> <button ng-click="color='blue'">Change to blue</button> <button ng-click="color='green'">Change to green</button> myModule.animation('.colorful', [function() { return { addClass: function(element, className, doneFn) { // do some cool animation and call the doneFn }, removeClass: function(element, className, doneFn) { // do some cool animation and call the doneFn }, setClass: function(element, addedClass, removedClass, doneFn) { // do some cool animation and call the doneFn } } }]); CSS + JS Animations Together AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of Angular, defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in JS animations taking charge of the animation:
  • 15. <div ng-if="bool" class="slide"> Slide in and out </div> myModule.animation('.slide', [function() { return { enter: function(element, doneFn) { jQuery(element).slideIn(1000, doneFn); } } }]); .slide.ng-enter { transition:0.5s linear all; transform:translateY(-100px); } .slide.ng-enter.ng-enter-active { transform:translateY(0); } Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the lack of CSS animations by using the $animateCss service to trigger our own tweaked-out, CSS-based animations directly from our own JS-based animation code: myModule.animation('.slide', ['$animateCss', function($animateCss) { return { enter: function(element) { // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`. return $animateCss(element, { event: 'enter', structural: true }); } } }]);
  • 16. The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework. The $animateCss service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that data into $animateCss directly: myModule.animation('.slide', ['$animateCss', function($animateCss) { return { enter: function(element) { return $animateCss(element, { event: 'enter', structural: true, addClass: 'maroon-setting', from: { height:0 }, to: { height: 200 } }); } } }]); Now we can fill in the rest via our transition CSS code: /* the transition tells ngAnimate to make the animation happen */ .slide.ng-enter { transition:0.5s linear all; } /* this extra CSS class will be absorbed into the transition since the $animateCss code is adding the class */ .maroon-setting { background:red; } And $animateCss will figure out the rest. Just make sure to have the done() callback fire the doneFn function to signal when the animation is over. To learn more about what's possible be sure to visit the $animateCss service.
  • 17. Animation Anchoring (via ng-animate-ref) ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between structural areas of an application (like views) by pairing up elements using an attribute called ng- animate-ref. Let's say for example we have two views that are managed by ng-view and we want to show that there is a relationship between two components situated in within these views. By using the ng- animate-ref attribute we can identify that the two components are paired together and we can then attach an animation, which is triggered when the view changes. Say for example we have the following template code: <!-- index.html --> <div ng-view class="view-animation"> </div> <!-- home.html --> <a href="#/banner-page"> <img src="./banner.jpg" class="banner" ng-animate-ref="banner"> </a> <!-- banner-page.html --> <img src="./banner.jpg" class="banner" ng-animate-ref="banner"> Now, when the view changes (once the link is clicked), ngAnimate will examine the HTML contents to see if there is a match reference between any components in the view that is leaving and the view that is entering. It will scan both the view which is being removed (leave) and inserted (enter) to see if there are any paired DOM elements that contain a matching ref value. The two images match since they share the same ref value. ngAnimate will now create a transport element (which is a clone of the first image element) and it will then attempt to animate to the position of the second image element in the next view. For the animation to work a special CSS class called ng-anchor will be added to the transported element. We can now attach a transition onto the .banner.ng-anchor CSS class and then ngAnimate will handle the entire transition for us as well as the addition and removal of any changes of CSS classes between the elements: .banner.ng-anchor {
  • 18. /* this animation will last for 1 second since there are two phases to the animation (an `in` and an `out` phase) */ transition:0.5s linear all; } We also must include animations for the views that are being entered and removed (otherwise anchoring wouldn't be possible since the new view would be inserted right away). .view-animation.ng-enter, .view-animation.ng-leave { transition:0.5s linear all; position:fixed; left:0; top:0; width:100%; } .view-animation.ng-enter { transform:translateX(100%); } .view-animation.ng-leave, .view-animation.ng-enter.ng-enter-active { transform:translateX(0%); } .view-animation.ng-leave.ng-leave-active { transform:translateX(-100%); } Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur: an out and an in stage. The out stage happens first and that is when the element is animated away from its origin. Once that animation is over then the instage occurs which animates the element to its destination. The reason why there are two animations is to give enough time for the enter animation on the new element to be ready. The example above sets up a transition for both the in and out phases, but we can also target the out or in phases directly viang-anchor-out and ng-anchor-in. .banner.ng-anchor-out { transition: 0.5s linear all;
  • 19. /* the scale will be applied during the out animation, but will be animated away when the in animation runs */ transform: scale(1.2); } .banner.ng-anchor-in { transition: 1s linear all; } Anchoring Demo Edit in Plunker index.htmlscript.jshome.htmlprofile.htmlanimations.css <a href="#!/">Home</a> <hr /> <div class="view-container"> <div ng-view class="view"></div> </div> How is the element transported? When an anchor animation occurs, ngAnimate will clone the starting element and position it exactly where the starting element is located on screen via absolute positioning. The cloned element will be placed inside of the root element of the application (where ng-app was defined) and all of the CSS classes of the starting element will be applied. The element will then animate into the out and in animations and will eventually reach the coordinates and match the dimensions of the destination element. During the entire animation a CSS class of.ng-animate-shim will be applied to both the starting and destination elements in order to hide them from being visible (th e CSS styling for the class is: visibility:hidden). Once the anchor reaches its destination then it will be removed and the destination element will become visible since the shim class will be removed. How is the morphing handled? CSS Anchoring relies on transitions and keyframes and the internal code is intelligent enough to figure out what CSS classes differ between the starting element and the destination element. These
  • 20. different CSS classes will be added/removed on the anchor element and a transition will be applied (the transition that is provided in the anchor class). Long story short, ngAnimate will figure out what classes to add and remove which will make the transition of the element as smooth and automatic as possible. Be sure to use simple CSS classes that do not rely on DOM nesting structure so that the anchor element appears the same as the starting element (since the cloned element is placed inside of root element which is likely close to the body element). Note that if the root element is on the <html> element then the cloned node will be placed inside of body. Using $animate in your directive code So far we've explored how to feed in animations into an Angular application, but how do we trigger animations within our own directives in our application? By injecting the $animate service into our directive code, we can trigger structural and class-based hooks which can then be consumed by animations. Let's imagine we have a greeting box that shows and hides itself when the data changes <greeting-box active="onOrOff">Hi there</greeting-box> ngModule.directive('greetingBox', ['$animate', function($animate) { return function(scope, element, attrs) { attrs.$observe('active', function(value) { value ? $animate.addClass(element, 'on') : $animate.removeClass(element, 'on'); }); }); }]); Now the on CSS class is added and removed on the greeting box component. Now if we add a CSS class on top of the greeting box element in our HTML code then we can trigger a CSS or JS animation to happen. /* normally we would create a CSS class to reference on the element */ greeting-box.on { transition:0.5s linear all; background:green; color:white; } The $animate service contains a variety of other methods like enter, leave, animate and setClass. To learn more about what's possible be sure to visit the $animate service API page.
  • 21. Callbacks and Promises When $animate is called it returns a promise that can be used to capture when the animation has ended. Therefore if we were to trigger an animation (within our directive code) then we can continue performing directive and scope related activities after the animation has ended by chaining onto the returned promise that animation method returns. // somewhere within the depths of the directive $animate.enter(element, parent).then(function() { //the animation has completed }); (Note that earlier versions of Angular prior to v1.4 required the promise code to be wrapped using $scope.$apply(...). This is not the case anymore.) In addition to the animation promise, we can also make use of animation-related callbacks within our directives and controller code by registering an event listener using the $animate service. Let's say for example that an animation was triggered on our view routing controller to hook into that: ngModule.controller('HomePageController', ['$animate', function($animate) { $animate.on('enter', ngViewElement, function(element) { // the animation for this route has completed }]); }]) (Note that you will need to trigger a digest within the callback to get angular to notice any scope- related changes.) Module Components Directive Name Description ngAnimateChildren ngAnimateChildren allows you to specify that children of this element should animate even if any of the children's parents are currently animating.
  • 22. By default, when an element has an active enter, leave, or move (structural) animation, child elements that also have an active structural animation are not animated. ngAnimateSwap ngAnimateSwap is a animation-oriented directive that allows for the container to be removed and entered in whenever the associated expression changes. A common usecase for this directive is a rotating banner or slider component which contains one image being present at a time. When the active image changes then the old image will perform a leave animation and the new element will be inserted via an enter animation. Service Name Description $animateCss The $animateCss service is a useful utility to trigger customized CSS-based transitions/keyframes from a JavaScript-based animation or directly from a directive. The purpose of $animateCss is NOT to side-step how $animate and ngAnimate work, but the goal is to allow pre-existing animations or directives to create more complex animations that can be purely driven using CSS code. $animate The ngAnimate $animate service documentation is the same for the core $animate service. Example input[datetime-local] 1. - inputinmodule ng <script> angular.module('dateExample', []) .controller('DateController', ['$scope', function($scope) { $scope.example = { value: new Date(2010, 11, 28, 14, 57) }; }]); </script> <form name="myForm" ng-controller="DateController as dateCtrl"> <label for="exampleInput">Pick a date between in 2013:</label> <input type="datetime-local" id="exampleInput" name="input" ng- model="example.value"
  • 23. placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013- 12-31T00:00:00" required /> <div role="alert"> <span class="error" ng-show="myForm.input.$error.required"> Required!</span> <span class="error" ng-show="myForm.input.$error.datetimelocal"> Not a valid date!</span> </div> <tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/> <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/> <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/> <tt>myForm.$valid = {{myForm.$valid}}</tt><br/> <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/> </form> Protectot.js var value = element(by.binding('example.value | date: "yyyy-MM- ddTHH:mm:ss"')); var valid = element(by.binding('myForm.input.$valid')); var input = element(by.model('example.value')); // currently protractor/webdriver does not support // sending keys to all known HTML5 input controls // for various browsers (https://github.com/angular/protractor/issues/562). function setInput(val) { // set the value of the element and force validation. var scr = "var ipt = document.getElementById('exampleInput'); " + "ipt.value = '" + val + "';" + "angular.element(ipt).scope().$apply(function(s) { s.myForm[ipt.name].$setViewValue('" + val + "'); });"; browser.executeScript(scr); } it('should initialize to model', function() { expect(value.getText()).toContain('2010-12-28T14:57:00'); expect(valid.getText()).toContain('myForm.input.$valid = true'); }); it('should be invalid if empty', function() { setInput(''); expect(value.getText()).toEqual('value ='); expect(valid.getText()).toContain('myForm.input.$valid = false'); }); it('should be invalid if over max', function() { setInput('2015-01-01T23:59:00'); expect(value.getText()).toContain(''); expect(valid.getText()).toContain('myForm.input.$valid = false'); }); Reference site address https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D