AngularJS Final

Angular JS
Directives, Scope and Events
Jaiswal, Rupal
Angularjs Controller
A controller is a JavaScript Object, created by a standard
JavaScript object constructor.
AngularJS application mainly relies on controllers to control the flow
of data in the application.
The ng-controller directive defines the application controller.
Controller accepts $scope as a parameter which refers to the
application
Scope
Scope is a special javascript object which plays the role of joining
controller with the views
Scope contains the model data. In controllers, model data is
accessed via $scope object.
Scopes provide context against which expression are evaluated.
All applications have a $rootScope which is the scope created on
the HTML element that contains the ng-app directive.
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
Scope Inheritance
Scope are controllers specific. If we defines nested controllers then
child controller will inherit the scope of its parent controller.
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController", function($scope) {
$scope.message = "In shape controller";
$scope.type = "Shape";
});
mainApp.controller("circleController", function($scope) {
$scope.message = "In circle controller";
});
Events
AngularJS has its own HTML events directives.
An AngularJS event will not overwrite an HTML event, both events
will be executed.
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-paste
Validation
Example
Expression
- Joshi,
Abhijeet
INTRODUCTION
Angular expressions are JavaScript-like code snippets. They bind
application data to a HTML element. Written inside two curly braces,
it reminds us of JavaScript expressions. Though Angular expressions
are different from JavaScript, it is an effort to bring JavaScript like
functionalities, such as, operators, variables, conditions etc to
HTML. You can assign values to the expressions, dynamically using
an Angular directive. This technique will spare you from assigning
static values and instead you can add different types of values
according to your choice.
AngularJS Expressions using String

<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
></script>
<body>
<div ng-app=" ">
Name: <input type="text" ng-model="name">
<p><b>My name is </b> {{ name }}</p>
</div>
</body>
</html>
AngularJS expression using numbers

<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></
script>
<body>
<h3>Sum of two Numbers using AngularJS</h3>
<div ng-app="">
<h3>Using Input Type Number</h3>
<p>First Number:
<input type="number" ng-model="c" />
</p>
<p>Second Number:
<input type="number" ng-model="d" />
</p>
<p>Sum: {{ c + d }}</p>
</div>
AngularJS expressions using Objects

<html>
<head>
<title>My first AngularJS Expression code</title>
<script
SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"
>
</script>
</head>
<body>
<div ng-app=''>
<div ng-init="customer={ name:'Abhijeet joshi',
address:'CALSTATELA', email:'jeet@yahoo.com'}">
Expression Result: {{ customer.name + " " +
customer.address + " " + customer.email }}
</div>
</div>
Ternary Operator
A Ternary Operator in Angular is an alternative to if, else conditions in
JavaScript. Angular introduced this feature in its version 1.1.5. It is a
giant leap forward in making this framework, awesome.You can use the
ternary operator in expressions.
A Ternary operator takes three expressions. If the condition is true, it
will evaluate the first expression and it becomes the result. Else, it will
evaluate the second expression and that becomes the result.
Syntax
Condition ? first_expression : second_expression
Now, let us see an example.
Example of Ternary Operator

<div ng-app
ng-init="feb=[
{ day:1, available:25
{ day:4, waiting:5 },
},
},
},
}]">
<div ng-repeat="seats in feb">

<div>{{ 'Day ' + seats.day }} # {{ seats.available > 0 ? 'Seats
Available -' + seats.available :
'Waiting List -' + seats.waiting }} </div>
</div>
</div>
One Time Binding

With version 1.3, Angular introduced a new feature, called the One-time
binding, for the first time. If you use
it will create one-time binding.
:: (Double Colon) in an expression,
One-time expressions will stop recalculating once they are stable, which
happens after the first execution if the expression result is a nonundefined value
When we declare an expression using :: , it tells Angular to ignore the
bind once a value is assigned to it. Angular will unbind it and any Model
updates wont affect the view. Consider it a render-once type method
rather than bind once.
Example
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
></script>
<body>
<div ng-app>
Name a City <input type="text" ng-model="city" />
<button ng-click="cityname = city" ng-init="city">Submit</button>
<p>One-time Binding: {{:: cityname}} </p>
<p>Normal Binding: {{ cityname}} </p>
</div>
</body>
Difference between AngularJS expressions

and javascript expressions
Double curly braces are Angularjs expressions and single curly braces
are javascript objects.
Unlike JavaScript expressions, AngularJS expressions can be written
inside HTML.
AngularJS expressions support filters, while JavaScript expressions do
not.
AngularJS expressions do not support loops, and exceptions, while
JavaScript expressions do.
In Javascript we use eval()function to evaluate expressions but in
angular we evaluate expressions using {{}} and it calls $parse to
evaluate the expressions,basically what $parse does that it converts
Angular Services
- Sachdev,
Savin
What are Angular Services

Separation of Concern.
Substitutle objects that can wired together using Dependency
Injection.
Lazily Instantiated.
Used to organize and share data among and functions accross the
applications.
Angular pre-defined services

Starts with $
$filter
$http
$resource
$route
Create Custom Services

Service () : Return the instance of the function to work with
Factory () : Returns the value of function returned after execution
Using Angular Services

