Scribd
Upload
116 views

Unit V

UNIT V

Uploaded by

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

Unit V

UNIT V

Uploaded by

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

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- DjangoUI & UX.

Introduction to AngularJS

 AngularJS is a JavaScript framework.


 It is an open source front-end enabled web application framework.
 It is licensed under Apache license version 2.0.
 It extends HTML DOM with additional attributes.
 It is more responsive to user actions.
Advantages
1. Built by Google Engineers: The AngularJS is maintained by dedicated Google
engineers.
2. MVC support- It is based on Model View Controller (MVC) architecture which
provides separation of model, view and controller components.
3. Intuitive- It is more intuitive as it makes use of HTML as a declarative language.
4. Comprehensive- AngularJS is a comprehensive solution for rapid front-end
development. It does not need any other plugins or frameworks.
5. Rich Features: There is a wide range of features supported by AngularJS such as
data binding, dependency injection, enterprise level testing and so on.
6. Unit Testing: The AngularJS code is unit testable
7. Reusable code: AngularJS support for using the reusable components
8. Less code: It support for less code and more functionality
Features of AngularJS

 All code of AngularJS is unit testable.

 It gives rich Developer control.

 It provides reusable components.

 It provides capability to create Single Page Application in a very clean and


maintainable way.
1 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 AngularJS Supports Single Page Applications.

 It provides data binding capability to HTML thus giving user a rich and responsive
experience.

 AngularJS Allows Developers to Express UI Declaratively and Reduce Side Effects.

 It uses dependency injection and make use of separation of concerns.

 With AngularJS, developer write less code and get more functionality.

 In AngularJS, views are pure html pages, and controllers written in JavaScript do the
business processing.

AngularJS MVC Architecture

 MVC stands for Model View Controller.


 It is a software design pattern for developing web applications.
 It is very popular because it isolates the application logic from the user interface layer
and supports separation of concerns.

The MVC pattern is made up of the following three parts:

1. Model:
 It is responsible for managing application data.
 It responds to the requests from view and to the instructions from controller
to update itself.
2. View:
 It is responsible for displaying all data or only a portion of data to the users.
 It also specifies the data in a particular format triggered by the controller's
decision to present the data.
 They are script-based template systems such as JSP, ASP, PHP and very easy
to integrate with AJAX technology.
3. Controller:
 It is responsible to control the relation between models and views.
 It responds to user input and performs interactions on the data model
objects.
2 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 The controller receives input, validates it, and then performs business
operations that modify the state of the data model.

Understanding ng attributes

 AngularJS extends HTML with ng-directives.


 The directives are specified with ng prefix.
 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.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>

3 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


</body>
</html>

Script Explanation
1. The AngularJS script is written within <html> tags. The AngularJS is baed on
JavaScript framework. The framework for AngularJS is loaded using <script> tag. It
is as follows-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
2. Defining np-app directive: The np-app directive is defined in above script as follows-

<div ng-app = “”>


…
…
</div>

3. Defining np- model directive: The textbox control is modelled using np-model
directive
<p>Name: <input type="text" ng-model="name"></p>

4. Defining np-bind: We can bind the value entered in the textbox with name using np-
bind directive
<p ng-bind="name"></p>

Various directives supported by AngularJS are:-


1. ng-app
2. ng-init
3. ng-model
4. ng-repeat
1. ng-app directive:
 This directive starts the AngularJS application.
 It basically defines the root element.
 It initializes the application automatically when the web page containing the
AngularJS code is loaded. For example-

<div ng-app = “”>


…
…
</div>

2. ng-init directive :
4 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 The ng-init directive is used for initialization of AngularJS data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="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>

3. ng-model: The ng-model directive binds the value of HTML control application data.
These controls can be input, select, textarea and so on. For example –
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app= “ ”>
<p>Enter your Name: <input type=“text” ng-model=“name”></p>
<p> Welcome<span ng-bind=“name”></span></p>
</div>
</body>
</html>

5 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


4. ng-repeat: The ng-repeat element directive repeats the HTML element.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
Looping with ng-repeat:
 Jani
 Hege
 Kai

Expressions and Data binding

 AngularJS expressions can be written inside double braces: {{ expression }}.


 AngularJS expressions can also be written inside a directive: ng-
bind="expression".AngularJS will resolve the expression, and return the result
exactly where the expression is written.

 AngularJS expressions are much like JavaScript expressions: They can contain
literals, operators, and variables.
 Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
