Unit V

CCS375 - WEB TECHNOLOGIES PIT / CSE
UNIT V INTRODUCTION TO ANGULAR and WEB APPLICATIONS

FRAMEWORKS
Introduction to AngularJS, MVC Architecture, Understanding ng attributes,
Expressions and data binding, Conditional Directives, Style Directives,
Controllers, Filters, Forms, Routers, Modules, Services; Web Applications
Frameworks and Tools – Firebase- Docker- Node JS- React- Django- UI & UX.
INTRODUCTION TO ANGULARJS
 AngularJS is a popular open-source JavaScript framework developed and
maintained by Google.
 It is primarily used for building dynamic web applications and is known
for its capability to create single-page applications (SPAs).
 AngularJS follows the Model-View-Controller (MVC) architectural
pattern, which promotes a clear separation of concerns.
 AngularJS is a JavaScript framework. It is a client side scripting
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 written in JavaScript and it is based
on MVC Architecture.
 AngularJS is distributed as a JavaScript file, and can be added to a web
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.
ANGULAR JS EXAMPLE:
<!DOCTYPE html>
<html>
"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
OUTPUT:
Input something in the input box:
Name:
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 APPLICATIONS
 It is mainly used for creating single web page application.
 AngularJS modules define AngularJS applications.

 AngularJS controllers control AngularJS applications.
 The ng-app directive defines the application, the ng-controller directive
defines the controller.
MVC ARCHITECTURE
What is MVC?
The Model-View-Controller (MVC) framework is an architectural/design
pattern that separates an application into three main logical
components Model, View, and Controller. Each architectural component is
built to handle specific development aspects of an application.
It isolates the business logic and presentation layer from each other. It was
traditionally used for desktop graphical user interfaces (GUIs).
Nowadays, MVC is one of the most frequently used industry-standard web
development frameworks to create scalable and extensible projects.
It is also used for designing mobile apps.
MVC was created by Trygve Reenskaug.
The main goal of this design pattern was to solve the problem of users
controlling a large and complex data set by splitting a large application into
specific sections that all have their own purpose.
Features of MVC :
 It provides a clear separation of business logic, Ul logic, and input
logic.
 It offers full control over your HTML and URLs which makes it easy
to design web application architecture.
 It is a powerful URL-mapping component using which we can build
applications that have comprehensible and searchable URLs.
 It supports Test Driven Development (TDD).
Components of MVC :
The MVC framework includes the following 3 components:
 Controller
 Model
 View
Controller:
The controller is the component that enables the interconnection between the
views and the model so it acts as an intermediary. The controller doesn‟t have
to worry about handling data logic, it just tells the model what to do. It
processes all the business logic and incoming requests, manipulates data using
the Model component, and interact with the View to render the final output.
View:
The View component is used for all the UI logic of the application. It
generates a user interface for the user. Views are created by the data which is
collected by the model component but these data aren‟t taken directly but
through the controller. It only interacts with the controller.
Model:
The Model component corresponds to all the data-related logic that the user
works with. This can represent either the data that is being transferred between
the View and Controller components or any other business logic-related data.
It can add or retrieve data from the database. It responds to the controller‟s
request because the controller can‟t interact with the database by itself. The
model interacts with the database and gives the required data back to the
controller.
Working of the MVC framework with an example:

Let‟s imagine an end-user sends a request to a server to get a list of students
studying in a class. The server would then send that request to that particular
controller that handles students. That controller would then request the model
that handles students to return a list of all students studying in a class.
The flow of data in MVC Components

The model would query the database for the list of all students and then return
that list back to the controller. If the response back from the model was
successful, then the controller would ask the view associated with students to
return a presentation of the list of students. This view would take the list of
students from the controller and render the list into HTML that can be used by
the browser.
The controller would then take that presentation and returns it back to the user.
Thus ending the request. If earlier the model returned an error, the controller
would handle that error by asking the view that handles errors to render a
presentation for that particular error. That error presentation would then be
returned to the user instead of the student list presentation.
As we can see from the above example, the model handles all of the data. The
view handles all of the presentations and the controller just tells the model and
view of what to do. This is the basic architecture and working of the MVC
framework.
The MVC architectural pattern allows us to adhere to the following design

principles:
1. Divide and conquer. The three components can be somewhat
independently designed.
2. Increase cohesion. The components have stronger layer cohesion than if
the view and controller were together in a single UI layer.
3. Reduce coupling. The communication channels between the three
components are minimal and easy to find.
4. Increase reuse. The view and controller normally make extensive use of
reusable components for various kinds of UI controls. The UI, however, will
become application-specific, therefore it will not be easily reusable.
5. Design for flexibility. It is usually quite easy to change the UI by changing
the view, the controller, or both.
Advantages of MVC:
 Codes are easy to maintain and they can be extended easily.
 The MVC model component can be tested separately.
 The components of MVC can be developed simultaneously.
 It reduces complexity by dividing an application into three
units. Model, view, and controller.
 It supports Test Driven Development (TDD).
 It works well for Web apps that are supported by large teams of web
designers and developers.
 This architecture helps to test components independently as all
classes and objects are independent of each other
 Search Engine Optimization (SEO) Friendly.
Disadvantages of MVC:
 It is difficult to read, change, test, and reuse this model
 It is not suitable for building small applications.
 The inefficiency of data access in view.
 The framework navigation can be complex as it introduces new
layers of abstraction which requires users to adapt to the
decomposition criteria of MVC.
 Increased complexity and Inefficiency of data
Popular MVC Frameworks:

Some of the most popular and extensively used MVC frameworks are listed
below.
 Ruby on Rails
 Django
 CherryPy
 Spring MVC
 Catalyst
 Rails
 Zend Framework
 Fuel PHP
 Laravel
 Symphony
MVC is generally used on applications that run on a single graphical
workstation. The division of logical components enables readability and
modularity as well as it makes it more comfortable for the testing part.
UNDERSTANDING NG ATTRIBUTES
AngularJS Directives
AngularJS facilitates you to extend HTML with new attributes. These attributes
are called directives. AngularJS directives are HTML attributes with
an ng prefix.
There is a set of built-in directive in AngularJS which offers functionality to

your applications. You can also define your own directives.
Directives are special attributes starting with ng- prefix. Following are the most
common directives:
o ng-app: This directive starts an AngularJS Application.
o ng-init: This directive initializes application data.
o ng-model: This directive
o ng-model: This directive defines the model that is variable to be used in
AngularJS.
o ng-repeat: This directive repeats html elements for each item in a
collection.
AngularJS Directives List
AnglarJS directives are used to add functionality to your application. You can
also add your own directives for your applications.
Following is a list of AngularJS directives:
Directive Description
ng-app It defines the root element of an application.
ng-bind It binds the content of an html element to application data.
ng-bind-html It binds the inner HTML of an HTML element to

application data, and also removes dangerous code from
the html string.
ng-bind- It specifies that the text content should be replaced with a

template template.
ng-blur It specifies a behavior on blur events.
ng-change It specifies an expression to evaluate when content is being

changed by the user.
ng-checked It specifies if an element is checked or not.
ng-class It specifies css classes on html elements.
ng-class- It is same as ng-class, but will only take effect on even

even rows.
ng-class-odd It is same as ng-class, but will only take effect on odd

rows.
ng-click It specifies an expression to evaluate when an element is

being clicked.
ng-cloak It prevents flickering when your application is being

loaded.
ng-controller It defines the controller object for an application.
ng-copy It specifies a behavior on copy events.
ng-hide It hides or shows html elements.
ng-cut It specifies a behavior on cut events.
ng-if It removes the html element if a condition is false.
ng-focus It specifies a behavior on focus events.
ng-init It defines initial values for an application.
ng-href It specifies a URL for the <a> element.
ng-keydown It specifies a behavior on keydown events.
ng-keypress It specifies a behavior on keypress events.

ng-keyup It specifies a behavior on keyup events.
ng-jq It specifies that the application must use a library, like

jQuery.
ng-include It includes html in an application.
ng-list It converts text into a list (array).
ng-options It specifies <options> in a <select> list.
ng-paste It specifies a behavior on paste events.
ng-show It shows or hides html elements.
ng-src It specifies the src attribute for the <img> element.
ng-submit It specifies expressions to run on onsubmit events.
ng-style It specifies the style attribute for an element.
ng-repeat It defines a template for each data in a collection.
ng-switch It specifies a condition that will be used to show/hide child

elements.
ng-value It specifies the value of an input element.

ng-disabled It specifies if an element is disabled or not.
ng-form It specifies an html form to inherit controls from.
ng-model It binds the value of html controls to application data.
ng-app directive
ng-app directive defines the root element. It starts an AngularJS Application and
automatically initializes or bootstraps the application when web page containing
AngularJS Application is loaded. It is also used to load various AngularJS
modules in AngularJS Application.
SYNTAX
<div ng-app = ""> ... </div>
„<div ng-app="myApp">: This is the basic syntax of the ng-app directive. It is

placed on an HTML element (here, a <div>) to designate it as the root of the
AngularJS application named 'myApp'.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS App</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></scr
ipt>
</head>
<body>

<div ng-app="myApp">
<h1>Welcome to my AngularJS App!</h1>

</div>
<script>
// AngularJS module creation
var app = angular.module('myApp', []);
// Define controllers, services, etc., within this module
</script>
</body>
</html>
 The HTML file includes the AngularJS library through a script tag.
 Inside a <div> with the ng-app="myApp" attribute, you can place
AngularJS content and directives.
 This example simply displays a welcoming header within the AngularJS
root element.
 The script section defines an AngularJS module named 'myApp' with an
empty dependency array [].
ng-init directive
The ng-init directive evaluates the given expression. This expression can be
used to initialize variables, set up event listeners, or perform other tasks that
need to be done when the application starts.
SYNTAX:
<any ng-init="expression"> ...</any>

The expression can be any JavaScript expression. The expression will be

evaluated in the current scope, and the result of the expression will be assigned
to the specified variable.
EXAMPLE:
Here is an example of how to use the ng-init directive to initialize a variable:

