ANGULAR JS
Module v
chapter-2
Introduction,
Angular JS Expressions,
Modules,
Data Binding,
CONTENTS
Controllers,
DOM, Events,
Forms,
Validations
Step 1 : Go to Website
Node.js (nodejs.org)
Step 2: Install Node js
Step 3: Open Command
Prompt
Step 4: run commands a)
HOW TO node –v
DOWNLOAD b) npm
ANGULARJS –v
Step 5: npm install –g
@angular/cli
Step 6: run command ng
version
Step 7: install vs-code
Download Visual Studio Code
- Mac, Linux, Windows
Step Open vs-code and create a folder
1 angularjs
Step Open terminal in vs code and type
2 ng new hello-world --no-standalone
CREATING A Step In terminal type as cd hello-world
HELLO WORLD 3
EXAMPLE
Step In terminal type as ng serve
4
Step Open browser with address
5 localhost:4200
INTRODUCTION TO ANGULARJS
AngularJS is a JavaScript framework
AngularJS extends HTML attributes with Directives, and binds data to HTML
with Expressions.
AngularJS extends HTML with new attributes.
AngularJS is perfect for Single Page Applications (SPAs).
AngularJS is easy to learn.
AngularJS version 1.0 was released in 2012.
Miško Hevery, a Google employee, started to work with AngularJS in 2009.
The idea turned out very well, and the project is now officially supported by
Google.
. It can be added to an HTML page with a <script> tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
ANGULARJS EXTENDS HTML
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls
(input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML
view.
SAMPLE ANGULAR PROGRAM
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.
6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
EXPLANATION
AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is
the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the
application variable name.
The ng-bind directive binds the content of the <p> element to
the application variable name.
ANGULARJS EXPRESSIONS
• AngularJS binds data to HTML using Expressions.
• AngularJS expressions can be written inside double
braces: {{ expression }}.
• AngularJS expressions can also be written inside a directive: ng-
bind="expression".
• AngularJS will resolve the expression, and return the result exactly where
the expression is written.
• AngularJS expressions are much like JavaScript expressions: They
can contain literals, operators, and variables.
• Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
OUTPUT:-My first expression: 10
AngularJS Numbers
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.j
s">
</script>
<body
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
OUTPUT:-Total in dollar: 5
AngularJS
Strings
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The full name is: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
AngularJS
Objects
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-
init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
</body>
</html>
OUTPUT:The name is
Doe
AngularJS
Arrays
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/an
gularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-
init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
</body>
</html>
The third result is
19
An AngularJS module defines an application.
The module is a container for the different parts
of an application.
The module is a container for the application
controllers.
ANGULARJS
MODULES Controllers always belong to a module.
A module is created by using the AngularJS
function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
MODULES
ARE
CONTAINERS
EXAMPLE
ANGULARJS DIRECTIVES
• AngularJS lets you extend HTML with new attributes
called Directives.
• AngularJS has a set of built-in directives which offers functionality
to your applications.
• AngularJS also lets you define your own directives.
• AngularJS directives are extended HTML attributes with the
prefix ng-.
• The ng-app directive initializes an AngularJS application.
• The ng-init directive initializes application data.
• The ng-model directive binds the value of HTML controls (input,
select, textarea) to application data.
EX: DIRECTIVES
• It is actually a process that
bridges a connection
between the view and
Application logic of the
application.
• Automatic synchronization
of data between the model
WHAT IS DATA- and view.
BINDING
• Why data binding?
• To show the dynamic
changes in the view
whenever data changes.
TYPES OF DATA BINDING
DATA MODEL
• Data binding in AngularJS is the synchronization between the
model and the view.
• AngularJS applications usually have a data model.
• The data model is a collection of data available for the
application.
HTML VIEW
• The HTML container where the AngularJS application is displayed, is
called the view
• The view has access to the model, and there are several ways of
displaying model data in the view.
• You can use the ng-bind directive, which will bind the innerHTML of the
element to the specified model property:
<p ng-bind="firstname"></p>
• You can also use double braces {{ }} to display content from the
model:
<p>First name: {{firstname}}</p>
• AngularJS controllers control
the data of AngularJS
applications.
• AngularJS controllers are
regular JavaScript Objects.
• AngularJS applications are
ANGULARJS controlled by controllers.
CONTROLLERS
• The ng-controller directive
defines the application
controller.
• A controller is a JavaScript
Object, created by a
standard JavaScript object
constructor.
EXAMPLE-2
In larger applications, it is common to store controllers in external
files.
Just copy the code between the <script> tags into an external file
named personController.js:
ANGULARJS HTML DOM
AngularJS has directives for binding application data to the attributes of
HTML DOM elements.
The ng-disabled directive binds the application data mySwitch to the HTML
button's disabled attribute.
The ng-model directive binds the value of the HTML checkbox element to
the value of mySwitch.
If the value of mySwitch evaluates to true, the button will be disabled:
EXAMPLE NG-DISABLED
THE NG-SHOW DIRECTIVE
The ng-show directive shows or hides an HTML element.
• AngularJS has its own HTML
events directives.
• AngularJS event listeners to
your HTML elements by
using one or more of these
directives:
• ng-blur
ANGULARJS EVENTS • ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
CONT…
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste
MOUSE EVENTS
Mouse events occur when the cursor moves over an element, in this
order:
• ng-mouseover
• ng-mouseenter
• ng-mousemove
• ng-mouseleave
when a mouse button is clicked on an element, in this order:
• ng-mousedown
• ng-mouseup
• ng-click
EX:MOUSE EVENT
TOGGLE
• If you want to show a section of HTML code when a button is clicked, and
hide when the button is clicked again, like a dropdown menu, make the
button behave like a toggle switch:
ANGULARJS FORMS
✔ Forms in AngularJS provides data-binding and validation of
input controls.
✔ Input controls are the HTML input elements:
▪ input elements
▪ select elements
▪ button elements
▪ textarea elements
ANGULARJS FORMS
• Input controls provides data-binding by using the ng-
model directive.
• <input type="text" ng-model="firstname">
• The application does now have a property named firstname.
• The ng-model directive binds the input controller to the rest of
your application.
• The property firstname, can be referred to in a controller:
EXAMPLE-1
CHECKBOX
❖ A checkbox has the value true or false.
❖ Apply the ng-model directive to a checkbox, and use its value in your
application.
SELECT BOX
❑ Bind radio buttons to your application with the ng-model directive.
❑ Radio buttons with the same ng-model can have different values, but
only the selected one will be used
FORM EXAMPLE
AngularJS can validate input data.
AngularJS offers client-side form
validation.
AngularJS monitors the state of the form
and input fields (input, textarea, select),
and lets you notify the user about the
ANGULARJS current state.
FORM
VALIDATION AngularJS also holds information about
whether they have been touched, or
modified, or not.
You can use standard HTML5 attributes
to validate input, or you can make your
own validation functions.
Client-side validation cannot alone
secure user input. Server side validation
is also necessary.
EXAMPLE 1
EMAIL VALIDATION
FORM STATE AND INPUT STATE
AngularJS is constantly updating the state of both the form and the input fields.
Input fields have the following states:
•$untouched The field has not been touched yet
•$touched The field has been touched
•$pristine The field has not been modified yet
•$dirty The field has been modified
•$invalid The field content is not valid
•$valid The field content is valid
They are all properties of the input field and are either true or false.
Forms have the following states:
•$pristine No fields have been modified yet
•$dirty One or more have been modified
•$invalid The form content is not valid
•$valid The form content is valid
•$submitted The form is submitted
EXAMPLE