Scribd
Upload
1 views

Angular JS

The document provides an introduction to AngularJS, a JavaScript framework for building Single Page Applications (SPAs) that extends HTML with directives and data binding. It outlines the steps for downloading and setting up AngularJS, creating a simple 'Hello World' example, and explains key concepts such as modules, controllers, directives, and data binding. Additionally, it covers form validation and the states of input fields and forms in AngularJS applications.

Uploaded by

skatyaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

Angular JS

The document provides an introduction to AngularJS, a JavaScript framework for building Single Page Applications (SPAs) that extends HTML with directives and data binding. It outlines the steps for downloading and setting up AngularJS, creating a simple 'Hello World' example, and explains key concepts such as modules, controllers, directives, and data binding. Additionally, it covers form validation and the states of input fields and forms in AngularJS applications.

Uploaded by

skatyaya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 46

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

You might also like