<!DOCTYPE html>
<html>
<script
ipt>
<body>
<div ng-app="" ng-init="myText='Hello World!'">
<h1>{{myText}}</h1>
<p>The ng-init directive has created an AngularJS variable, which you can use
in the application.</p>
</div>
</body>
</html>
OUTPUT:
Hello World!
The ng-init directive has created an AngularJS variable, which you can use in
the application.
ng-model directive
The ng-model directive is a core Angular directive that binds input, select, and
textarea elements to application data.
It establishes a two-way data binding between the view (HTML) and the model
(TypeScript), ensuring that any changes made to the input field are reflected in
the corresponding data property and vice versa.
In following example, we've defined a model named "name".
SYNTAX:
The syntax for the ng-model directive is as follows:
<input type="text" ng-model="propertyName">
<select ng-model="propertyName">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<textarea ng-model="propertyName">Initial Text</textarea>
EXAMPLE:
Consider a component with a property named userName:
TYPESCRIPT
export class MyComponent {
userName: string = '';
}
To bind an input field to this property, use the ng-model directive as follows:
HTML
<input type="text" ng-model="userName">
Any changes made to the input field will be reflected in the userName property,
and any changes to the userName property will be reflected in the input field.
ng-repeat directive
ng-repeat directive repeats html elements for each item in a collection. In
following example, we've iterated over array of countries.
SYNTAX:
<ul>
<li ng-repeat="item in items">{{ item }}</li>

</ul>
</div>
<li ng-repeat="fruit in fruits">{{ fruit }}</li>: This demonstrates the ng-

repeat directive in action. It is applied to an <li> element within an AngularJS
application and iterates through the fruits array, displaying each item in the
array.
Example:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS ng-repeat Example</title>
<script
ipt>
</head>
<body>

<h2>Fruits List:</h2>
<ul>

<li ng-repeat="fruit in fruits">{{ fruit }}</li>
</ul>
</div>
<script>
// AngularJS module creation
// Define controllers, services, etc., within this module

app.controller('myController', function($scope) {
$scope.fruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Mango'];
});
</script>
</body>
</html>
 The HTML file includes the AngularJS library using a script tag.
 Inside the AngularJS root element (ng-app="myApp"), there is an
unordered list (<ul>) containing list items (<li>).
 ng-repeat="fruit in fruits" creates a loop that iterates through the fruits
array.
 For each item in the fruits array, the {{ fruit }} expression displays the
item's value within an <li> element.
 The AngularJS script defines an app module and a controller named
myController.
 The controller sets the value of $scope.fruits to an array of fruit names.
AngularJS directives Example
Let's take an example to use all the above discussed directives:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-IND',name:'India'}, {locale:'en-
PAK',name:'Pakistan'}, {locale:'en-AUS',name:'Australia'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
</body>
</html>
OUTPUT:
ANGULARJS EXPRESSIONS
In AngularJS, expressions are used to bind application data to HTML.
AngularJS resolves the expression, and return the result exactly where the
expression is written.
Expressions are written inside double braces {{expression}}.They can also be
written inside a directive:
ng-bind="expression".
AnularJS expressions are very similar to JavaScript expressions. They can
contain literals, operators, and variables. For example:
{{ 5 + 5 }} or {{ firstName + " " + lastName }}
AngularJS Expressions Example
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"><
/script>
<body>
<div ng-app>
<p>A simple expression example: {{ 5 + 5 }}</p>
</div>
</body>
</html>
OUTPUT:
Note: If you remove the directive "ng-app", HTML will display the expression
without solving it.
You can also write expressions wherever you want, AngularJS will resolve the
expression and return the result.
AngularJS Numbers
"AngularJS Numbers" refers to the handling, formatting, manipulation, and

validation of numeric data within AngularJS applications. It involves using
built-in filters, directives like ng-model, ng-change, and controllers to manage
numerical values efficiently, ensuring proper display, input handling, and
validation in web applications.
Example:
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="quantity=5;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>
We can use the same example by using ng-bind:
See this example:
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="quantity=5;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>
OUTPUT:
Total in dollar: 25
AngularJS Strings
AngularJS Strings" refer to the management, formatting, manipulation, and

validation of text data within AngularJS applications. This involves utilizing
filters, controllers, directives, and functionalities to handle strings effectively.
AngularJS provides tools for transforming string case, limiting string length,
manipulating text content, validating input, and facilitating string display
through data binding mechanisms.
EXAMPLE
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="firstName='Sonoo';lastName='Jaiswal'">
<p>My full name is: {{ firstName + " " + lastName }}</p>
</div>
</body>
</html>
Same example with ng-bind:

<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="firstName='Sonoo';lastName='Jaiswal'">
<p>My full name is: <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
</body>
</html>
OUTPUT:
My full name is: Sonoo Jaiswal
AngularJS Objects
AngularJS Objects" refers to managing, manipulating, and displaying structured

data in the form of JavaScript objects within AngularJS applications. This
involves utilizing two-way data binding, controllers, expressions, and filters to
handle object properties, display their values in the view, and enable interaction
with object-based data within web applications
EXAMPLE
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="person={firstName:'Sonoo',lastName:'Jaiswal'}">
<p>The name is {{ person.firstName }}</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="person={firstName:'Sonoo',lastName:'Jaiswal'}">
<p>The name is <span ng-bind="person.firstName"></span></p>
</div>
</body>
</html>
OUTPUT:
The name is: Sonoo Jaiswal
AngularJS Arrays
"AngularJS Arrays" involve handling and manipulating collections of data
organized in an array format within AngularJS applications. This includes using
features like data binding, controllers, directives, and filters to manage array
elements efficiently. AngularJS facilitates displaying array elements in the
view, performing operations like iteration, filtering, sorting, adding, removing,
and updating array items, thereby enabling seamless interaction with array-
based data structures in web applications.
EXAMPLE
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The first result is {{ points[0] }}</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The first result is <span ng-bind="points[0]"></span></p>
</div>
</body>
</html>
OUTPUT:
The first result is 1
ANGULARJS DATA BINDING
Data binding is a very useful and powerful feature used in software

development technologies. It acts as a bridge between the view and business
logic of the application.
AngularJS follows Two-Way data binding model.
One-Way Data Binding
The one-way data binding is an approach where a value is taken from the data
model and inserted into an HTML element. There is no way to update model
from view. It is used in classical template systems. These systems bind data in
only one direction.
Two-Way Data Binding
Data-binding in Angular apps is the automatic synchronization of data between

the model and view components.
Data binding lets you treat the model as the single-source-of-truth in your
application. The view is a projection of the model at all times. If the model is
changed, the view reflects the change and vice versa.
EXAMPLE PROGRAM:
<!DOCTYPE html>
<html>
/script>
<body>
<div ng-app="" ng-init="firstName='Ajeet'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
OUTPUT:
In the above example, the {{ firstName }} expression is an AngularJS data binding
expression. Data binding in AngularJS binds AngularJS expressions with
AngularJS data.
{{ firstName }} is bound with ng-model="firstName".
Let's take another example where two text fields are bound together with two
ng-model directives:
<!DOCTYPE html>
<html>
/script>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>
OUTPUT:
CONDITIONAL DIRECTIVES IN ANGULARJS
 AngularJS facilitates you to extend HTML with new attributes. These

attributes are called directives.
 There is a set of built-in directive in AngularJS which offers functionality
to your applications. You can also define your own directives.
 Directives are special attributes starting with ng- prefix.
 Conditional statements of any language are very important. That help to
activate functionality based on variable value.
 This angular 4 tutorial help to demonstrate conditional statement with
example.
ng-if Directive:
The ng-if Directive in AngularJS is used to remove or recreate a portion of the

HTML element based on an expression. The ng-if is different from the ng-hide
directive because it completely removes the element in the DOM rather than
just hiding the display of the element. If the expression inside it is false then the
element is removed and if it is true then the element is added to the DOM.
Used to conditionally render or remove an element based on a boolean

expression.
SYNTAX:
<div ng-if="condition">Content to show if condition is true</div>
Conditions like ng-if else and ng-if else then are sub parts of ng-if .
EXAMPLE:
<h1>ngIf </h1>
<p *ngIf="showMe">
ShowMe is checked
</p>
<p *ngIf="!showMe">
ShowMe is unchecked
</p>
<h1>ngIf Else</h1>
<p *ngIf="showMe; else elseBlock1">
ShowMe is checked
</p>
OUTPUT:
ng-show and ng-hide Directives:
ng-show:
 Used to show an element based on a boolean expression.(i.e)Shows or

hides the associated HTML element.
 The ng-Show directive in AngularJS is used to show or hide a given

specific HTML element based on the expression provided to the ng-show
attribute. In the background, the HTML element is shown or hidden by
removing or adding the .ng-hide CSS class onto the element. It is a
predefined CSS class which sets the display to none.
ng-hide:
 Used to hide an element based on a boolean expression.(or)
 Conditionally hides an HTML element based on the truthiness of an
expression.
 The ng-hide directive in AngularJS is a function using which an element
will be hidden if the expression is TRUE. If the Expression is FALSE, the
element will be shown. In the background, the element is shown or
hidden by removing or adding the .ng-hide CSS class onto the element
SYNTAX:
<div ng-show="condition">Content to show if condition is true</div>
<div ng-hide="condition">Content to hide if condition is true</div>
Example: ng-show
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
OUTPUT:
Example: ng-hide
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Hide Angular" ng-click="ShowHide()"/>
<br><br><div ng-hide="IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = $scope.IsVisible = true;
} });
</script>
OUTPUT:
ng-switch Directive:
 Used to conditionally render content based on multiple conditions.
ng-switch, provide a way to dynamically control the visibility and rendering of
elements based on certain conditions. These directives enhance the flexibility
and responsiveness of AngularJS applications.
 Angular evaluates the switch_expression at runtime and based on its