<!DOCTYPE html> My first
<html> expression: 10
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>

6 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


Note: If you remove the directive "ng-app", HTML will display the expression without
solving it.
1. <!DOCTYPE html>
2. <html>
3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
4. <body>
5. <p>If you remove the directive "ng-app", HTML will display the expression without solving it.</p>
6. <div>
7. <p>A simple expression example: {{ 5 + 5 }}</p>
8. </div>
9. </body>
</html>

Note: If you remove the directive "ng-app", HTML will display the expression without
solving it.

1. <!DOCTYPE html>
2. <html>
3. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
4. <body>
5. <p>If you remove the directive "ng-app", HTML will display the expression without solving it.</p>
6. <div>
7. <p>A simple expression example: {{ 5 + 5 }}</p>
8. </div>
9. </body>
</html>

AngularJS Numbers
AngularJS numbers are similar to JavaScript numbers.
<!DOCTYPE html> Total in dollar:
<html> 25
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=5;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
</body>

7 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


</html>

AngularJS Strings
<!DOCTYPE html> My full name
<html> is:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> SonooJaiswal
<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>
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.

Two-Way Data Binding


8 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
Data-binding in Angular apps is the automatic synchronization of data between the model
and view components.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></
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>

<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></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>
9 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
Conditional Directives

 ng – if
 ng – switch
ng-if Directive
 The ng-if directive removes the HTML element if the expression evaluates to false.
 If the if statement evaluates to true, a copy of the Element is added in the DOM.
 Syntax
<element ng-if="expression"></element>

Keep HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar =


true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

ng – switch

 The ng-switch directive lets you hide/show HTML elements depending on an


expression.
 Child elements with the ng-switch-when directive will be displayed if it gets a match,
otherwise the element, and its children will be removed.
 You can also define a default section, by using the ng-switch-default directive, to show a
section if none of the other sections get a match.
 Syntax
<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>

10 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
<h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select topic from the dropdown, to switch the content of this
DIV.</p>
</div>
</div>

Style Directives

 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.
 Syntax
<element ng-style="expression"></element>
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul
ar.min.js"></script>

<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"
11 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
}
});
</script>

</body>
</html>

Controllers

 AngularJS applications are controlled by controllers.


 The ng-controller directive defines the application controller.
 A controller is a JavaScript Object, created by a standard JavaScript object constructor.

Controller with Properties

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular
.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe"
});
</script>
</body>
</html>
Script Explanation:

 The AngularJS application is defined by ng-app="myApp". The application runs


inside the <div>.
 The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a
controller.

12 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


 The myCtrl function is a JavaScript function.
 AngularJS will invoke the controller with a $scope object.
 In AngularJS, $scope is the application object (the owner of application variables
and functions).
 The controller creates two properties (variables) in the scope
(firstName and lastName).
 The ng-model directives bind the input fields to the controller properties
(firstName and lastName).

Controller with methods


 A controller can also have methods (variables as functions):

<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>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>

Controllers In External Files


 In larger applications, it is common to store controllers in external files.

<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>

13 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


<br>
Full Name: {{fullName()}}

</div>

<script src="personController.js"></script>

angular.module('myApp', []).controller('personCtrl',
function($scope) {
$scope.firstName = "John",
$scope.lastName = "Doe",
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});

Filters

 Filters are used to modify the data.


 These are used along with expressions or directives using pipe (|) character.
 Commonly used filters are.
Filter Purpose
Uppercase Converts the text to uppercase
Lowercase Converts the text to lower case
Currency Converts the number into currency format
orderBy Arranges the elements of the array based on criteria
Filter Selects the subset of items from array

Uppercase filters
 The uppercase filter converts a string to uppercase letters.
 Syntax: {{ string | uppercase}}
14 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
<div ng-app="myApp" ng-controller="caseCtrl">
HELLO WORLD!
<h1>{{txt | uppercase}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
$scope.txt = "Hello World!";
});
</script>

Lowercase filters
 The lowercase filter converts a string to lowercase letters.
 Syntax: {{ string | lowercase }}
<div ng-app="myApp" ng-controller="caseCtrl"> hello world!
<h1>{{txt | lowercase}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
$scope.txt = "Hello World!";
});
</script>

Currency filter

 The currency filter formats a number to a currency format.


 By default, the locale currency format is used.

Syntax
 {{ number | currency : symbol : fractionsize }}

<!DOCTYPE html> Price = $9.99


