SlideShare a Scribd company logo
Angular JS
Introduction
Angular JS
AngularJS is a very powerful Javascript framework.
It is used to develop Single Page Application (SPA).
It extends HTML DOM with additional attributes and makes
it more responsive
Angular JS
AngularJS is open source, completely free
and used by thousands of the developers
around the world.
Angular JS
It is a open source web application
framework. It was originally developed in
2009 by Misko Hevery and Adam Abrons.
It is maintained by Google.
The current version is 1.2.21/1.3.x
Why Angular JS
It is used to create Rich Internet
Applications (RIA).
It provides developers options to write
client side applications using Javascript in a
clean Model and View (MVC) architecture.
Why Angular JS
Applications written in AngularJS are cross-
browser compliant. AngularJS automatically
handles Javascript code suitable for each browser.
Overall AngularJS is a framework to build large
scale, high performance, and easy to maintain
web applications.
Hello World Example in AngularJS
<html>
<head>
<title>AngularJS First Application</title> </head> <body>
<h1>Sample Application</h1>
<div ng-app = "">
<p>Enter your Name:
<input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p> </div>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular
.min.js">
</script> </body> </html>
Core Features
Data Binding – It is the automatic synchronization of
data between model and view components
Controllers – These are Javascript functions bound
to a particular scope
Services- AngularJS comes with several built-in
services such as $http to make XMLHttpRequests.
Core Features
Filters – These select a subset of items as an arrays and
returns as new array.
Directives – These are markers on DOM elements such as
attributes, css, and more.
These can be used to create custom HTML tags
Templates – These are rendered view with information
from the controller and view.
Core Features
Routing – It is the concept of switching
views.
Dependency Injection − AngularJS has a
built-in dependency injection subsystem
that helps the developer to create,
understand, and test the applications easily.
AngularJS Directives
The AngularJS framework can be divided into three major
parts:
ng-app: This directive defines and links an AngularJS
application to HTML.
ng-model: This directive binds the values of AngularJS
application data to HTML input controls.
ng-bind: This directive binds the AngularJS application
data to HTML tags.
Setting up Development Environment
Navigate to AngularJS official website
https://angularjs.org/,
Angular Javascript Tutorial with command
Angular Javascript Tutorial with command
AngularJS Installation
This screen gives various options of using Angular
JS as follows −
Downloading and hosting files locally
There are two different options :
Legacy and Latest.
The names themselves are self-descriptive. The Legacy
has version less than 1.2.x and the Latest come with
version 1.3.x.
We can also go with the minimized, uncompressed, or
zipped version.
AngularJS Installation
CDN access − You also have access to a CDN.
The CDN gives you access to regional data centers. In
this case, the Google host.
The CDN transfers the responsibility of hosting files
from your own servers to a series of external ones. It
also offers an advantage that if the visitor of your web
page has already downloaded a copy of AngularJS from
the same CDN, there is no need to re-download it.
AngularJS first example
<!doctype html>
<html> <head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.mi
n.js"></script> </head>
<body ng-app = “myapp”>
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} PES University !</h2> </div>
<script> angular.module("myapp",
[]) .controller("HelloController", function($scope) { $scope.helloTo
= {}; $scope.helloTo.title = “krish”; }); </script> </body> </html>
AngularJS Installation
Include AngularJS
<script src =
"https://ajax.googleapis.com/ajax/libs/angular
js/1.5.2/angular.min.js"></script>
HTML that includes angular app
<body ng-app = “myapp”> </body>
AngularJS Installation
View
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} PES University !</h2>
</div>
Controller
<script> angular.module("myapp",
[]) .controller("HelloController", function($scope)
{ $scope.helloTo = {}; $scope.helloTo.title = “krish”; });
</script>
AngularJS first example
What happens when the page is loaded in the browser ?
A. HTML document is loaded into the browser, and evaluated
by the browser.
B. AngularJS JavaScript file is loaded, the
angular global object is created.
C. The JavaScript which registers controller functions is
executed.
AngularJS first example
D. Next, AngularJS scans through the HTML to search for
AngularJS apps as well as views.
E. Once the view is located, it connects that view to the
corresponding controller function.
F. Next, AngularJS executes the controller functions.
G. It then renders the views with data from the model
populated by the controller. The page is now ready.
AngularJS application
Step 1: Load framework
Being a pure JavaScript framework, it can be added
using <Script> tag.
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.
14/angular.min.js"> </script>
AngularJS application
Step 2: Define AngularJS application using ng-app
directive
<div ng-app = ""> ... </div>
Step 3: Define a model name using ng-model
directive
<p>Enter your Name: <input type = "text" ng-model =
"name"></p>
AngularJS application
Step 4: Bind the value of above model defined using
ng-bind directive
<p>Hello <span ng-bind = "name"></span>!</p>
Expressions
Expressions are used to bind application data to HTML.
Expressions are written inside double curly braces such as in
{{ expression}}.
Expressions behave similar to ngbind directives. AngularJS
expressions are pure JavaScript expressions and output the
data where they are used.
Expressions
Using numbers
<p>Expense on Books : {{cost * quantity}} Rs</p>
Using Strings
<p>Hello {{student.firstname + " " + student.lastname}}!</p>
Using Object
<p>Roll No: {{student.rollno}}</p>
Expressions
Using Array
<p>Marks(Math): {{marks[3]}}</p>
Tables
Table data is generally repeatable. The ng-repeat directive can
be used to draw table easily. The following example shows the
use of ng-repeat directive to draw a table −
<table>
<tr> <th>Name</th> <th>Marks</th> </tr>
<tr ng-repeat = "subject in student.subjects">
<td>{{ subject.name }}</td>
<td>{{ subject.marks }}</td> </tr>
</table>
Tables
Table can be styled using CSS Styling.
<style> table, th , td { border: 1px solid grey; border-collapse:
collapse; padding: 5px; }
table tr:nth-child(odd) { background-color: #f2f2f2; }
table tr:nth-child(even) { background-color: #ffffff; } </style>
Custom Filters in AngularJS
Sometimes the built-in filters in Angular cannot meet the
needs or requirements for filtering output.
In such a case, an AngularJS custom filter can be created,
which can pass the output in the required manner.
Similarly, for numbers, you can use other filters. During this
tutorial, we will see the different standard built-in filters
available in Angular.
Custom Filters in AngularJS
Directives in AngularJS
A Directive in AngularJS is a command that gives HTML new
functionality.
When Angular go through HTML code, it will first find
directives in the page and then parse HTML in the page
accordingly.
A simple example of AngularJS directive, which we have seen
in our previous examples is ng-model directive
The directives are used to bind our data model to our view.
Directives in AngularJS
The business logic for few programming constructs can be
designed using controllers, but this comes as next level.
Without using controllers, we can have basic angular code of
HTML page with directives like
ng-init, ng-repeat and ng-model
Directives in AngularJS
There are 4 directives in AngularJS
1. ng-app
2. ng-init
3. ng-model
4. ng-repeat
ng-app: This is used to initialize Angular JS application.
When this directive is placed in HTML page, it basically tells
Angular that this page is Angular.js application
Directives in AngularJS
ng-init:
This is used to initialize application data. Sometimes, you may
require some local data for your applications, this can be done
with ng-init directive.
ng-model:
The ng-model directive is used to bind the value of HTML
control to application data.
ng-repeat
This is used to repeat an HTML element.
Directives (ng-app)
Directives (ng-init)
Directives (ng-model)
Directives (ng-repeat)
Event Handling in AngularJs
AngularJS events are the functionalities that allow web
applications to interact with user inputs like mouse click,
keyboard inputs, mouse hover etc.
Events need to be handled in web-based applications in order
to perform tasks and actions. It is triggered when a specific
action is performed by the user.
Event Handling in AngularJs
When creating web-based applications, sooner or later your
application will need to handle DOM events like mouse clicks,
moves, keyboard presses, change events, etc.
AngularJS can add functionality which can be used to handle
such events.
For example, if there is a button on the page and you want to
process something when the button is clicked, we can use the
Angular ng-click event directive.
Event Handling in AngularJs
The different event handling directives in AngularJS are
ng-click
ng-hide
ng-show

More Related Content

Similar to Angular Javascript Tutorial with command (20)

AngularJS is awesome
AngularJS is awesomeAngularJS is awesome
AngularJS is awesome
Eusebiu Schipor
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
cncwebworld
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
ANGULARJS introduction components services and directives
ANGULARJS   introduction components services and directivesANGULARJS   introduction components services and directives
ANGULARJS introduction components services and directives
SanthoshB77
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
 
AngularJS By Vipin
AngularJS By VipinAngularJS By Vipin
AngularJS By Vipin
Vipin Mundayad
 
AngularJS
AngularJSAngularJS
AngularJS
Srivatsan Krishnamachari
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
murtazahaveliwala
 
Angularjs
AngularjsAngularjs
Angularjs
Sabin Tamrakar
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
OrisysIndia
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
Senthil Kumar
 
AngularJS Workshop
AngularJS WorkshopAngularJS Workshop
AngularJS Workshop
Gianluca Cacace
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
Deepu S Nath
 
Angular JS training institute in Jaipur
           Angular JS training institute in Jaipur           Angular JS training institute in Jaipur
Angular JS training institute in Jaipur
HEMANT SAXENA
 
AngularJs
AngularJsAngularJs
AngularJs
syam kumar kk
 
Angular js
Angular jsAngular js
Angular js
ParmarAnisha
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 
Angular js
Angular jsAngular js
Angular js
Ramakrishna kapa
 
Intoduction to Angularjs
Intoduction to AngularjsIntoduction to Angularjs
Intoduction to Angularjs
Gaurav Agrawal
 
Angular JS tutorial
Angular JS tutorialAngular JS tutorial
Angular JS tutorial
cncwebworld
 
One Weekend With AngularJS
One Weekend With AngularJSOne Weekend With AngularJS
One Weekend With AngularJS
Yashobanta Bai
 
ANGULARJS introduction components services and directives
ANGULARJS   introduction components services and directivesANGULARJS   introduction components services and directives
ANGULARJS introduction components services and directives
SanthoshB77
 
Workshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte IWorkshop 12: AngularJS Parte I
Workshop 12: AngularJS Parte I
Visual Engineering
 
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJSAngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
AngularJS training - Day 1 - Basics: Why, What and basic features of AngularJS
murtazahaveliwala
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
OrisysIndia
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
Senthil Kumar
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
Deepu S Nath
 
Angular JS training institute in Jaipur
           Angular JS training institute in Jaipur           Angular JS training institute in Jaipur
Angular JS training institute in Jaipur
HEMANT SAXENA
 
Learning AngularJS - Complete coverage of AngularJS features and concepts
Learning AngularJS  - Complete coverage of AngularJS features and conceptsLearning AngularJS  - Complete coverage of AngularJS features and concepts
Learning AngularJS - Complete coverage of AngularJS features and concepts
Suresh Patidar
 

Recently uploaded (20)

State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
Smart Borrowing: Everything You Need to Know About Short Term Loans in India
Smart Borrowing: Everything You Need to Know About Short Term Loans in IndiaSmart Borrowing: Everything You Need to Know About Short Term Loans in India
Smart Borrowing: Everything You Need to Know About Short Term Loans in India
fincrifcontent
 
Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
TV Shows and web-series quiz | QUIZ CLUB OF PSGCAS | 13TH MARCH 2025
Quiz Club of PSG College of Arts & Science
 
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
EduSkills OECD
 
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Celine George
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
Fatman Book HD Pdf by aayush songare.pdf
Fatman Book  HD Pdf by aayush songare.pdfFatman Book  HD Pdf by aayush songare.pdf
Fatman Book HD Pdf by aayush songare.pdf
Aayush Songare
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18
Celine George
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
State institute of educational technology
State institute of educational technologyState institute of educational technology
State institute of educational technology
vp5806484
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
Smart Borrowing: Everything You Need to Know About Short Term Loans in India
Smart Borrowing: Everything You Need to Know About Short Term Loans in IndiaSmart Borrowing: Everything You Need to Know About Short Term Loans in India
Smart Borrowing: Everything You Need to Know About Short Term Loans in India
fincrifcontent
 
Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
EduSkills OECD
 
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17Different pricelists for different shops in odoo Point of Sale in Odoo 17
Different pricelists for different shops in odoo Point of Sale in Odoo 17
Celine George
 
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition IILDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDMMIA Free Reiki Yoga S9 Grad Level Intuition II
LDM & Mia eStudios
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
Fatman Book HD Pdf by aayush songare.pdf
Fatman Book  HD Pdf by aayush songare.pdfFatman Book  HD Pdf by aayush songare.pdf
Fatman Book HD Pdf by aayush songare.pdf
Aayush Songare
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
june 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptxjune 10 2025 ppt for madden on art science is over.pptx
june 10 2025 ppt for madden on art science is over.pptx
roger malina
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
Coleoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptxColeoptera: The Largest Insect Order.pptx
Coleoptera: The Largest Insect Order.pptx
Arshad Shaikh
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18How to Create a Rainbow Man Effect in Odoo 18
How to Create a Rainbow Man Effect in Odoo 18
Celine George
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
Ad

Angular Javascript Tutorial with command

  • 2. Angular JS AngularJS is a very powerful Javascript framework. It is used to develop Single Page Application (SPA). It extends HTML DOM with additional attributes and makes it more responsive
  • 3. Angular JS AngularJS is open source, completely free and used by thousands of the developers around the world.
  • 4. Angular JS It is a open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is maintained by Google. The current version is 1.2.21/1.3.x
  • 5. Why Angular JS It is used to create Rich Internet Applications (RIA). It provides developers options to write client side applications using Javascript in a clean Model and View (MVC) architecture.
  • 6. Why Angular JS Applications written in AngularJS are cross- browser compliant. AngularJS automatically handles Javascript code suitable for each browser. Overall AngularJS is a framework to build large scale, high performance, and easy to maintain web applications.
  • 7. Hello World Example in AngularJS <html> <head> <title>AngularJS First Application</title> </head> <body> <h1>Sample Application</h1> <div ng-app = ""> <p>Enter your Name: <input type = "text" ng-model = "name"></p> <p>Hello <span ng-bind = "name"></span>!</p> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular .min.js"> </script> </body> </html>
  • 8. Core Features Data Binding – It is the automatic synchronization of data between model and view components Controllers – These are Javascript functions bound to a particular scope Services- AngularJS comes with several built-in services such as $http to make XMLHttpRequests.
  • 9. Core Features Filters – These select a subset of items as an arrays and returns as new array. Directives – These are markers on DOM elements such as attributes, css, and more. These can be used to create custom HTML tags Templates – These are rendered view with information from the controller and view.
  • 10. Core Features Routing – It is the concept of switching views. Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer to create, understand, and test the applications easily.
  • 11. AngularJS Directives The AngularJS framework can be divided into three major parts: ng-app: This directive defines and links an AngularJS application to HTML. ng-model: This directive binds the values of AngularJS application data to HTML input controls. ng-bind: This directive binds the AngularJS application data to HTML tags.
  • 12. Setting up Development Environment Navigate to AngularJS official website https://angularjs.org/,
  • 15. AngularJS Installation This screen gives various options of using Angular JS as follows − Downloading and hosting files locally There are two different options : Legacy and Latest. The names themselves are self-descriptive. The Legacy has version less than 1.2.x and the Latest come with version 1.3.x. We can also go with the minimized, uncompressed, or zipped version.
  • 16. AngularJS Installation CDN access − You also have access to a CDN. The CDN gives you access to regional data centers. In this case, the Google host. The CDN transfers the responsibility of hosting files from your own servers to a series of external ones. It also offers an advantage that if the visitor of your web page has already downloaded a copy of AngularJS from the same CDN, there is no need to re-download it.
  • 17. AngularJS first example <!doctype html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.mi n.js"></script> </head> <body ng-app = “myapp”> <div ng-controller = "HelloController" > <h2>Welcome {{helloTo.title}} PES University !</h2> </div> <script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = “krish”; }); </script> </body> </html>
  • 18. AngularJS Installation Include AngularJS <script src = "https://ajax.googleapis.com/ajax/libs/angular js/1.5.2/angular.min.js"></script> HTML that includes angular app <body ng-app = “myapp”> </body>
  • 19. AngularJS Installation View <div ng-controller = "HelloController" > <h2>Welcome {{helloTo.title}} PES University !</h2> </div> Controller <script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = “krish”; }); </script>
  • 20. AngularJS first example What happens when the page is loaded in the browser ? A. HTML document is loaded into the browser, and evaluated by the browser. B. AngularJS JavaScript file is loaded, the angular global object is created. C. The JavaScript which registers controller functions is executed.
  • 21. AngularJS first example D. Next, AngularJS scans through the HTML to search for AngularJS apps as well as views. E. Once the view is located, it connects that view to the corresponding controller function. F. Next, AngularJS executes the controller functions. G. It then renders the views with data from the model populated by the controller. The page is now ready.
  • 22. AngularJS application Step 1: Load framework Being a pure JavaScript framework, it can be added using <Script> tag. <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3. 14/angular.min.js"> </script>
  • 23. AngularJS application Step 2: Define AngularJS application using ng-app directive <div ng-app = ""> ... </div> Step 3: Define a model name using ng-model directive <p>Enter your Name: <input type = "text" ng-model = "name"></p>
  • 24. AngularJS application Step 4: Bind the value of above model defined using ng-bind directive <p>Hello <span ng-bind = "name"></span>!</p>
  • 25. Expressions Expressions are used to bind application data to HTML. Expressions are written inside double curly braces such as in {{ expression}}. Expressions behave similar to ngbind directives. AngularJS expressions are pure JavaScript expressions and output the data where they are used.
  • 26. Expressions Using numbers <p>Expense on Books : {{cost * quantity}} Rs</p> Using Strings <p>Hello {{student.firstname + " " + student.lastname}}!</p> Using Object <p>Roll No: {{student.rollno}}</p>
  • 28. Tables Table data is generally repeatable. The ng-repeat directive can be used to draw table easily. The following example shows the use of ng-repeat directive to draw a table − <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat = "subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table>
  • 29. Tables Table can be styled using CSS Styling. <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style>
  • 30. Custom Filters in AngularJS Sometimes the built-in filters in Angular cannot meet the needs or requirements for filtering output. In such a case, an AngularJS custom filter can be created, which can pass the output in the required manner. Similarly, for numbers, you can use other filters. During this tutorial, we will see the different standard built-in filters available in Angular.
  • 31. Custom Filters in AngularJS
  • 32. Directives in AngularJS A Directive in AngularJS is a command that gives HTML new functionality. When Angular go through HTML code, it will first find directives in the page and then parse HTML in the page accordingly. A simple example of AngularJS directive, which we have seen in our previous examples is ng-model directive The directives are used to bind our data model to our view.
  • 33. Directives in AngularJS The business logic for few programming constructs can be designed using controllers, but this comes as next level. Without using controllers, we can have basic angular code of HTML page with directives like ng-init, ng-repeat and ng-model
  • 34. Directives in AngularJS There are 4 directives in AngularJS 1. ng-app 2. ng-init 3. ng-model 4. ng-repeat ng-app: This is used to initialize Angular JS application. When this directive is placed in HTML page, it basically tells Angular that this page is Angular.js application
  • 35. Directives in AngularJS ng-init: This is used to initialize application data. Sometimes, you may require some local data for your applications, this can be done with ng-init directive. ng-model: The ng-model directive is used to bind the value of HTML control to application data. ng-repeat This is used to repeat an HTML element.
  • 40. Event Handling in AngularJs AngularJS events are the functionalities that allow web applications to interact with user inputs like mouse click, keyboard inputs, mouse hover etc. Events need to be handled in web-based applications in order to perform tasks and actions. It is triggered when a specific action is performed by the user.
  • 41. Event Handling in AngularJs When creating web-based applications, sooner or later your application will need to handle DOM events like mouse clicks, moves, keyboard presses, change events, etc. AngularJS can add functionality which can be used to handle such events. For example, if there is a button on the page and you want to process something when the button is clicked, we can use the Angular ng-click event directive.
  • 42. Event Handling in AngularJs The different event handling directives in AngularJS are ng-click ng-hide ng-show