value displays or removes the elements from the DOM.
SYNTAX:
<div ng-switch="variable">
<div ng-switch-when="value1">Content for value1</div>
<div ng-switch-default>Default content</div>
</div>
EXAMPLE:
<div class='card'>
<div class='card-header'>
ngSwitch Example
</div>
<div class="card-body">
Input string : <input type='text' [(ngModel)]="num" />
<div [ngSwitch]="num">
<div *ngSwitchCase="'1'">One</div>
<div *ngSwitchCase="'2'">Two</div>
<div *ngSwitchCase="'3'">Three</div>
<div *ngSwitchCase="'4'">Four</div>
<div *ngSwitchCase="'5'">Five</div>
<div *ngSwitchDefault>This is Default</div>
</div>
</div>
</div>
OUTPUT:
STYLE DIRECTIVES
Style directives in AngularJS are a way of applying CSS styles to
HTML elements dynamically, based on some conditions or expressions.
They can be useful for creating responsive and interactive web pages that
change their appearance according to the user‟s actions or data changes.
TYPES:
There are two main types of style directives in AngularJS:
 ng-style and
 ng-class.
 Other types of Style directives in AngularJS includes:
 ng-blur
 ng-click and
 ng-disabled
PURPOSE:
The ng-style directive allows you to specify the style attribute for an HTML
element as an object or an expression returning an object. The object consists of
CSS properties and values, in key-value pairs.
ng-style directive:
The ng-style directive specifies the style attribute for the HTML element.
The value of the ng-style attribute must be an object, or an expression returning
an object.
The object consists of CSS properties and values, in key value pairs.
The ng-style Directive in AngularJS is used to apply custom CSS styles on an
HTML element. The expression inside the ng-style directive must be an
object. It is supported by all the HTML elements.
SYNTAX:
<element ng-style="expression"></element>
expression: It specifies the particular style to be implemented for the
respective element.
This is supported by all HTML elements.
Example program:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></sc
ript>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myObj = {
"color" : "white",
"background-color" : "coral",
"font-size" : "60px",
"padding" : "50px"
}
});
</script>
</body>
</html>
OUTPUT:
In the above example,

We are using a HTML document format to implement AngularJS
using <script> tag. Here, we declare the ng-style directive with a name “myObj”
that is defined in the script (AngularJS) tag to apply background color to the h1
element i.e, WELCOME.
ng-class directive:
 The ng-class directive dynamically binds one or more CSS classes to an
HTML element.
 The value of the ng-class directive can be a string, an object, or an array.
 If it is a string, it should contain one or more, space-separated class
names.
 As an object, it should contain key-value pairs, where the key is the class
name of the class you want to add, and the value is a boolean value. The
class will only be added if the value is set to true.
 As an array, it can be a combination of both. Each array element can be
either a string, or an object, described as above.
SYNTAX:
<element ng-class="expression"></element>
Example program:
<!DOCTYPE html>
<html>
<script
ipt>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:coral;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">
<p>Choose a class:</p>
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
</body>
</html>
OUTPUT:
Here we use the ng-class directive to choose between two options i.e., Sky and
Tomato within the same class “Home”.
There are two types of ng-class directive. They are:
 ng-class-even
 ng-class-odd
ng-class-even:
The ng-class-even Directive in AngularJS is used to specify the CSS classes
on every even appearance of HTML elements. It is used to dynamically bind
classes on every even HTML element. If the expression inside the ng-class-
even directive returns true then only the class is added else it is not added.
The ng-repeat directive is required for the ng-class-even directive to work. It
is supported by all HTML elements.
SYNTAX:
<element ng-class-even="expression">Contents...</element>
expression: This parameter returns more than one class name or simply
specifies the CSS class for even appearance of HTML elements.
Example program:
<div ng-init="items=['Item 3', 'Item 2', 'Item 1', 'Item 0']">

<button ng-click="items.unshift('Item ' + items.length)">Add item</button>
<hr />
<table>
<tr ng-repeat="item in items" ng-class-even="'even'">
<td>{{ item }}</td>
</tr>
</table>
</div>
OUTPUT:
Here the class “even” is used to highlight the even items everytime a new item
is added by clicking “Add item” button.
ng-class-odd:
The ng-class-odd Directive in AngularJS is used to specify the CSS classes
on every odd appearance of HTML elements. It is used to dynamically bind
classes on every odd HTML element. If the expression inside the ng-class-odd
directive returns true then only the class is added else it is not added. The ng-
repeat directive is required for the ng-class-odd directive to work. This
directive can be utilized for the styling of the items in a list or rows in a table,
although, can be used for remaining HTML elements, as well. It is supported
by all HTML elements.
SYNTAX:
<element ng-class-odd="expression">Contents... </element>
Example program:
<div ng-init="items=['Item 3', 'Item 2', 'Item 1', 'Item 0']">

<button ng-click="items.unshift('Item ' + items.length)">Add item</button>
<hr />
<table>
<tr ng-repeat="item in items" ng-class-odd="'odd'">
<td>{{ item }}</td>
</tr>
</table>
</div>
OUTPUT:
Here the class “odd” is used to highlight the odd items everytime a new item is
added by clicking “Add item” button.
ng-click directive:
 The ng-click Directive in AngluarJS is used to apply custom behavior
when an element is clicked. It can be used to show/hide some element or
it can pop up an alert when the button is clicked.
 In other words, The ng-click directive tells AngularJS what to do when an
HTML element is clicked.
SYNTAX:
<element ng-click="expression"></element>
expression: It specifies when the particular element is clicked then the

specific expression will be evaluated.
Example program:
<!DOCTYPE html>
<html>
<script
ipt>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>Click the button to run a function:</p>
<button ng-click="myFunc()">OK</button>
<p>The button has been clicked {{count}} times.</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myFunc = function() {
$scope.count++;
};
}]);
</script>
</body>
</html>
OUTPUT:
ng-blur directive:
 The ng-blur Directive in AngularJS is fired when an HTML element
loses their focus.
 It doesn‟t override with element‟s original onblur event i.e. both the ng-
blur expression and original onblur event will execute.
SYNTAX:
<element ng-blur="expression">Contents... </element>
expression: It refers to the variable or the expression to be evaluated.

Note: The ng-blur directive is supported
by <input>, <a>, <select> and <textarea>.
Example program:
<style>
.blurClass {background-color: lightgray;}
</style>
<div ng-app="myApp" ng-controller='MyCtrl' ng-init="blur=false;">

Click on input field and click somewhere else.
<input type=”text” ng-class=”{blurClass:blur}” ng-blur=”blur=true;”
ng-blur= “blur=false;”><br>
blur={{blur}}
</div>
<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script>
var module = angular.module('myApp', []);
module.controller('MyCtrl', function($scope) {});
</script>
OUTPUT
ANGULARJS CONTROLLERS
 AngularJS controllers control the data of AngularJS applications.
 AngularJS controllers are regular JavaScript Objects.
 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.
Controller Methods:
A controller can have methods (variables as functions)
The example demonstrated a controller object with two properties: lastName
and firstName.
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</body>
</html>
OUTPUT:
John
First Name:
Doe
Last Name:
Full Name: John Doe

Controllers In External Files:

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:
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
<body>
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script src="personController.js"></script>
</body>
</html>
personController.js
<script>
app.controller('personCtrl', function($scope) {
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
OUTPUT:
John
First Name:
Doe
Last Name:
AngularJS Scope:
 The scope is the binding part between the HTML (view) and the
JavaScript (controller).
 The scope is an object with the available properties and methods.
 The scope is available for both the view and the controller.
 When you make a controller in AngularJS, you pass the $scope object as
an argument
Root Scope:
 All applications have a $rootScope which is the scope created on the
HTML element that contains the ng-app directive.
 The rootScope is available in the entire application.
ANGULARJS FILTERS
 Filters can be added in AngularJS to format data.
 AngularJS provides filters to transform data:
 currency Format a number to a currency format.
 date Format a date to a specified format.
 filter Select a subset of items from an array.
 json Format an object to a JSON string.
 limitTo Limits an array/string, into a specified number of

elements/characters.
 lowercase Format a string to lower case.
 number Format a number to a string.
 orderBy Orders an array by an expression.
 uppercase Format a string to upper case.
Adding Filters to Expressions
 Filters can be added to expressions by using the pipe character |, followed
by a filter.
UPPERCASE:
The uppercase filter format strings to upper case:
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
<body>
<p>The name is {{ lastName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe"
});
</script>
</body>
</html>
OUTPUT:
The name is DOE
LOWERCASE:
->The lowercase filter format strings to lower case:
-> From the above example, instead of uppercase, you put lowercase.(inside the
<div> tag)
EXAMPLE:
<p>The name is {{ lastName | lowercase }}</p>
Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe character |,
followed by a filter.
ORDERBY:
The orderBy filter sorts an array:
EXAMPLE:
<script
ipt>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
});
</script>
</body>
OUTPUT:
Looping with objects:
 Joe, Denmark
 Birgit, Denmark
 Margareth, England
 Mary, England
 Jani, Norway
 Hege, Norway
 Kai, Norway
 Carl, Sweden
 Gustav, Sweden
