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)

How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
Odoo 18 Point of Sale PWA - Odoo Slides
Odoo 18 Point of Sale PWA  - Odoo  SlidesOdoo 18 Point of Sale PWA  - Odoo  Slides
Odoo 18 Point of Sale PWA - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
Writing Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research CommunityWriting Research Papers: Guidance for Research Community
Writing Research Papers: Guidance for Research Community
Rishi Bankim Chandra Evening College, Naihati, North 24 Parganas, West Bengal, India
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910
PankajRodey1
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
Critical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi MosesCritical Thinking and Bias with Jibi Moses
Critical Thinking and Bias with Jibi Moses
Excellence Foundation for South Sudan
 
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
0b - THE ROMANTIC ERA: FEELINGS AND IDENTITY.pptx
Julián Jesús Pérez Fernández
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptxYSPH VMOC Special Report - Measles Outbreak  Southwest US 5-30-2025.pptx
YSPH VMOC Special Report - Measles Outbreak Southwest US 5-30-2025.pptx
Yale School of Public Health - The Virtual Medical Operations Center (VMOC)
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT PatnaSwachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Swachata Quiz - Prelims - 01.10.24 - Quiz Club IIT Patna
Quiz Club, Indian Institute of Technology, Patna
 
How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar SirPHYSIOLOGY & SPORTS INJURY by Diwakar Sir
PHYSIOLOGY & SPORTS INJURY by Diwakar Sir
Diwakar Kashyap
 
Odoo 18 Point of Sale PWA - Odoo Slides
Odoo 18 Point of Sale PWA  - Odoo  SlidesOdoo 18 Point of Sale PWA  - Odoo  Slides
Odoo 18 Point of Sale PWA - Odoo Slides
Celine George
 
Multicultural approach in education - B.Ed
Multicultural approach in education - B.EdMulticultural approach in education - B.Ed
Multicultural approach in education - B.Ed
prathimagowda443
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Order Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptxOrder Lepidoptera: Butterflies and Moths.pptx
Order Lepidoptera: Butterflies and Moths.pptx
Arshad Shaikh
 
K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910K-Circle-Weekly-Quiz-May2025_12345678910
K-Circle-Weekly-Quiz-May2025_12345678910
PankajRodey1
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
"Orthoptera: Grasshoppers, Crickets, and Katydids pptx
Arshad Shaikh
 
POS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 SlidesPOS Reporting in Odoo 18 - Odoo 18 Slides
POS Reporting in Odoo 18 - Odoo 18 Slides
Celine George
 
How to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 WebsiteHow to Configure Add to Cart in Odoo 18 Website
How to Configure Add to Cart in Odoo 18 Website
Celine George
 
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANASTUDENT LOAN TRUST FUND DEFAULTERS GHANA
STUDENT LOAN TRUST FUND DEFAULTERS GHANA
Kweku Zurek
 
Types of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo SlidesTypes of Actions in Odoo 18 - Odoo Slides
Types of Actions in Odoo 18 - Odoo Slides
Celine George
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdfTechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.05.28.pdf
TechSoup
 
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