<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> The currency filter
<body> formats a number
15 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
to a currency
<div ng-app="myApp" ng-controller="costCtrl"> format.

<p>Price = {{ price | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 9.99;
});
</script>

<p>The currency filter formats a number to a currency format.</p>

</body>
</html>

filter Filter

 The filter filter allows us to filter an array, and return an array containing only the
matching items.
 This filter can only be used for arrays.
 Syntax : {{ arrayexpression | filter : expression : comparator }}

Value Description
expression The expression used when selecting items from the array. The expression can be of
type:

String: The array items that match the string will be returned.

Object: The object is a pattern to search for in the array. Example: filter: {"name" :
"H", "city": "London"} will return the array items with a name containing the letter
"H", where the city contains the word "London".

comparator Optional. Defines how strict the comparison should be.

<div ng-app="myApp" ng-controller="arrCtrl">  Around the Horn, London


<ul>
<li ng-repeat="x in customers | filter : {'name' : 'O', 'city' : 'London'}"> The filter will give a match if there is an
{{x.name + ", " + x.city}} "O" in the name, and the city is "London".
</li>
16 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.customers = [
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
];
});
</script>

orderBy Filter

 The orderBy filter allows us to sort an array.


 By default, strings are sorted alphabetically, and numbers are sorted numerically.
 Syntax

o {{ array | orderBy : expression : reverse }}

<div ng-app="myApp" ng-controller="orderCtrl">  Alfreds Futterkiste, Berlin


 Cactus Comidas para llevar, Buenos Aires
<ul>  Around the Horn, London
<li ng-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li>  B's Beverages, London
</ul>  Bolido Comidas preparadas, Madrid
 Bon app, Marseille
</div>  Bottom-Dollar Marketse, Tsawassen

<script> The array items are sorted by "city".


var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];
});
</script>

AngularJS Forms
17 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 Form is a collection of various controls
 Angular JS support two types of control- Data binding and validation controls
 Various controls supported by AngularJS forms are:-
o Input
o Select
o Button
o Textarea

Input control
 Input controls provides data-binding by using the ng-model directive.
 <input type="text" ng-model="firstname">

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
<p>Change the name inside the input field, and you will see the name in the header changes
accordingly.</p>
</body>
</html>

Checkbox
A checkbox has the value true or false. Apply the ng-model directive to a checkbox, and use
its value in your application.
<!DOCTYPE html>
18 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></
script>
<body>

<div ng-app="">
<form>
Check to show a header:
<input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">My Header</h1>
</div>

<p>The header's ng-show attribute is set to true when the checkbox is checked.</p>

</body>
</html>

Radio buttons
 Bind radio buttons to your application with the ng-model directive.
 Radio buttons with the same ng-model can have different values, but only the
selected one will be used.
<form>
Pick a topic:
<input type="radio" ng-model="myVar" value="dogs">Dogs
<input type="radio" ng-model="myVar" value="tuts">Tutorials
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
Select box
 Bind select boxes to your application with the ng-model directive.
 The property defined in the ng-model attribute will have the value of the selected
option in the selectbox.

<form>
Select a topic:
19 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
<select ng-model="myVar">
<option value="">
<option value="dogs">Dogs
<option value="tuts">Tutorials
<option value="cars">Cars
</select>
</form>

Routers

 The ngRoute module helps your application to become a Single Page Application.
 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 ngRoute module.
 The ngRoute module routes your application to different pages without reloading the
entire application.

 <body ng-app="myApp">

<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", {
20 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
templateUrl : "blue.htm"
});
});
</script>
</body>

Modules

The AngularJS module defines the functionality of the application which is applied on the
entire HTML page. It helps to link many components. So it is just a group of related
components. It is a container that consists of different parts like controllers, services, and
directives.
Creating a Module in AngularJS:
var app = angular.module("Module-name", []);
<div ng-app = "module-name">
The code in which the module is required.
</div>
Adding a Controller:
app.controller("Controller-name", function($scope) {
$scope.variable-name= "";
});
Example: Implementation of the Angular JS Modules.

21 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


Java script
DemoController.js:
// Here the Component name is DemoComponent
// so saving the file as DemoComponent.js
app.controller('DemoController', function ($scope) {

$scope.list = ['A', 'E', 'I', 'O', 'U'];


$scope.choice = 'Your choice is: GeeksforGeeks';

$scope.ch = function (choice) {


$scope.choice = "Your choice is: " + choice;
};

$scope.c = function () {
$scope.choice = "Your choice is: " + $scope.mychoice;
};
});
Module-name: DemoApp.js:
var app = angular.module('DemoApp', []);