Add Angular Service as a dependency for the component
(Controller, Service, Filter, Directive)
angular.module('app',
['ngRoute','ngResource','sfs.controller','sfs.service','sfs2.service'
])
angular.module('sfs.controller',[])
.
controller('SfsController',function($scope,sfsResource,sfs2Resource)
{
AngularJS: Globalization
- Kumar,
Rajnish
Introduction
Lynda.com
Wikipedia
Developer Guide
Globalization = Internationalization + Localization
Internationalization (i18n) is the process of developing products in
such a way that they can be localized for languages and cultures
easily.
Localization (l10n), is the process of adapting applications and text to
enable their usability in a particular cultural or linguistic market.
For application developers, Internationalizing an application means
i18n example:
Examples & Demo
Summary
Text Formatting
Pluralization and Gender
Calendars
Dates, Numbers and Currencies
Font, Text sizes, width
and more
AngularJS Animations
- Purohit, Jay
Animation Basics:
-Animations concentrates on making a user interface better and give a
better look and feel which is more responsive in nature.
-AngularJS provides animation hooks for common directives such as
ngRepeat, ngSwitch, and ngView, as well as custom directives via the
$animate service.
-Trigger animations during the life cycle of various directives and when
triggered, will attempt to perform one of the following action depending
on if an animation is placed on the given directive.
-Animations are not available unless you include the
module as a dependency within your application
ngAnimate
Rules for supported Directives:

Now here animations based on Directives we have following
considerations:
The attached CSS classes take the form of ng-{EVENT} and ng{EVENT}-active for structural events like enter, move, or leave.
But, for class-based animations, it takes the form of {CLASS}-add,
{CLASS}-add-active, {CLASS}-remove, and {CLASS}remove-active.
The exceptions to these rules are ng-hide and ng-show. Both of these
directives have add and remove events that are triggered, just
like ng-class, but they both share the .ng-hide class, which is either
added or removed when appropriate.
Built in Directives $animate Events

Directive
Supported
Animation Events
ngRrepeat
enter ,leave and move
ngView
Enter and leave
ngInclude
Enter and leave
ngSwitch
Enter and leave
ngIf
Enter and leave
ngClass
Add and remove
ngShow &
ngHide
Add and remove(the

ng-hide class value)
How Does it work?

There are ultimately two ways of using Animations:
1.Css3 Transition based animation
2.Javascript based animation.
In both the considerations we need css classes for defining
transition on elements.
CSS3 transition using animation:

Angular will automatically detect that CSS is attached to an animation
when the animation is triggered, and add the .ng-{EVENT}-active class
until the animation has run its course. It will then remove that class,
and any other added classes, from the DOM.
Consider an Example:
Where you add, move, or remove an item from an array which is being
used by the ngRepeat directive, Angular will now catch that event, and
add a series of classes to that element in the ngRepeat.
JS FILE
angular.module('myApp', ['ngAnimate'])
.controller('ItemCtrl', function($scope) {
$scope.items = [ {name: "Lunchmeat"},{name: "Bread"},
{name: "Milk"},{name: "Mustard"},
{name: "Cheese"}
];
$scope.addItem = function() {
$scope.items.push($scope.item);
$scope.item = {};
};
$scope.removeItem = function(index) {$scope.items.splice(index,
1); };
});
CSS Class File

.fade {
transition: 1s linear all;
-webkit-transition: 1s linear all;
}.fade.ng-enter {
opacity: 0;
}.fade.ng-enter.ng-enter-active {
opacity: 1;
}.fade.ng-leave {
opacity: 1;
}.fade.ng-leave.ng-leave-active {
opacity: 0;
}
HTML FIle
<ul>
<li ng-repeat="item in items" class="fade">
{{item.name}}
<span ng-click="removeItem($index)">X</span>
</li>
</ul>
<div class="row">
<div class="one-half column offset-by-three">
<input type="text" ng-model="item.name" />
<button class="button-primary" ng-click="addItem()">Add
Item</button>
JAVASCRIPT BASED ANIMATION

.animation('.fade', function() {
return {
enter: function(element, done) {element.css('display','none');
$(element).fadeIn(1000, function() {done();
});
}, leave: function(element, done) {
$(element).fadeOut(1000, function() { done();});
},
move: function(element, done) {element.css('display', 'none'); $
(element).slideDown(500, function() { done();});} }
})
Thanks.

AngularJS Final

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

AngularJS Final

Transféré par

Droits d'auteur :

Formats disponibles

Angular JS

Directives, Scope and Events

AngularJS Expressions using String

AngularJS expression using numbers

AngularJS expressions using Objects

Example of Ternary Operator

<div ng-repeat="seats in feb">

One Time Binding

:: (Double Colon) in an expression,

Difference between AngularJS expressions

What are Angular Services

Angular pre-defined services

Create Custom Services

Factory () : Returns the value of function returned after execution

Using Angular Services

Examples & Demo

Rules for supported Directives:

Built in Directives $animate Events

enter ,leave and move

Enter and leave

Enter and leave

Enter and leave

Enter and leave

Add and remove

Add and remove(the

How Does it work?

CSS3 transition using animation:

CSS Class File

JAVASCRIPT BASED ANIMATION

Vous aimerez peut-être aussi