SlideShare a Scribd company logo
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
AngularJS
Data Binding
Prepared By
Santhanam
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Template Engine
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
One way data binding
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Two way data binding (AngularJS)
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Expressions
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com

Expressions are used to bind application data to
HTML

Expressions are written inside double braces
like {{ expression }}

For example, valid expressions in Angular are:

1+2

a+b

user.name

items[index]
• In JavaScript, trying to use undefined properties
or methods generates ReferenceError or
TypeError. In AngularJs, it will not show any
error or warning.
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Modules
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com

Modules are used to separate logics say
services, controllers, application etc. and keep
the code clean.

A module is created by using the AngularJS
function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Controllers
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com

Controller is attached to the DOM via the ng-
controller directive

A new child scope will be created and made
available as an injectable parameter to the
Controller's constructor function as $scope

Use controllers to:
– Set up the initial state of the $scope object
– Add behavior to the $scope object
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Set up the initial state of the $scope object
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope',
function($scope) {
$scope.greeting = 'Hola!';
}]);
Template
<div ng-controller="GreetingController">
{{ greeting }}
</div>
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Add behavior to the $scope object
var myApp = angular.module('myApp',[]);
myApp.controller('DoubleController', ['$scope',
function($scope) {
$scope.double = function(value) {
return value * 2;
};
}]);
Template
<div ng-controller="DoubleController">
Two times <input ng-model="num"> equals {{ double(num) }}
</div>
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
Dependency Injection (DI)
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com

Dependency Injection is a software design pattern in which
components are given their dependencies instead of hard coding
them within the component.

This helps in making components reusable, maintainable.

AngularJS provides following components which can be injected
into each other as dependencies
– value
– factory
– service
– provider
– constant
Website : http://www.softsolutions4u.com Email : info@softsolutions4u.com
angular.module('myModule', [])
.factory('serviceId', ['depService',
function(depService) {
// ...
}])
.directive('directiveName', ['depService',
function(depService) {
// ...
}])
.filter('filterName', ['depService',
function(depService) {
// ...
}]);

More Related Content

What's hot (20)

Documentation vs test about cucumber but not only for vegetarians
Documentation vs test about cucumber but not only for vegetarians
Mikstura.IT Foundation | Web & Mobile Community
 
Ember.js for Big Profit
Ember.js for Big Profit
CodeCore
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp Atlanta
Jason Noble
 
Catalog display
Catalog display
Jason Noble
 
I18n
I18n
soon
 
Python for AngularJS
Python for AngularJS
Jeff Schenck
 
Dart and AngularDart
Dart and AngularDart
Loc Nguyen
 
Introduccion app engine con python
Introduccion app engine con python
sserrano44
 
Angular presentation
Angular presentation
merlihan
 
Dash of ajax
Dash of ajax
Jason Noble
 
Ember CLI & Ember Tooling
Ember CLI & Ember Tooling
Mark Provan
 
Ajax pagination using j query in rails3
Ajax pagination using j query in rails3
Andolasoft Inc
 
Ember components
Ember components
Sarath Chandra
 
Well
Well
breccan
 
Angular Promises and Advanced Routing
Angular Promises and Advanced Routing
Alexe Bogdan
 
Angular js
Angular js
sanjay joshi
 
Javascript REST with Jester
Javascript REST with Jester
Mike Bailey
 
Inline
Inline
ekeoguob
 
Bare acl
Bare acl
Sudheer Satyanarayana
 
Rails 2.3 and Rack - NHRuby Feb 2009
Rails 2.3 and Rack - NHRuby Feb 2009
bturnbull
 
Ember.js for Big Profit
Ember.js for Big Profit
CodeCore
 
Intro to Rails Give Camp Atlanta
Intro to Rails Give Camp Atlanta
Jason Noble
 
I18n
I18n
soon
 
Python for AngularJS
Python for AngularJS
Jeff Schenck
 
Dart and AngularDart
Dart and AngularDart
Loc Nguyen
 
Introduccion app engine con python
Introduccion app engine con python
sserrano44
 
Angular presentation
Angular presentation
merlihan
 
Ember CLI & Ember Tooling
Ember CLI & Ember Tooling
Mark Provan
 
Ajax pagination using j query in rails3
Ajax pagination using j query in rails3
Andolasoft Inc
 
Angular Promises and Advanced Routing
Angular Promises and Advanced Routing
Alexe Bogdan
 
Javascript REST with Jester
Javascript REST with Jester
Mike Bailey
 
Rails 2.3 and Rack - NHRuby Feb 2009
Rails 2.3 and Rack - NHRuby Feb 2009
bturnbull
 

Viewers also liked (15)

Industrial infrastructure
Industrial infrastructure
Arrjit Parashar
 
PI NEWS Autumn 2015
PI NEWS Autumn 2015
Paul McNeil
 
MIB Master of International Business für Führungskräfte - SMBS University of ...
MIB Master of International Business für Führungskräfte - SMBS University of ...
SMBS University of Salzburg Business School
 
Social Psychology Journals
Social Psychology Journals
dtan97
 
Cuestionario para el impacto de la formacio monica
Cuestionario para el impacto de la formacio monica
Docencia_Formación_Emprego
 