index.html file:
<!DOCTYPE html>
<html>

<head>
<title>
Modules and Controllers in Files
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="DemoApp.js"></script>
<script src="DemoController.js"></script>
</head>

<body ng-app="DemoApp">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>AngularJS Modules</h3>
<h4>
Using controllers in Module
</h4>

<div ng-app="DemoApp"
ng-controller="DemoController">
Vowels List :
<button ng-click="ch('A')">A</button>
22 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
<button ng-click="ch('E')">E</button>
<button ng-click="ch('I')">I</button>
<button ng-click="ch('O')">O</button>
<button ng-click="ch('U')">U</button>

<p>{{ choice }}</p>

Vowels List :
<select ng-options="option for option in list"
ng-model="mychoice"
ng-change="c()">
</select>

<p>{{ choice }}</p>


</div>
</body>

</html>

Directives in a Module: To add a directive in a module follow the steps:


 Creating a module as we did earlier:
var app = angular.module("DemoApp", []);
 Creating a directive:
app.directive("Directive-name", function() {
return {

23 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


template : "string or some code which is to be executed"
};
});

Services

 The services are functions or objects that are intended to carry out specific task.
 In AngularJS there are 30 built-in services used to carry out variety of tasks.
Built-in services
1. The $http Service
 The $http service is one of the most common used services in AngularJS
applications.
 The service makes a request to the server, and lets your application handle the
response.
Step 1: Create a simple web document as follows –
Msg.html
Well Done!!!
Step 2: Now create a web document that will make use of $http service to get the
message stored in the above html file and to display the contents

<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
<body>
<div ng-app=“MyApp”ng-controller=“MyController”>
<p>Message obtained from a file is…</p>
<h1>{{message}}</h1>
</div>

<script>
var App=angular.module(‘MyApp’,[]);
App.controller(‘My Controller’, function($scope,$http){
$http.get(“msg.html).then(function(response){
$scope.message=response.data;
});
});
</script>
</body>
</html>

2. The $timeout service

24 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


 The $timeout service is useful to execute certain task after some interval. Following
example displays one message on the browser and after 5 seconds another message
will be displayed.
<!DOCTYPE html>
<html>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
<body>
<div ng-app=“MyApp”ng-controller=“MyController”>
<p>Message will be changed after 5 seconds </p>
<h1>{{message}}</h1>
</div>

<script>
var App=angular.module(‘MyApp’,[]);
App.controller(‘My Controller’, function($scope,$timeout){
$scope.message=“Welcome user”;
$timeout(function(){
$scope.message=“Good Bye!!!”;
},5000);
});
</script>
</body>
</html>

Web Applications Frameworks and Tools


Firebase
 It is a mobile application development platform from Google with powerful features
for developing, handling and enhancing applications.
 It is basically a backend platform for building web and mobile applications.
 It offers various services and tools for building and scaling mobile and web
applications, including real-time databases, authentication, cloud messaging, hosting,
storage and analytics.
 Firebase’s real-time database is a cloud-hosted NoSQL database that allows
developers to store and sync data in real-time across multiple clients.
Key Features
1. Authentication
It supports authentication using passwords, phone numbers, Google, Facebook, Twitter, and
more. The Firebase Authentication (SDK) can be used to manually integrate one or more
sign-in methods into an app.
2. Realtime database

25 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


Data is synced across all clients in real time and remains available even when an app goes
offline.
3. Hosting
Firebase Hosting provides fast hosting for a web app; content is cached into content delivery
networks worldwide.
4. Test lab
The application is tested on virtual and physical devices located in Google’s data centers.
5. Notifications
Notifications can be sent with firebase with no additional coding.
Limitations
1. It is not open source.
2. Firebase does not work in many countries.
3. Only NoSQL databases are available.
4. Not all services are free to start.
5. Runs only one Google cloud.
Docker
 Docker is an open source platform for developing, shipping and running applications.
 Using docker the developers can create, deploy and run applications inside the
containers.
 Container is a single unit in which the required software and all its dependencies are
packaged together. This allows the developers to share or run the software application
on any infrastructure regardless of underlying operating system or hardware.
 With docker developers can built and test their applications locally, then deploy them
to any environment with confidence that the application will run the same way
everywhere.

Features

