Module V
WebApplicationFrameworks: Introduction to application development frame
works: AngularJS, ReactJS
AngularJS: Introduction, AngularJS Expressions, Modules, DataBinding,
Controllers, DOM, Events, Forms, Validations.
1. Introduction to framework of AngularJS
2. Introduction to frame work of ReactJS
3. Introduction to AngualrJS
4. AngualrJS Expressions,
5. Modules, Data Binding
6. Controllers, DOM, Events
7. Forms
8. Validations
AngularJS Introduction
AngularJS is a JavaScript framework. It can be added to an HTML
page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to
HTML with Expressions.
AngularJS is a JavaScript Framework
AngularJS is a JavaScript framework written in JavaScript.
AngularJS is distributed as a JavaScript file, and can be added to a web
page with a script tag:
<script src="[Link]
[Link]"></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.
1
The ng-bind directive binds application data to the HTML view.
AngularJS Example
Example explained:
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 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.
2
AngularJS expressions are much like JavaScript expressions: They
can contain literals, operators, and variables.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Expressions -Example
If you remove the ng-app directive, HTML will display the expression as it
is, without solving it:
Example: Let AngularJS change the value of CSS properties.
Change the color of the input box below, by changing its value:
3
Output:
AngularJS Modules
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.
Controllers always belong to a module.
4
Creating a Module
A module is created by using the AngularJS function [Link]
<div ng-app="myApp">...</div>
<script>
var app = [Link]("myApp", []);
</script>
The "myApp" parameter refers to an HTML element in which the
application will run.
Now you can add controllers, directives, filters, and more, to your
AngularJS application.
Adding a Controller
Add a controller to your application, and refer to the controller with
the ng-controller directive:
5
Adding a Directive
AngularJS has a set of built-in directives which you can use to add
functionality to your application.
In addition you can use the module to add your own directives to your
applications:
Modules and Controllers in Files
It is common in AngularJS applications to put the module and the controllers in
JavaScript files.
In this example, "[Link]" contains an application module definition, while
"[Link]" contains the controller:
6
[Link]
var app = [Link]("myApp", []);
The [] parameter in the module definition can be used to define dependent
modules.
Without the [] parameter, you are not creating a new module, but retrieving an
existing one.
[Link]
[Link]("myCtrl", function($scope) {
$[Link] = "John";
$[Link]= "Doe";
});
Functions can Pollute the Global Namespace
Global functions should be avoided in JavaScript. They can easily be
overwritten or destroyed by other scripts.
AngularJS modules reduces this problem, by keeping all functions local to the
module.
7
When to Load the Library
While it is common in HTML applications to place scripts at the end of
the <body> element, it is recommended that you load the AngularJS library
either in the <head> or at the start of the <body>.
This is because calls to [Link] can only be compiled after the library
has been loaded.
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
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.
8
The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
The ng-app directive also tells AngularJS that the <div> element is the "owner"
of the AngularJS application.
Data Binding
The {{ firstName }} expression, in the example above, is an AngularJS data
binding expression.
Data binding in AngularJS binds AngularJS expressions with AngularJS data.
{{ firstName }} is bound with ng-model="firstName".
In the next example two text fields are bound together with two ng-model
directives:
9
Repeating HTML Elements
The ng-repeat directive repeats an HTML element:
10
The ng-app Directive
The ng-app directive defines the root element of an AngularJS application.
The ng-app directive will auto-bootstrap (automatically initialize) the
application when a web page is loaded.
The ng-init Directive
The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
The ng-model Directive
The ng-model directive binds the value of HTML controls (input, select,
textarea) to application data.
The ng-model directive can also:
Provide type validation for application data (number, email, required).
Provide status for application data (invalid, dirty, touched, error).
Provide CSS classes for HTML elements.
Bind HTML elements to HTML forms.
Read more about the ng-model directive in the next chapter.
Create New Directives
In addition to all the built-in AngularJS directives, you can create your own
directives.
New directives are created by using the .directive function.
To invoke the new directive, make an HTML element with the same tag name
as the new directive.
When naming a directive, you must use a camel case name, w3TestDirective,
but when invoking it, you must use - separated name, w3-test-directive:
11
ou can invoke a directive by using:
Element name
Attribute
Class
Comment
The examples below will all produce the same result:
Element name
<w3-test-directive></w3-test-directive>
Attribute
<div w3-test-directive></div>
12
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both Element names and attribute
names can invoke the directive
The ng-model Directive
With the ng-model directive you can bind the value of an input field to a
variable created in AngularJS.
13
Two-Way Binding
The binding goes both ways. If the user changes the value inside the input field,
the AngularJS property will also change its value:
Example
14
Validate User Input
The ng-model directive can provide type validation for application data
(number, e-mail, required):
Application Status
The ng-model directive can provide status for application data (valid, dirty,
touched, error)
15
CSS Classes
The ng-model directive provides CSS classes for HTML elements, depending
on their status
The ng-model directive adds/removes the following classes, according to the
status of the form field:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
16
AngularJS Data Binding
Data binding in AngularJS is the synchronization between the model and the
view.
Data Model
AngularJS applications usually have a data model. The data model is a
collection of data available for the application.
Example
var app = [Link]('myApp', []);
[Link]('myCtrl', function($scope) {
$[Link] = "John";
$[Link] = "Doe";
});
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:
Example
<p ng-bind="firstname"></p>
You can also use double braces {{ }} to display content from the model:
Example
<p>First name: {{firstname}}</p>
17
Two-way Binding
AngularJS Controller
Applications in AngularJS are controlled by controllers.
Because of the immediate synchronization of the model and the view, the
controller can be completely separated from the view, and simply concentrate
on the model data. Thanks to the data binding in AngularJS, the view will
reflect any changes made in the controller.
18
AngularJS Controllers:
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS Controllers
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard
JavaScript object constructor.
19
Application explained:
The AngularJS application is defined by ng-app="myApp". The
application runs inside the <div>.
The ng-controller="myCtrl" attribute is an AngularJS directive. It
defines a controller.
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application
variables and functions).
The controller creates two properties (variables) in the scope
(firstName and lastName).
The ng-model directives bind the input fields to the controller properties
(firstName and lastName).
Controller Methods
The example above demonstrated a controller object with two properties:
lastName and firstName.
A controller can also have methods (variables as functions):
20
AngularJS HTML DOM
AngularJS has directives for binding application data to the attributes of HTML
DOM elements.
21
The ng-disabled Directive
The ng-disabled directive binds AngularJS application data to the disabled
attribute of HTML elements.
Application explained:
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:
<p>
<button disabled>Click Me!</button>
</p>
22
The ng-hide directive hides or shows an HTML element.
AngularJS Events:
AngularJS has its own HTML events directives
AngularJS Events
You can add AngularJS event listeners to your HTML elements by using one or
more of these directives:
23
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
The event directives allows us to run AngularJS functions at certain user events.
An AngularJS event will not overwrite an HTML event, both events will be
executed.
Mouse Events
Mouse events occur when the cursor moves over an element, in this order:
1. ng-mouseover
2. ng-mouseenter
3. ng-mousemove
4. ng-mouseleave
Or when a mouse button is clicked on an element, in this order:
1. ng-mousedown
2. ng-mouseup
3. ng-click
You can add mouse events on any HTML element.
24
25
AngularJS Forms
Input Controls
Input controls are the HTML input elements:
input elements
select elements
button elements
textarea elements
Data-Binding
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:
26
Checkbox
A checkbox has the value true or false. Apply the ng-model directive to a
checkbox, and use its value in your application.
Radiobuttons
Bind radio buttons to your application with the ng-model directive.
27
Radio buttons with the same ng-model can have different values, but only the
selected one will be used.
<!DOCTYPE html>
<html>
<script
src="[Link]
script>
<body ng-app="">
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the
value of the radio buttons.</p>
</body>
</html>
OUTPUT:
28
Selectbox
Bind select boxes to your application with the ng-model directive.
The property defined in the ng-model attribute will have the value of the
selected option in the selectbox.
<!DOCTYPE html>
<html>
<script
src="[Link]
script>
<body ng-app="">
<form>
Select a topic:
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
29
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
</div>
<p>The ng-switch directive hides and shows HTML sections depending on the
value of the dropdown list.</p>
</body>
</html>
OUTPUT:
AngularJS Form Example:
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="[Link]"><br>
Last Name:<br>
<input type="text" ng-model="[Link]">
<br><br>
30
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = [Link]('myApp', []);
[Link]('formCtrl', function($scope) {
$[Link] = {firstName: "John", lastName: "Doe"};
$[Link] = function() {
$[Link] = [Link]($[Link]);
};
$[Link]();
});
</script>
OUTPUT:
The ng-app directive defines the AngularJS application.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the user object in the
model.
The formCtrl controller sets initial values to the master object, and
defines the reset() method.
The reset() method sets the user object equal to the master object.
The ng-click directive invokes the reset() method, only if the button is
clicked.
AngularJS Form Validation
Form Validation
AngularJS offers client-side form validation.
31
AngularJS monitors the state of the form and input fields (input, textarea,
select), and lets you notify the user about the current state.
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.
32
E-mail
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
33
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
They are all properties of the form, and are either true or false.
<!DOCTYPE html>
<html>
<script
src="[Link]
script>
<body ng-app="">
<p>Try leaving the first input field blank:</p>
<form name="myForm">
<p>Name:
<input name="myName" ng-model="myName" required>
<span ng-show="[Link].$touched && [Link].
$invalid">The name is required.</span>
</p>
<p>Address:
<input name="myAddress" ng-model="myAddress" required>
</p>
</form>
<p>We use the ng-show directive to only show the error message if the field has
been touched AND is empty.</p>
</body>
</html>
OUTPUT:
34
Validation Example
<!DOCTYPE html>
<html>
<script src="[Link]
[Link]"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="[Link].$dirty && [Link].
$invalid">
<span ng-show="[Link].$[Link]">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="[Link].$dirty && [Link].
$invalid">
<span ng-show="[Link].$[Link]">Email is required.</span>
<span ng-show="[Link].$[Link]">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
35
ng-disabled="[Link].$dirty && [Link].$invalid ||
[Link].$dirty && [Link].$invalid">
</p>
</form>
<script>
var app = [Link]('myApp', []);
[Link]('validateCtrl', function($scope) {
$[Link] = 'John Doe';
$[Link] = '[Link]@[Link]';
});
</script>
</body>
</html>
36