CURRENCY:
The currency filter formats a number as currency:
EXAMPLE:
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
<script>
app.controller('costCtrl', function($scope) {
$scope.price = 58;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
OUTPUT:
Price: $58.00
The currency filter formats a number to a currency format.
FILTER:
 The filter filter selects a subset of an array.
 The filter filter can only be used on arrays, and it returns an array
containing only the matching items.
EXAMPLE
Return the names that contains the letter "i":
<ul>
<li ng-repeat="x in names | filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Sort an Array Based on User Input:

The code for sorting an array
<html>
<script
ipt>
<body>
<p>Click the table headers to change the sorting order:</p>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
OUTPUT:
After clicking the header:

ANGULARJS ROUTING
The ng-Route module helps your application to become a Single Page
Application.
What is Routing in AngularJS?
 If you want to navigate to different pages in your application, but you
also want the application to be a SPA (Single Page Application), with no
page reloading, you can use the ng-Route module.
 The ng-Route module routes your application to different pages without
reloading the entire application.
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-
route.js"></script>
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back
to "main.htm"</p>
</body>
</html>
OUTPUT:
Main
Red
Green
Blue
Main
Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to
"main.htm"
What does we Need?
 To make the applications ready for routing, we must include the
AngularJS Route module:
route.js"></script>
 Then we must add the ngRoute as a dependency in the application
module:
 Now the application has access to the route module, which provides
the $routeProvider. Use the $routeProvider to configure different routes
in the application:
$routeProvider
.when("/", {
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Where Does it Go?

 The application needs a container to put the content provided by the
routing.
 This container is the ng-view directive.
 There are three different ways to include the ng-view directive in the
application:
EXAMPLE:
<div ng-view></div>
<ng-view></ng-view>
<div class="ng-view"></div>
Applications can only have one ng-view directive, and this will be the
placeholder for all views provided by the route.
$routeProvider
With the $routeProvider you can define what page to display when a user clicks
a link.
EXAMPLE:
Define a $routerProvider:
<!DOCTYPE html>
<html>
<script
ipt>
route.js"></script>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
<p>Click on the links to read about London and Paris.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/", {
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
</script>
</body>
</html>
OUTPUT:
Main
City 1
City 2
Click on the links to read about London and Paris.
Main
->Define the $routeProvider using the config method of your application. Work
registered in the config method will be performed when the application is
loading.
Controllers
With the $routeProvider you can also define a controller for each "view".
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
route.js"></script>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
<p>Click on the links.</p>
<p>Note that each "view" has its own controller which each gives the "msg"
variable a value.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});
</script>
</body>
</html>
OUTPUT:
Main
City 1
City 2
Click on the links.
Note that each "view" has its own controller which each gives the "msg"
variable a value.
Main
The otherwise method
 In the previous examples we have used the when method of

the $routeProvider.
 We can also use the otherwise method, which is the default route when
none of the others get a match.
EXAMPLE:
<!DOCTYPE html>
<html>
<script
ipt>
route.js"></script>
<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>
<p>Click on the links to change the content.</p>
<p>Use the "otherwise" method to define what to display when none of the
links are clicked.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75%
water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95%

water.</p>"
})
.otherwise({
template : "<h1>Nothing</h1><p>Nothing has been selected</p>"
});
});
</script>
</body>
</html>
OUTPUT:
Main
Banana
Tomato
Click on the links to change the content.
Use the "otherwise" method to define what to display when none of the links are
clicked.
Nothing has been selected
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.
Creating a Module:
 A module is created by using the AngularJS function angular.module
 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.
EXAMPLE:
<html>
<script
ipt>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
</script>
</body>
</html>
OUTPUT:
John Doe
ANGULAR FORMS
Forms are collection of controls that is input field , buttons , checkbox and
these can be validated real time . Forms in AngularJS provides data-binding and
validation of input controls. As soon as a user of the form completes writing a
field and moves to the next one it get validated and suggests the user where he
might have gone wrong .
So a form can be consisting of many number of controls :
1. Input elements ( Input field )

2. Select elements ( Checkbox , Radiobox )
3. Button elements ( button )
4. Textarea elements
5. SelectBox ( Dropdowns )
Data-Binding
Input field :
Input controls provides data-binding by using the ng-model directive.
SYNTAX :
<input type="text" ng-model="firstname">
Checkbox and Selectbox ( Dropdowns ) :

In a form , the variable defined in ngModel is stored with truie on getting
selected otherwise false . in Select , the selected value gets stored in the variable
defined in ngModel .
EXAMPLE :
<form>
<input id="myVar" type="checkbox" ngModel name="myVar"
#myVar="ngModel">
<p>The checkbox is selected: {{myVar.value}}</p>
<br />
<select ngModel name="mychoice" #myChoice="ngModel">
<option>A</option>
<option>E</option>
<option>I</option>
<option>O</option>
<option>U</option>
</select>
<p>The selected option from Dropdown {{ myChoice.value }}</p>
</form>
OUTPUT :
Radiobuttons and Buttons :
Radio buttons used in the forms should allow only one field
to be selected at a time to make sure this is the case we should associate it with
only ngModel .
EXAMPLE :
<form>
<p>Select a radio button to know which Vowel it is associated to:</p>
<input value="A" type="radio" ngModel name="myVar"
#myVar="ngModel">
<input value="E" type="radio" ngModel name="myVar"
#myVar="ngModel">
<input value="I" type="radio" ngModel name="myVar"
#myVar="ngModel">
<input value="O" type="radio" ngModel name="myVar"

#myVar="ngModel">
<input value="U" type="radio" ngModel name="myVar"
#myVar="ngModel">
<br/><button *ngIf='myVar.touched'>Submit</button>
</form>
<p>You have selected: {{myVar.value}}</p>
OUTPUT :
Before selecting After selecting
EXAMPLE FOR CREATING A FORM :
<form>
<div class="form-group">
<label for="firstName">Name</label>
<input type="text"
id="firstName"
placeholder="Name">
</div>
<label for="email">Email</label>
<input
type="text"
id="email"
placeholder="Email">
</div>
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Password">
</div>
<label for="phone">mobile</label>
<input
type="text"
id="phone"
ngModel name="phone"
#phone="ngModel"
placeholder="Mobile">
</div>
</form>
<p>{{ phone.value }}</p>
OUTPUT :
FORM VALIDATION :
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 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.
Form input fields have the following states:
 $untouched: It shows that field has not been touched yet.

 $touched: It shows that field has been touched.
 $pristine: It represents that the field has not been modified yet.
 $dirty: It illustrates that the field has been modified.
 $invalid: It specifies that the field content is not valid.
 $valid: It specifies that the field content is valid.
These all are the properties of the input field which can be either true or false.
Forms have the following states:
 $pristine: It represents that the fields have not been modified yet.
 $dirty: It illustrates that one or more fields have been modified.
 $invalid: It specifies that the form content is not valid.
 $valid: It specifies that the form content is valid.
 $submitted: It specifies that the form is submitted.
These all are the properties of the form which can be either true or false. These
states can be used to show meaningful messages to the user.
EXAMPLE :
<!DOCTYPE html>
<html>
<script
ipt>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
OUTPUT :
BEFORE WRITING AFTER WRITING
WEB SERVICES
DEFINITION:
Web services are XML-based information exchange systems that use the
Internet for direct application-to-application interaction. These systems can
include programs, objects, messages, or documents. A web service is a
collection of open protocols and standards used for exchanging data between
applications or systems.
The Internet is the worldwide connectivity of hundreds of thousands of
computers of various types that belong to multiple networks. On the World
Wide Web, a web service is a standardized method for propagating messages
between client and server applications. A web service is a software module
that is intended to carry out a specific set of functions. Web services in cloud
computing can be found and invoked over the network.
The web service would be able to deliver functionality to the client that
invoked the web service.
A web service is a set of open protocols and standards that allow data to be
exchanged between different applications or systems. Web services can be
used by software programs written in a variety of programming languages and
running on a variety of platforms to exchange data via computer networks
such as the Internet in a similar way to inter-process communication on a
single computer.
Any software, application, or cloud technology that uses standardized web
protocols (HTTP or HTTPS) to connect, interoperate, and exchange data
messages – commonly XML (Extensible Markup Language) – across the
internet is considered a web service.
Web services have the advantage of allowing programs developed in different
languages to connect with one another by exchanging data over a web service
between clients and servers. A client invokes a web service by submitting an
XML request, which the service responds with an XML response.
Functions of Web Services

 It‟s possible to access it via the internet or intranet networks.
 XML messaging protocol that is standardized.
 Operating system or programming language independent.
 Using the XML standard, it is self-describing.

 A simple location approach can be used to locate it.
Components of Web Service
XML and HTTP is the most fundamental web services platform. The
following components are used by all typical web services:
SOAP (Simple Object Access Protocol)

SOAP stands for “Simple Object Access Protocol.” It is a transport-
independent messaging protocol. SOAP is built on sending XML data in the
form of SOAP Messages. A document known as an XML document is
attached to each message. Only the structure of the XML document, not the
content, follows a pattern. The best thing about Web services and SOAP is that
everything is sent through HTTP, the standard web protocol.
A root element known as the element is required in every SOAP document. In
an XML document, the root element is the first element. The “envelope” is
separated into two halves. The header comes first, followed by the body. The
routing data, or information that directs the XML document to which client it
should be sent to, is contained in the header. The real message will be in the
body.
UDDI (Universal Description, Discovery, and Integration)

UDDI is a standard for specifying, publishing and discovering a service
provider‟s online services. It provides a specification that aids in the hosting of
data via web services. UDDI provides a repository where WSDL files can be
hosted so that a client application can discover a WSDL file to learn about the
various actions that a web service offers. As a result, the client application will
have full access to the UDDI, which serves as a database for all WSDL files.
The UDDI registry will hold the required information for the online service,
just like a telephone directory has the name, address, and phone number of a
certain individual. So that a client application may figure out where it is.
WSDL (Web Services Description Language)

If a web service can‟t be found, it can‟t be used. The client invoking the web
service should be aware of the location of the web service. Second, the client
application must understand what the web service does in order to invoke the
correct web service. The WSDL, or Web services description language, is used
to accomplish this. The WSDL file is another XML-based file that explains
what the web service does to the client application. The client application will
be able to understand where the web service is located and how to use it by
using the WSDL document.
How Does Web Service Work?
The diagram depicts a very simplified version of how a web service would
function. The client would use requests to send a sequence of web service calls
to a server that would host the actual web service.
Remote procedure calls are what are used to make these requests. Calls to
methods hosted by the relevant web service are known as Remote Procedure
Calls (RPC). Example: Flipkart offers a web service that displays prices for
items offered on Flipkart.com. The front end or presentation layer can be
written in .Net or Java, but the web service can be communicated using either
programming language. The data that is exchanged between the client and the
server, which is XML, is the most important part of a web service design.
XML (Extensible markup language) is a simple intermediate language that is
understood by various programming languages. It is a counterpart to HTML.
As a result, when programs communicate with one another, they do so using
XML. This creates a common platform for applications written in different
programming languages to communicate with one another.
For transmitting XML data between applications, web services employ SOAP
(Simple Object Access Protocol). The data is sent using standard HTTP. A
SOAP message is data that is sent from the web service to the application. An
XML document is all that is contained in a SOAP message. The client
application that calls the web service can be created in any programming
language because the content is written in XML.
Features/Characteristics Of Web Service