1) Open source: Docker is an open source platform. That means it is freely available on
the internet for use.
2) Easy to use: It is very easy to configure the system in docker. We can easily deploy
the code in any desired environment with the help of simple commands in less time

26 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


3) Containerization: Docker allows the developers to package the application with all
the required software and dependencies in a single unit called container.
4) Portability: Using docker, the application can be moved to any environment and can
be executed on any platform.
5) Compatibility: The docker allows to execute the application on any platform or any
operating system without performing any modification in the application.
6) Flexibility: Docker supports a wide range of operating systems, programming
languages and frameworks. It helps the developer to build, test and run any
application almost on any platform
7) Security: Docker has built in security features such as isolated containers and access
control that help to protect the application from potential threats.

Docker architecture and components

1) Docker daemon: Docker daemon runs on the host operating system. It is responsible for
running containers to manage docker services. Docker daemon communicates with other
daemons. It offers various Docker objects such as images, containers, networking, and
storage.
2) Docker Client: Docker client uses commands and REST APIs to communicate with the
Docker Daemon (Server).
27 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
3) Docker Host: Docker Host is used to provide an environment to execute and run
applications.
4) Docker Registry: Docker Registry manages and stores the Docker images. There are two
types of registries in the Docker –
 Pubic Registry - Public Registry is also called as Docker hub.
 Private Registry - It is used to share images within the enterprise.
5) Docker images: Docker images are the read-only binary templates used to create Docker
Containers.

Node JS

 NodeJS is an open source technology for servers.


 Using Node.js we can run JavaScript on the server.
 It runs on various platforms such as Windows, Linux, Unix and MacOS.
Uses of Node.js
1. It can create, open, read, delete, write and close files on the server.
2. It can collect form data.
3. It can also add, delete, modify data in databases.
4. It generates dynamic web pages.
Features
 Extremely fast: Node.js is built on Google Chrome's V8 JavaScript Engine, so its
library is very fast in code execution.
 Single threaded: Node.js follows a single threaded model with event looping.
 Highly Scalable: Node.js is highly scalable because event mechanism helps the
server to respond in a non-blocking way.
 No buffering: Node.js cuts down the overall processing time while uploading audio
and video files. Node.js applications never buffer any data. These applications simply
output the data in chunks.
 Open source: Node.js has an open source community which has produced many
excellent modules to add additional capabilities to Node.js applications.
 License: Node.js is released under the MIT license.
Environment
 For executing the Node.js scripts we need to install it. We can get it downloaded from
https://nodejs.org.en
 After successful installation we can now execute the Node.js document. The Node.js
file has extension .js
28 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 Following is a simple node.js program which can be written in notepad.
File: console_example1.js
console.log('Hello JavaTpoint');

Open Node.js command prompt and run the following code:

node console_example1.js

Here, console.log() function displays message on console.

React JS

 ReactJS is an open source, component-based front end Java Script library maintained
by Facebook
 This library is responsible only for the view layer of the application. That means this
JavaScript is for building user interfaces.
Features of ReactJS
JSX
 JSX stands for JavaScript XML. It is a JavaScript syntax extension.
 Its an XML or HTML like syntax used by ReactJS.
Components
 ReactJS is all about components.
 ReactJS application is made up of multiple components, and each component
has its own logic and controls.

One-way Data Binding

29 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


 ReactJS is designed in such a manner that follows unidirectional data flow or one-
way data binding.
 The benefits of one-way data binding give you better control throughout the
application.
Virtual DOM
 A virtual DOM object is a representation of the original DOM object.
 It works like a one-way data binding.
 Whenever any modifications happen in the web application, the entire UI is re-
rendered in virtual DOM representation.
Setting up a React Environment

If you have npx and Node.js installed, you can create a React application by using create-
react-app.

Run this command to create a React application named my-react-app:


npx create-react-app my-react-app
The create-react-app will set up everything you need to run a React application.
Run the React Application

Now you are ready to run your first real React application!

Run this command to move to the my-react-app directory:

cd my-react-app

Run this command to run the React application my-react-app:

npm start

A new browser window will pop up with your newly created React App! If not, open your
browser and type localhost:3000 in the address bar.

30 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


Django

 Django is a high level web application framework written in Python.


 It allows you to create efficient web applications quickly.
Features:
Rapid Development
Django was designed with the intention to make a framework which takes less time to build
web application. The project implementation phase is a very time taken but Django creates it
rapidly.
Secure
Django takes security seriously and helps developers to avoid many common security
mistakes, such as SQL injection, cross-site scripting, cross-site request forgery etc. Its user
authentication system provides a secure way to manage user accounts and passwords.
Scalable
Django is scalable in nature and has ability to quickly and flexibly switch from small to large
scale application project.