How to Freelance for Mobile Developers Lesson 4 - Creating Contracts or Serv...
How to Freelance for Mobile Developers Lesson 4 - Creating Contracts or Serv...
Richard Hart
 
Training_2
Training_2
Richard Ray
 
Business Plan - Elos
Business Plan - Elos
Daniel Gravina
 
Arteria carotida
Arteria carotida
Enehidy Cazares
 
Main Dissertation Defense
Main Dissertation Defense
Anteneh Mekonen (EMBA , SAP ERP, DipIPSAS)
 
Insuficiencia respiratoria
Insuficiencia respiratoria
Enehidy Cazares
 
NARENDAR MODI IMC CAMPAIGN FOR 2014 ELECTIONS
NARENDAR MODI IMC CAMPAIGN FOR 2014 ELECTIONS
Anjali Mehta
 
English Presentation - Café
English Presentation - Café
dtan97
 
The efqm excellence model
The efqm excellence model
Ahmed Dahab
 
Lec 04 Geometric Design (Transportation Engineering)
Lec 04 Geometric Design (Transportation Engineering)
Hossam Shafiq I
 
Industrial infrastructure
Industrial infrastructure
Arrjit Parashar
 
PI NEWS Autumn 2015
PI NEWS Autumn 2015
Paul McNeil
 
MIB Master of International Business für Führungskräfte - SMBS University of ...
MIB Master of International Business für Führungskräfte - SMBS University of ...
SMBS University of Salzburg Business School
 
Social Psychology Journals
Social Psychology Journals
dtan97
 
Cuestionario para el impacto de la formacio monica
Cuestionario para el impacto de la formacio monica
Docencia_Formación_Emprego
 
How to Freelance for Mobile Developers Lesson 4 - Creating Contracts or Serv...
How to Freelance for Mobile Developers Lesson 4 - Creating Contracts or Serv...
Richard Hart
 
Insuficiencia respiratoria
Insuficiencia respiratoria
Enehidy Cazares
 
NARENDAR MODI IMC CAMPAIGN FOR 2014 ELECTIONS
NARENDAR MODI IMC CAMPAIGN FOR 2014 ELECTIONS
Anjali Mehta
 
English Presentation - Café
English Presentation - Café
dtan97
 
The efqm excellence model
The efqm excellence model
Ahmed Dahab
 
Lec 04 Geometric Design (Transportation Engineering)
Lec 04 Geometric Design (Transportation Engineering)
Hossam Shafiq I
 
Ad

Similar to Angular data binding by Soft Solutions4U (20)

ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
Basics of AngularJS
Basics of AngularJS
Filip Janevski
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 
AngularJS Basics
AngularJS Basics
Ravi Mone
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
murtazahaveliwala
 
Angular Javascript Tutorial with command
Angular Javascript Tutorial with command
ssuser42b933
 
Introduction to angular js
Introduction to angular js
Marco Vito Moscaritolo
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
Dariusz Kalbarczyk
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
ExoLeaders.com
 
How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND
Enrique Oriol Bermúdez
 
Gears User Guide
Gears User Guide
Muthuselvam RS
 
AngularJs-training
AngularJs-training
Pratchaya Suputsopon
 
243329387 angular-docs
243329387 angular-docs
Abhi166803
 
Spca2014 hillier 3rd party_javascript_libraries
Spca2014 hillier 3rd party_javascript_libraries
NCCOMMS
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2
Paras Mendiratta
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Vinícius de Moraes
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
Caldera Labs
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
Syed Shanu
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
EPAM Systems
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
Learnimtactics
 
AngularJS Basics
AngularJS Basics
Ravi Mone
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
murtazahaveliwala
 
Angular Javascript Tutorial with command
Angular Javascript Tutorial with command
ssuser42b933
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
Ran Wahle
 
The Art of AngularJS - DeRailed 2014
The Art of AngularJS - DeRailed 2014
Matt Raible
 
AngularJS Mobile Warsaw 20-10-2014
AngularJS Mobile Warsaw 20-10-2014
Dariusz Kalbarczyk
 
Good karma: UX Patterns and Unit Testing in Angular with Karma
Good karma: UX Patterns and Unit Testing in Angular with Karma
ExoLeaders.com
 
How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND
Enrique Oriol Bermúdez
 
243329387 angular-docs
243329387 angular-docs
Abhi166803
 
Spca2014 hillier 3rd party_javascript_libraries
Spca2014 hillier 3rd party_javascript_libraries
NCCOMMS
 
Angular JS2 Training Session #2
Angular JS2 Training Session #2
Paras Mendiratta
 
Course CodeSchool - Shaping up with Angular.js
Course CodeSchool - Shaping up with Angular.js
Vinícius de Moraes
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
Caldera Labs
 
Ad

Recently uploaded (20)

Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Viral>Wondershare Filmora 14.5.18.12900 Crack Free Download
Puppy jhon
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
Oracle Cloud and AI Specialization Program
Oracle Cloud and AI Specialization Program
VICTOR MAESTRE RAMIREZ
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 

Angular data binding by Soft Solutions4U