Web services have the following features:
(a) XML Based: The information representation and record transportation

layers of a web service employ XML. There is no need for networking,
operating system, or platform binding when using XML. At the middle level,
web offering-based applications are highly interoperable.
(b) Loosely Coupled: A customer of an internet service provider isn‟t

necessarily directly linked to that service provider. The user interface for a
web service provider can change over time without impacting the user‟s ability
to interact with the service provider. A strongly coupled system means that the
patron‟s and server‟s decisions are inextricably linked, indicating that if one
interface changes, the other should be updated as well.
A loosely connected architecture makes software systems more manageable

and allows for easier integration between different structures.
(c) Capability to be Synchronous or Asynchronous: Synchronicity refers to

the client‟s connection to the function‟s execution. The client is blocked and
the client has to wait for the service to complete its operation, before
continuing in synchronous invocations. Asynchronous operations allow a
client to invoke a task and then continue with other tasks.
Asynchronous clients get their results later, but synchronous clients get their
effect immediately when the service is completed. The ability to enable
loosely linked systems requires asynchronous capabilities.
(d) Coarse-Grained: Object-oriented systems, such as Java, make their

services available through individual methods. At the corporate level, a
character technique is far too fine an operation to be useful. Building a Java
application from the ground, necessitates the development of several fine-
grained strategies, which are then combined into a rough-grained provider that
is consumed by either a buyer or a service.
Corporations should be coarse-grained, as should the interfaces they expose.
Web services generation is an easy approach to define coarse-grained services
that have access to enough commercial enterprise logic.
(e) Supports Remote Procedural Call: Consumers can use an XML-based

protocol to call procedures, functions, and methods on remote objects utilizing
web services. A web service must support the input and output framework
exposed by remote systems.
Enterprise-wide component development Over the last few years, JavaBeans
(EJBs) and.NET Components have become more prevalent in architectural and
enterprise deployments. A number of RPC techniques are used to allocate and
access both technologies.

A web function can support RPC by offering its own services, similar to those
of a traditional role, or by translating incoming invocations into an EJB
or.NET component invocation.
(f) Supports Document Exchanges: One of XML‟s most appealing features

is its simple approach to communicating with data and complex entities. These
records can be as simple as talking to a current address or as complex as
talking to an entire book or a Request for Quotation. Web administrations
facilitate the simple exchange of archives, which aids incorporate
reconciliation. The web benefit design can be seen in two ways:
(i) The first step is to examine each web benefit on-screen character in detail.
(ii) The second is to take a look at the rapidly growing
web benefit convention stack.
Advantages Of Web Service

Using web services has the following advantages:
(a) Business Functions can be exposed over the Internet: A web service is a
controlled code component that delivers functionality to client applications or
end-users. This capability can be accessed over the HTTP protocol, which
means it can be accessed from anywhere on the internet. Because all apps are
now accessible via the internet, Web services have become increasingly
valuable. Because all apps are now accessible via the internet, Web services
have become increasingly valuable. That is to say, the web service can be
located anywhere on the internet and provide the required functionality.
(b) Interoperability: Web administrations allow diverse apps to communicate

with one another and exchange information and services. Different apps can
also make use of web services. A .NET application, for example, can
communicate with Java web administrations and vice versa. To make the
application stage and innovation self-contained, web administrations are used.
(c) Communication with Low Cost: Because web services employ the SOAP
over HTTP protocol, you can use your existing low-cost internet connection to
implement them. Web services can be developed using additional dependable
transport protocols, such as FTP, in addition to SOAP over HTTP.
(d) A Standard Protocol that Everyone Understands: Web services

communicate via a defined industry protocol. In the web services protocol
stack, all four layers (Service Transport, XML Messaging, Service
Description, and Service Discovery) use well-defined protocols.
(e) Reusability: A single web service can be used simultaneously by several
client applications.
WEB APPLICATION
DEFINITION:
A web-application is an application program that is usually stored on a remote
server, and users can access it through the use of Software known as web-
browser.
In general, a web application can contain online shops (or we can also say them
e-commerce shops), webmail's, calculators, social media platforms, etc. There is
also some kind of web application that usually requires a special kind of web
browser to access them. We cannot access those kinds of web applications by
using regular web- browsers. However, most of the web applications available
on the internet can be accessed using a standard web browser.
If we talk about the web application in general, a web application usually uses a
combination of the server-side scripts such as PHP, ASP, for handling the
information/ data storage and retrieval of the data.
Some of them also use the client-side scripts such as JavaScript, HTML to
represent the data/information in front of the users, and some of the web
applications are also using both server-side and client-side at the same time.
It allows the users to communicate with the organization or companies by using

the online form, online forums, shopping carts, content management system,
and much more.
Apart from that web applications also allow its users to create documents, share
them, or share the data/ information. By using the web application, users can
collaborate on same projects by event when they are not available on the same
geographical location.
After knowing that what a web application is, there may be a question hitting in
mind that how it will work.
How does a web- application work?
In general, web-application does not require downloading them because, as we