Versatile

31 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE


Django is versatile in nature which allows it to build applications for different-different
domains. Now a days, Companies are using Django to build various types of applications
like: content management systems, social networks sites or scientific computing platforms
etc.
Open Source
Django is an open source web application framework. It is publicly available without cost. It
can be downloaded with source code from the public repository. Open source reduces the
total cost of the application development.
Architecture

Model:
 Django applications use python objects called models which are used to access and
manage data. These models define the structure of data in the Django application.
 It is responsible for maintaining the entire applications data’s for which it provides
various mechanisms to add, update, read and delete the data in the database.
View:
 These view functions accept the web requests and deliver the web response.
 Views retrieves the necessary data to fulfil the request using models and renders
them on the user interface using templates.
Template:
 A template is a text file that defines the structure or layout of the user interface.
 The test file can be any type of file; for example HTML, XML, etc.
Used by:
 Django is used by Top MNC and companies such as Youtube, Instagram, Spotify and
Dropbox.

32
UI and UX
CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 The UI and UX are two commonly used terms in web and app design. They are
placed together in a single term UI/UX design.
What is UI?
 The UI stands for user interface.
 The user interface is the graphical layout of the application
 UI refers to the screens, buttons, toggles, icons and other visual elements that you
interact with when using a website, app or other electronic device.
 UI designers are graphics designers
 They are concerned with aesthetics.
 It is up to them to make sure the application’s interface is attractive, visually-
stimulating and themed appropriately to match the purpose of the app.
What is UX?
 The UX stands for User Experience.
 It evolved as a result of the improvement to the UI.
 The user experience is determined by how easy or difficult it is to interact with the
user interface elements that the UI designers have created.
Difference between UI and UX
UI UX
UI stands for User Interface Design UX stands for User Experience Design
UI refers the aesthetic user elements within UX refers to the functional elements a user
a product interacts within a product or service
UI design is a process that mainly focuses UX design focuses on everything that
on the look and aesthetic of product design affects the user’s journey to solve a problem
It is guided by design best practices. It is guided by deep user research.
UI design is based on the user’s needs and UX design is based on the client’s needs
research. and requirements.

UX Designer Responsibilities
Here are some key responsibilities of UX designer:
 Analyze the business needs and convert them into a captivating experience.
 The UX designer maps out the structure of the user journey.
 UX designers deal with the psychology and behavior of users and design products or
solutions that appeal to the target users.
UI Designer Responsibilities
Here are some key responsibilities of UI designer:
33 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE
 Ul designers deal with the appearance and feel of the product, including colors,
texture, shape, and form.
 They implement a visual hierarchy that guides the user on what to do.
 UI designer fills design with visual and interactive elements.
 They also take the responsibility of making the website more intuitive and
responsive.
Tools used in UI and UX
1. Figma
Figma is one of the most popular tools among designers that comes in handy for
wireframing, prototyping, and illustration. It allows good collaboration among designers and
stakeholders through its unique chat and calls features.
2. Sketch
A dedicated UI design tool for Mac later evolved and could be used on any web browser. It
saves designers time to deliver consistent prototypes, whether it’s through their library of
symbols, layer styles, or text styles, or its seamless scaling and aligning features.
3. Framer
Framer is a very powerful design tool, which can be used to create amazing and aesthetic-
looking portfolios and prototypes. Framer comes with pre-made interactive components,
polished assets, layout tools, and other features, so you can quickly create realistic websites
and apps.
Using framer-premade assets and components you may create user interfaces for MacOS,
Android, and iPhones in no time.
4. Balsamiq
A notepad-like UI wireframing tool, that gives you the feel of actual rough drawing on a
notepad. Balsamiq prevents you from becoming side tracked by colors and other elements
too early and forces you to concentrate on structure and content.
5. Adobe XD
Adobe is a big known brand when it comes to design tools. Everyone is aware of tools like
Photoshop, lightroom, after effects, and Illustrator.
The most exciting feature is the prototyping in adobe xd. These consist of 3D transforms,
repeat grids, reusable components, vector drawing tools, auto-animation, and content-
aware layouts.

34 CCS375 WEB TECHNOLOGIES UNIT V PREPARED BY : Mr.V.Balamurugan, AP/CSE

You might also like