already discussed, the web application is a computer program that usually
resides on the remote server. Any user can access it by using one of the standard
web browsers such as Google Chrome, Safari, Microsoft Edge, etc., and most
of them are available free for everyone.
A web application are generally coded using the languages supported by almost
every web-browsers such as HTML, JavaScript because these are the languages
that rely on the web browsers to render the program executable.
Some of the web applications are entirely static due to which they not required
any processing on the server at all while, on the other hand, some web
applications are dynamic and require server-side processing.
To operate a web- application, we usually required a web server (or we can say
some space on the web-server for our programs/application's code) to manage
the clients' upcoming requests and required an application server.
The application server performs the task that requested by the clients, which
also may need a database to store the information sometimes. Application server
technologies range from ASP.NET, ASP, and ColdFusion to PHP and JSP.
A standard web application usually has short development cycles and can be
easily developed with a small team of developers. As we all know, most of the
currently available web applications on the internet are written using the
programming languages such as the HTML (or HyperText Markup
Language), CSS( or Cascading Style Sheets), and Javascript that are used in
creating front-end interface (Client-side programming).
To create the web applications script, server-side programming is done by using

programming languages such as Java, Python, PHP, and
Ruby, etc. Python and Java are the languages that are usually used for server-
side programming.
The Flow of the Web Application
1. In general, a user sends a request to the web-server using web browsers such
as Google Chrome, Microsoft Edge, Firefox, etc over the internet.
2. Then, the request is forwarded to the appropriate web application server by
the web-server.
3. Web application server performs the requested operations/ tasks
like processing the database, querying the databases; produces the result
of the requested data.
4. The obtained result is sent to the web-server by the web application server
along with the requested data/information or processed data.
5. The web server responds to the user with the requested or processed
data/information and provides the result to the user's screen .
Benefits of a web application

Let see some of the significant benefits offered by a web application:
o Any typical web application can run or accessible on any operating
system such as the Windows, Mac, Linux as long as the browser is
compatible.
o A web application is usually not required to install in the hard drive of the
computer system, thus it eliminates all the issues related to the space
limitation.
o All the users are able to access the same version of the web application,
which eliminates all compatibility issues.
o It also reduces software piracy in subscription-based web applications, for
example, SAAS (or Software as a service).
o They also reduce the expense for end-users, business owners because the
maintenance needed by the business is significantly less.
o Web applications are flexible. A user can work from any geographical
location as long as he has a working internet connection.
o It just takes a moment to create a new user by providing a username,
password, and URL, and it's all.
o After the availability of the cloud, storage space is now virtually
unlimited as long as you can afford it.
o A web application can be programmed to run on a wide variety of
operating systems, unlike native applications that can run on a particular
platform.
o Any standard web application is developed with some basic programming
languages like HTML, CSS that are compatible and well known among
the IT professionals.
Disadvantages of the Web Applications

As we all know, there are two sides of anything; if something has some
advantages, it may also have limitations/ disadvantages. Consider the following
disadvantages of the web applications.
o Internet connection is necessary to access any web application, and
without an internet connection, anyone can't use any of the web
applications. It is very typical to get an internet connection in our modern
cities, still rural area internet connectivity not so well.
o Several people in business believe that their data on the cloud

environment is no that secure and likes to stick with old methods; they
even don't want to use new methods.
o As we all know that many users like to use different web browsers
according to their needs and choices. So while creating a web application,
you must remember that your application must support several web
browsers, including new and old versions of browsers.
o Speed-related issues are also affecting the web application's performance
because there are several factors on which the performance of a web
application depends, and these all factors affect the performance of the
web application in their own way.
o If a user's web application faces any kind of issues, or if he does not have
a good quality corporate website, his web application will not be going to
run correctly, smoothly.
o A user must have to spend enough money to maintain the good condition
of his web application, provide an update whenever an issue occurs, and
make an attractive user interface, which is not so cheap at all.
o A web application must be programmed/ coded in such a way that it will
be run regardless of the device's operating system.
o A web application may face some issues while running on Windows,
Android, or several other operating systems if it is not responsive.
There are several advantages and disadvantages of web applications; it is

impossible to discuss them all at once. So in the above, we only discussed some
critical and useful points that may help you quickly understand the pros and
cons of the web application.
FRAMEFORKS
DEFINITION:
Web Application Framework or simply “web framework” is a software
framework that is designed to support the development of web applications
including web services, web resources, and web APIs. Frameworks are, in
short, libraries that help you develop your application faster and smarter!
Nowadays, the number of Web Frameworks has increased greatly. To help you
pick up the most suitable one for your Web Application, we have compiled a
list of 10 best frameworks available online, in your preferred language.
1. Ruby on Rails
Ruby on Rails is an extremely productive web application framework written
by David Heinemeier Hansson. One can develop an application at least ten
times faster with Rails than a typical Java framework. Moreover, Rails
includes everything needed to create a database-driven web application, using
the Model-View-Controller pattern.
Websites using Ruby on Rails are GroupOn, UrbanDictionary, AirBnb,
Shopify, Github
2. Django
Django is another framework that helps in building quality web applications. It
was invented to meet fast-moving newsroom deadlines while satisfying the
tough requirements of experienced Web developers. Django developers say the
applications are ridiculously fast, secure, scalable, and versatile.
Websites using Django are Disqus, Pinterest, Instagram, Quora, etc.
3. Angular(Also, know as Angular JS)

Angular is a framework by Google (originally developed by Misko Hevery
and Adam Abrons) which helps us in building powerful Web Apps. It is a
framework to build large scale and high-performance web applications while

keeping them as easy-to-maintain. There are a huge number of web apps that
are built with Angular.
Websites using Angular are Youtube on PS3, Weather, Netflix, etc.
4. ASP.NET
ASP.NET is a framework developed by Microsoft, which helps us to build
robust web applications for PC, as well as mobile devices. It is a high
performance and lightweight framework for building Web Applications using
.NET. All in all, a framework with Power, Productivity, and Speed.
Websites using ASP.NET are GettyImages, TacoBell, StackOverflow, etc.
5. METEOR
Meteor or MeteorJS is another framework that gives one a radically simpler
way to build realtime mobile and web apps. It allows for rapid prototyping and
produces cross-platform (Web, Android, iOS) code. Its cloud platform,
Galaxy, greatly simplifies deployment, scaling, and monitoring.
Websites using Meteor are HaggleMate, WishPool, Telescope, etc.
6. Laravel
Laravel is a framework created by Taylor Otwell in 2011 and like all other
modern frameworks, it also follows the MVC architectural pattern. Laravel
values Elegance, Simplicity, and Readability. One can right away start
learning and developing Laravel with Laracasts which has hundreds of
tutorials in it.
Websites using Laravel are Deltanet Travel, Neighbourhood Lender, etc.
7. Express
Express or Expressjs is a minimal and flexible framework that provides a

robust set of features for web and mobile applications. It is relatively minimal
meaning many features are available as plugins. Express facilitates the rapid
development of Node.js based Web applications. Express is also one major
component of the MEAN software bundle.
Websites using Express are Storify, Myspace, LearnBoost, etc.
8. Spring
Spring, developed by Pivotal Software, is the most popular application
development framework for enterprise Java. Myriads of developers around the
globe use Spring to create high performance and robust Web apps. Spring
helps in creating simple, portable, fast, and flexible JVM-based systems and
applications.
Websites using spring are Mascus, Allocine, etc.
9. Play
Play is one of the modern web application framework written in Java and
Scala. It follows the MVC architecture and aims to optimize developer
productivity by using convention over configuration, hot code reloading, and
display of errors in the browser. Play quotes itself as “The High-Velocity Web
Framework”.
Websites using PLAY are LinkedIn, Coursera, LendUp, etc.
10. CodeIgniter
CodeIgniter, developed by EllisLab, is a famous web application framework
to build dynamic websites. It is loosely based on MVC architecture since
Controller classes are necessary but models and views are optional.
CodeIgnitor promises with exceptional performance, nearly zero-
configuration, and no large-scale monolithic libraries.
WEB TOOLS
DEFINITION:
 HTML.
 CSS.
 AngularJS.
 Bootstrap.
 PHP.
 NextJS.
 TypeScript.
 ExpressJS.
HTML:
It can be a stand-alone software dedicated to code writing and editing or a
part of an IDE (Integrated Development Environment). An HTML editor
provides more advanced features and is specifically designed for developers to
create web pages more efficiently. It ensures every string of code is clean and
works properly.
CSS:
Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML (including XML dialects
such as SVG, MathML or XHTML). CSS describes how elements should be
rendered on screen, on paper, in speech, or on other media.
ANGULARJS:
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
<!DOCTYPE html>
<html>
"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
BOOTSTRAP:
Bootstrap is a free, open source front-end development framework for the
creation of websites and web apps. Designed to enable responsive development
of mobile-first websites, Bootstrap provides a collection of syntax for template
designs.
PHP:
PHP is a server scripting language, and a powerful tool for making
dynamic and interactive Web pages. PHP is a widely-used, free, and efficient
alternative to competitors such as Microsoft's ASP.
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
NEXTJS:
Next.js enables you to create full-stack Web applications by extending the latest
React features, and integrating powerful Rust-based JavaScript tooling for the
fastest builds.
Next.js is an open-source web development React-based framework created
by Vercel, which is famous for its unique features such as Server-side
rendering and enhanced SEO. It has some additional features such as data
fetching utilities, dynamic API routes, optimized builds, etc. It is a framework
built upon React, Webpack, and Babel.
TYPESCRIPT:
TypeScript allows specifying the types of data being passed around within the
code, and has the ability to report errors when the types don't match. For
example, TypeScript will report an error when passing a string into a function
that expects a number. JavaScript will not.
EXPRESSJS:
Express. js is the most popular backend framework for Node. js, and it is an
extensive part of the JavaScript ecosystem. It is designed to build single-page,
multi-page, and hybrid web applications, it has also become the standard for
developing backend applications with Node.
FIREBASE
Firebase is a product of Google which helps developers to build, manage, and
grow their apps easily. It helps developers to build their apps faster and in a
more secure way. No programming is required on the firebase side which makes
it easy to use its features more efficiently. It provides services to android, iOS,
web, and unity. It provides cloud storage. It uses NoSQL for the database for
the storage of data.
Firebase initially was an online chat service provider to various websites
through API and ran with the name Envolve. It got popular as developers used
it to exchange application data like a game state in real time across their users
more than the chats. This resulted in the separation of the Envolve architecture
and its chat system.
Features of Firebase:
Mainly there are 3 categories in which firebase provides its services.

Build better applications
This feature mainly includes backend services that help developers to build and
manage their applications in a better way. Services included under this feature
are:
 Realtime Database: The Firebase Realtime Database is a cloud-based NoSQL

database that manages your data at the blazing speed of milliseconds. In
simplest term, it can be considered as a big JSON file.
 Cloud Firestone: The cloud Firestone is a NoSQL document database that

provides services like store, sync, and query through the application on a global
scale. It stores data in the form of objects also known as Documents. It has a
key-value pair and can store all kinds of data like, strings, binary data, and even
JSON trees.
 Authentication: Firebase Authentication service provides easy to use UI

libraries and SDKs to authenticate users to your app. It reduces the manpower
and effort required to develop and maintain the user authentication service. It
even handles tasks like merging accounts, which if done manually can be hectic.
 Remote Config: The remote configuration service helps in publishing updates

to the user immediately. The changes can range from changing components of
the UI to changing the behaviour of the applications. These are often used while
publishing seasonal offers and contents to the application that has a limited life.
 Hosting: Firebase provides hosting of applications with speed and security. It

can be used to host Stati or Dynamic websites and microservices. It has the
capability of hosting an application with a single command.
 Firebase Cloud Messaging (FCM): The FCM service provides a connection
between the server and the application end users, which can be used to receive
and send messages and notifications. These connections are reliable and battery-
efficient.
Improve app quality:
Here majorly all the application performance and testing features are provided.
All the features required to check and manage before launching your application
officially are provided in this section. Services included are:
 Crashlytics: It is used to get real-time crash reports. These reports can further
be used to improve the quality of the application. The most interesting part of
this service is that it gives a detailed description of the crash which is easier to
analyse for the developers.
 Performance monitoring: This service gives an insight to the performance
characteristics of the applications. The performance monitoring SDK can be
used to receive performance data from the application, review them, and make
changes to the application accordingly through the Firebase console.
 Test lab: This service helps to test your applications on real and virtual devices
provided by Google which are hosted on the Google Datacentres. It is a cloud-
based app-testing infrastructure which supports testing the application on a wide
variety of devices and device configurations
 App Distribution: This service is used to pre-release applications that can be
tested by trusted testers. It comes in handy as decreases the time required to
receive feedback from the testers.
Grow your app:

This feature provides your application analytics and features that can help you
to interact with your user and make predictions that help you to grow your app.
Services provided are:
 Google analytics: It is a Free app measurement service provided by Google that

provides insight on app usage and user engagement. It serves unlimited
reporting for up to 500 distinct automatic or user-defined events using the
Firebase SDK.
 Predictions: Firebase Predictions uses machine learning to the application‟s
analytics data, further creating dynamic user segments that are based on your
user‟s behaviour. These are automatically available to use for the application
through Firebase Remote Config, the Notifications composer, Firebase In-App
Messaging, and A/B Testing.
 Dynamic Links: Deeps Links are links that directly redirects user to specific
content. Firebase provides a Dynamic linking service that converts deep links
into dynamic links which can directly take the user to a specified content inside
the application. Dynamic links are used for converting web users to Native app
users. It also increases the conversion of user-to-user sharing. In addition, it can
also be used to integrate social media networks, emails, and SMS to increase
user engagement inside the application.
 A/B Testing: It is used to optimize the application‟s experience by making it
run smoothly, scaling the product, and performing marketing experiments.
Pros and Cons of Using Firebase:
Below listed are the advantages and disadvantages of using a Firebase backend:
Pros:
 Free plans for beginners.
 Real-time database is available.
 Growing Community.
 Numerous services are available.

Cons:
 It uses NoSQL so, people migrating from SQL might feel difficulty.
 It is still growing so; it is not tested to an extent.
Companies using Firebase
Below are some reputable organizations that rely on a firebase backend for its
functioning:
 The New York Times

 Alibaba.com
 Gameloft
 Duolingo
 Trivago
 Venmo
 Lyft
DOCKER
Docker is a set of platforms as a service (PaaS) product that use Operating

system-level virtualization to deliver software in packages called containers.
Containers are isolated from one another and bundle their own software,
libraries, and configuration files; they can communicate with each other
through well-defined channels. All containers are run by a single operating
system kernel and therefore use fewer resources than a virtual machine.
What is Docker?
Docker is an open-source containerization platform by which you can pack
your application and all its dependencies into a standardized unit called a
container. Containers are light in weight which makes them portable and they
are isolated from the underlying infrastructure and from each other container.
You can run the docker image as a docker container in any machine where
docker is installed without depending on the operating system.
Docker is popular because of the following:

1. Portability.
2. Reproducibility.
3. Efficiency.
4. Scalability.
What is Docker file?

The Docker file uses DSL (Domain Specific Language) and contains
instructions for generating a Docker image. Docker file will define the
processes to quickly produce an image. While creating your application, you
should create a Docker file in order since the Docker daemon runs all of the
instructions from top to bottom.
 It is a text document that contains necessary commands which on
execution help assemble a Docker Image.
 Docker image is created using a Docker file.
How Docker Works
Docker makes use of a client-server architecture. The Docker client talks with
the docker daemon which helps in building, running, and distributing the
docker containers. The Docker client runs with the daemon on the same
system or we can connect the Docker client with the Docker daemon remotely.
With the help of REST API over a UNIX socket or a network, the docker
client and daemon interact with each other. To know more about working of
docker refer to the
Architecture of Docker.
What is Docker Image?
It is a file, comprised of multiple layers, used to execute code in a Docker

container. They are a set of instructions used to create docker containers.
Docker Image is an executable package of software that includes everything
needed to run an application. This image informs how a container should
instantiate, determining which software components will run and how. Docker
Container is a virtual environment that bundles application code with all the
dependencies required to run the application. The application runs quickly and
reliably from one computing environment to another.
What is Docker Container?

Docker container is a runtime instance of an image. Allows developers to
package applications with all parts needed such as libraries and other
dependencies. Docker Containers are runtime instances of Docker images.
Containers contain the whole kit required for an application, so the application
can be run in an isolated way. For e.g.- Suppose there is an image of Ubuntu
OS with NGINX SERVER when this image is run with the docker run
command, then a container will be created and NGINX SERVER will be
running on Ubuntu OS.
What is Docker Hub?

Docker Hub is a repository service and it is a cloud-based service where
people push their Docker Container Images and also pull the Docker Container
Images from the Docker Hub anytime or anywhere via the internet. It provides
features such as you can push your images as private or public. Mainly
DevOps team uses the Docker Hub. It is an open-source tool and freely
available for all operating systems. It is like storage where we store the images
and pull the images when it is required. When a person wants to push/pull
images from the Docker Hub they must have a basic knowledge of Docker.
Let us discuss the requirements of the Docker tool.
What is Docker Compose?

Docker Compose will execute a YAML-based multi-container application.
The YAML file consists of all configurations needed to deploy containers
Docker Compose, which is integrated with Docker Swarm, and provides
directions for building and deploying containers. With Docker Compose, each
container is constructed to run on a single host.
Docker Commands
There is “n” no. of commands in docker following are some of the commands
mostly used.
1. Docker Run
2. Docker Pull
3. Docker PS
4. Docker Stop
5. Docker Start
6. Docker rm
7. Docker RMI
8. Docker Images
9. Docker exec
10.Docker Login
Docker Engine
The software that hosts the containers is named Docker Engine. Docker
Engine is a client-server-based application. The docker engine has 3 main
components:
1. Server: It is responsible for creating and managing Docker images,
containers, networks, and volumes on the Docker. It is referred to as
a daemon process.
2. REST API: It specifies how the applications can interact with the
Server and instructs it what to do.
3. Client: The Client is a docker command-line interface (CLI), that
allows us to interact with Docker using the docker commands.
Why use Docker?

Docker can be used to pack the application and its dependencies which makes
it lightweight and easy to ship the code faster with more reliability. Docker
make every simple to run the application in the production environment docker
container can be platform independent if the docker engine is installed in the
machine.
What is Docker for AWS?

Docker is the most powerful tool to run the application in the form of
containers. Docker container is light in weight and can be run on any operating
system‟s provides the Amazon Elastic Container Service (Amazon ECS) it is a
fully managed container service by which you can deploy, scale and manage
the docker containers. Amazon ECS is the most reliable platform according to
the performance and also it can be integrated with the other AWS Service like
load balancing, service discovery, and container health monitoring. To know
more about Amazon Elastic Container Service (Amazon ECS).
Difference Between Docker Containers and Virtual Machines
Docker Containers Virtual Machines
Virtual Machines (VMs) run on

Docker Containers contain
Hypervisors, which allow multiple
binaries, libraries, and
Virtual Machines to run on a single
configuration files along with
machine along with its own operating
the application itself.
system.
They don‟t contain a guest OS Each VM has its own copy of an

for each container and rely on operating system along with the
the underlying OS kernel, application and necessary binaries,
which makes the containers which makes it significantly larger and
lightweight. it requires more resources.
Containers share resources

with other containers in the They provide Hardware-level process
same host OS and provide isolation and are slow to boot.
OS-level process isolation.
NODE JS
 Node.js is an open-source server-side runtime environment built on
Chrome‟s V8 JavaScript engine.
 It provides an event driven ,non-blocking (synchronous)I/O and cross-
platform run time environment for building highly scalable server-side
application using JavaScript.
 Node.js runs single-threaded, non-blocking, asynchronous programming,

which is very memory efficient.
Main feature of Node.js is:
 Event driven Architecture
 Non Blocking I/O model
 Asynchronous by default
What Can Node.js Do?
 Node.js can generate dynamic page content
 Node.js can create, open, read, write, delete, and close files on the server
 Node.js can collect form data
 Node.js can add, delete, modify data in your database
What is a Node.js File?

 Node.js files contain tasks that will be executed on certain events
 A typical event is someone trying to access a port on the server
 Node.js files must be initiated on the server before having any effect
 Node.js files have extension ".js"
Key Features of NodeJs

Asynchronous and Event-Driven: The Node.js library‟s APIs are all

asynchronous (non-blocking) in nature. A server built with Node.JS never waits
for data from an API. from an API. After accessing an API, the server moves on
to the next one. In order to receive and track responses of previous API
requests, it uses a notification mechanism called Events.
Single-Threaded: Node.js employs a single-threaded architecture with event

looping, making it very scalable. In contrast to typical servers, which create
limited threads to process requests, the event mechanism allows the node.js
server to reply in a non-blocking manner and makes it more scalable. When
compared to traditional servers like Apache HTTP Server, Node.js uses a
single-threaded program that can handle a considerably larger number of
requests.
Scalable: NodeJs addresses one of the most pressing concerns in software

development: scalability. NodeJs can also handle concurrent requests
efficiently. It has a cluster module that manages load balancing for all CPU
cores that are active. The capability of NodeJs to partition applications
horizontally is its most appealing feature. It achieves this through the use of
child processes. This allows the organizations to provide distinct app versions to
different target audiences, allowing them to cater to client preferences for
customization.
Quick execution of code: Node.js makes use of the V8 JavaScript Runtime

motor, which is also used by Google Chrome. Hub provides a wrapper for the
JavaScript motor, which makes the runtime motor faster. As a result, the
preparation of requests inside Node.js becomes faster as well.
Cross-platform compatibility: NodeJS may be used on a variety of systems,

including Windows, Unix, Linux, Mac OS X, and mobile devices. It can be
paired with the appropriate package to generate a self-sufficient executable.
Uses JavaScript: JavaScript is used by the Node.js library, which is another

important aspect of Node.js from the engineer‟s perspective. Most of the
engineers are already familiar with JavaScript. As a result, a designer who is
familiar with JavaScript will find that working with Node.js is much easier.
Fast data streaming: When data is transmitted in multiple streams, processing

them takes a long time. Node.js processes data at a very fast rate. It processes
and uploads a file simultaneously, thereby saving a lot of time. As a result,
NodeJs improves the overall speed of data and video streaming.
No Buffering: In a Node.js application, data is never buffered.
File Handling in Nodejs:

A common task for a web server can be to open a file on the server and return
the content to the client.
Here is how PHP or ASP handles a file request:
1. Sends the task to the computer's file system.
2. Waits while the file system opens and reads the file.
3. Returns the content to the client.
4. Ready to handle the next request.
Here is how Node.js handles a file request:
1. Sends the task to the computer's file system.
2. Ready to handle the next request.
3. When the file system has opened and read the file, the server returns the
content to the client.
Node.js eliminates the waiting, and simply continues with the next request.
REACT
 React is a free and open-source front-end JavaScript library for building
user interfaces based on components.
 It is maintained by Meta and a community of individual developers and
companies.
 React can be used to develop single-page, mobile, or server-rendered
applications with frameworks like Next.js.
 React is a JavaScript-based UI development library.
 Although React is a library rather than a language, it is widely used in
web development
Why React?
React‟s popularity today has eclipsed that of all other front-end development
frameworks. Here is why:
 Easy creation of dynamic applications

 Improved performance
 Reusable componenents
 Unidirectional dataflow
 Small learning curve
 It can be used for the development of both web and mobile apps
 Dedicated tools for easy debugging
ReactJS Advantages
1. React.js builds a customized virtual DOM. Because the JavaScript

virtual DOM is quicker than the conventional DOM, this will enhance
the performance of apps.
2. ReactJS makes an amazing UI possible.
3. Search - engine friendly ReactJS.
4. Modules and valid data make larger apps easier to manage by
increasing readability.
5. React integrates various architectures.
6. React makes the entire scripting environment process simpler.
7. It makes advanced maintenance easier and boosts output.
8. Guarantees quicker rendering
9. The availability of a script for developing mobile apps is the best
feature of React.
10.ReactJS is supported by a large community.
Limitations
1. Only addresses the app's angle and distance; as a result, additional

techniques must be selected if you want a full collection of
development tools.
2. Employs inline scripting and JSX, which some programmers might
find uncomfortable.
Features of React
 Re-usability
 Nested components
 Render method
 Passing properties
React offers some outstanding features that make it the most widely
adopted library for frontend app development.
JSX is a JavaScript syntactic extension. It's a term used in React to describe

how the user interface should seem. You can write HTML structures in the
same file as JavaScript code by utilizing JSX.
const name = 'Simplilearn';

const greet = <h1>Hello, {name}</h1>;
The above code shows how JSX is implemented in React. It is neither a string
nor HTML. Instead, it embeds HTML into JavaScript code.
Architecture
In a Model View Controller(MVC) architecture, React is the 'View'
responsible for how the app looks and feels.
Here are some of the most popular React frameworks:

 React Router:
React Router is a library that helps you manage the navigation in your React
applications. It provides a variety of components that make it easy to create
complex routing patterns.
 Redux:
Redux is a state management library that helps you manage the state of your
React applications. It provides a simple, predictable way to store and update
data in your applications.
 React Native:
React Native is a framework that lets you build native mobile apps with
React.js. It is essentially a cross-platform framework that allows you to use
the same code to build apps for both iOS and Android.
DJANGO
Django is a free and open-source Python web framework that encourages rapid
development and clean, pragmatic design. It takes care of much of the hassle of
web development, so you can focus on writing your app without needing to
reinvent the wheel.
Django and AngularJS in relation to each other:
Front-end vs. back-end: Django is a back-end framework, while AngularJS is a

front-end framework. This means that Django is used to build the server-side
logic of a web application, while AngularJS is used to build the user interface.
Complementary technologies: Django and AngularJS can be used together to

build powerful web applications. For example, Django can be used to handle
routing, database management, and authentication, while AngularJS can be used
to create interactive and dynamic user interfaces.
Difference between Django and Angular JS:
Django
 Purpose: Full-stack Python web framework

 Language: Python
 Strengths: Rapid development, security, scalability, large community
 Weaknesses: Can be complex for beginners, not as flexible as some other
frameworks
AngularJS
 Purpose: Front-end JavaScript framework for building single-page

applications (SPAs)
 Language: JavaScript
 Strengths: Fast performance, data binding, modularity, large community
 Weaknesses: Can be complex for beginners, not as well-suited for
backend development
Django's key features include:
 Object-relational mapper (ORM): Django provides a powerful ORM that

makes it easy to interact with your database.
 Admin interface: Django includes a built-in admin interface that makes it
easy to manage your app's data.
 Authentication and authorization: Django provides built-in support for
user authentication and authorization.
 Template system: Django's template system makes it easy to create
dynamic HTML pages.
 Caching: Django has a built-in caching system that can improve the
performance of your app.
 Internationalization and localization: Django supports internationalization
and localization, so you can easily build multilingual websites and apps.
Django is a popular choice for building a wide range of web applications,

including:
 Content management systems (CMSs)

 E-commerce websites
 Social networking sites
 News websites
 Business websites
 Educational websites
Benefits of using Django:
 Rapid development: Django is designed for rapid development. It

provides a number of features that make it easy to get started quickly and
build complex applications quickly.
 Security: Django is designed to be secure. It includes a number of
security features out of the box, such as cross-site scripting (XSS)
protection and SQL injection protection.
 Scalability: Django is scalable. It can be used to build small websites as
well as large, enterprise-grade applications.
 Large community: Django has a large and active community. This means
that there are a lot of resources available to help you learn Django and get
help if you need it.
UI/UX DESIGN
UI stands for user interface. It refers to the visual elements of a website or

application, such as the buttons, menus, and forms. The UI is what users interact
with, so it is important that it is easy to use and understand.
UX stands for user experience. It refers to the overall experience that a user has
when using a website or application. This includes the UI, but it also includes
factors such as usability, performance, and customer support. A good UX makes
it easy for users to find what they are looking for and complete their tasks.
UI/UX and AngularJS
UI/UX and AngularJS are both important aspects of building web applications.
UI/UX is about making sure that the application is easy to use and understand,
while AngularJS is a framework that can be used to build SPAs that provide a
fluid and responsive user experience.
Relationship between UI/UX and AngularJS:
UI/UX and AngularJS are closely intertwined in the development of web

applications. UI/UX principles guide the design of the application's interface,
ensuring that it is intuitive, user-friendly, and aligns with the overall user
experience goals. AngularJS, on the other hand, provides the tools and
frameworks to implement these UI/UX design decisions, enabling developers to
create responsive, interactive, and visually appealing user interfaces.
Here are some of the ways that UI/UX and AngularJS can be used together
to build better web applications:
 Use AngularJS to create dynamic and responsive UIs: AngularJS makes it

easy to create UIs that are responsive to user input. This can create a
more fluid and enjoyable user experience.
 Use AngularJS to improve performance: AngularJS can help to improve
the performance of web applications by caching data and reducing the
number of server requests. This can make the application feel more
responsive to users.
 Use AngularJS to make it easier to maintain code: AngularJS's data
binding and directive features can make it easier to maintain complex
UIs. This can save time and money in the long run.
How AngularJS contributes to UI/UX:
 Data binding: AngularJS's two-way data binding mechanism simplifies

data synchronization between the user interface and the underlying
application data, ensuring that the interface reflects the current state of the
data and vice versa.
 Directives: AngularJS provides a collection of directives, which are

HTML attributes that extend the functionality of HTML elements. These
directives enable developers to create custom components and behaviors,
enhancing the flexibility and richness of the user interface.
 Routing: AngularJS's routing system facilitates seamless navigation
between different pages or sections of the application, ensuring a smooth
and consistent user experience.
 Templating: AngularJS's templating engine allows developers to separate
the presentation layer (HTML) from the application logic, making it
easier to maintain and extend the user interface.
 Testing: AngularJS's robust testing framework enables developers to
write unit tests and end-to-end tests, ensuring that the user interface
functions as intended and provides a consistent and bug-free experience.
In summary, UI/UX and AngularJS work in tandem to create web applications

that are not only visually appealing and easy to use but also meet the specific
needs and expectations of their users. UI/UX principles guide the design of the
user interface, while AngularJS provides the tools and frameworks to
implement these design decisions effectively, resulting in a positive and
engaging user experience.
************

Unit V

Uploaded by

Unit V

Uploaded by

CCS375 - WEB TECHNOLOGIES PIT / CSE

UNIT V INTRODUCTION TO ANGULAR and WEB APPLICATIONS

ANGULARJS EXTENDS HTML

 AngularJS modules define AngularJS applications.

Working of the MVC framework with an example:

The flow of data in MVC Components

The MVC architectural pattern allows us to adhere to the following design

Popular MVC Frameworks:

There is a set of built-in directive in AngularJS which offers functionality to

Following is a list of AngularJS directives:

ng-app It defines the root element of an application.

ng-bind It binds the content of an html element to application data.

ng-bind-html It binds the inner HTML of an HTML element to

ng-bind- It specifies that the text content should be replaced with a

ng-blur It specifies a behavior on blur events.

ng-change It specifies an expression to evaluate when content is being

ng-checked It specifies if an element is checked or not.

ng-class It specifies css classes on html elements.

ng-class- It is same as ng-class, but will only take effect on even

ng-class-odd It is same as ng-class, but will only take effect on odd

ng-click It specifies an expression to evaluate when an element is

ng-cloak It prevents flickering when your application is being

ng-controller It defines the controller object for an application.

ng-copy It specifies a behavior on copy events.

ng-hide It hides or shows html elements.

ng-cut It specifies a behavior on cut events.

ng-if It removes the html element if a condition is false.

ng-focus It specifies a behavior on focus events.

ng-init It defines initial values for an application.

ng-href It specifies a URL for the <a> element.

ng-keydown It specifies a behavior on keydown events.

ng-keypress It specifies a behavior on keypress events.

ng-keyup It specifies a behavior on keyup events.

ng-jq It specifies that the application must use a library, like

ng-include It includes html in an application.

ng-list It converts text into a list (array).

ng-options It specifies <options> in a <select> list.

ng-paste It specifies a behavior on paste events.

ng-show It shows or hides html elements.

ng-src It specifies the src attribute for the <img> element.

ng-submit It specifies expressions to run on onsubmit events.

ng-style It specifies the style attribute for an element.

ng-repeat It defines a template for each data in a collection.

ng-switch It specifies a condition that will be used to show/hide child

ng-value It specifies the value of an input element.

ng-disabled It specifies if an element is disabled or not.

ng-form It specifies an html form to inherit controls from.

ng-model It binds the value of html controls to application data.

„<div ng-app="myApp">: This is the basic syntax of the ng-app directive. It is

<any ng-init="expression"> ...</any>

The expression can be any JavaScript expression. The expression will be

Here is an example of how to use the ng-init directive to initialize a variable:

<li ng-repeat="item in items">{{ item }}</li>

<li ng-repeat="fruit in fruits">{{ fruit }}</li>: This demonstrates the ng-

// Define controllers, services, etc., within this module

AngularJS directives Example

Let's take an example to use all the above discussed directives:

"AngularJS Numbers" refers to the handling, formatting, manipulation, and

We can use the same example by using ng-bind:

See this example:

AngularJS Strings" refer to the management, formatting, manipulation, and

Same example with ng-bind:

AngularJS Objects" refers to managing, manipulating, and displaying structured

Same example with ng-bind:

Same example with ng-bind:

Data binding is a very useful and powerful feature used in software

AngularJS follows Two-Way data binding model.

One-Way Data Binding

Two-Way Data Binding

Data-binding in Angular apps is the automatic synchronization of data between

changed, the view reflects the change and vice versa.

{{ firstName }} is bound with ng-model="firstName".

CONDITIONAL DIRECTIVES IN ANGULARJS

 AngularJS facilitates you to extend HTML with new attributes. These

The ng-if Directive in AngularJS is used to remove or recreate a portion of the

Used to conditionally render or remove an element based on a boolean