Advanced Web Technology.pptx

ADVANCED WEB
TECHNOLOGY
Dr. Nikhil Gondaliya

CALLBACK FUNCTION IN JS
• A callback is a function passed as an argument to another function.
• This technique allows a function to call another function.
• A callback function can run after another function has finished.
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
The functions are called in the sequence as they appear in the program.

ASYNCHRONOUS JAVASCRIPT
• Functions running in parallel with other functions are called asynchronous.
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

CONT..
• In the real world, callbacks are most often used with asynchronous functions.
• A typical example is JavaScript setTimeout(). – AWD/JS
• Another example is JavaScript setInterval(); - AWD/JS

ALTERNATE OF CALLBACK
• asynchronus prorammes are difficult to write and difficult to debug so, its
solution is promise.
Promise
• "Producing code" is code that can take some time.
• "Consuming code" is code that must wait for the result.
• A Promise is a JavaScript object that links producing code and consuming
code.

CONT..
• The Promise object supports two properties: state and result.
• While a Promise object is "pending" (working), the result is undefined.
• When a Promise object is "fulfilled", the result is a value.
• When a Promise object is "rejected", the result is an error object.
myPromise.state myPromise.result
"pending" undefined
"fulfilled" a result value
"rejected" an error object
• Promise.then() takes two arguments, a callback for success and another for
failure.
• Both are optional, so you can add a callback for success or failure only. –
WAMP64/www/AWD/file read callback.htm - file read promise.htm

ASYNC AND AWAIT
• "async and await make promises easier to write"
• async makes a function return a Promise
• await makes a function wait for a Promise
async function myFunction() {
return "Hello";
}
THIS IS SAME AS
function myFunction() {
return Promise.resolve("Hello");
}
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
async function myFunction() {return "Hello";}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);</script>

AWAIT
• The await keyword can only be used inside an async function.
• The await keyword makes the function pause the execution and wait for a
resolved promise before it continues:
• let value = await promise; - AWD/JS/async await.htm
• The two arguments (resolve and reject) are pre-defined by JavaScript.
• We will not create them but call one of them when the executor function is
ready.
• Very often we will not need a reject function.
• AWD/JS/Async await timeout.htm – example async await.htm
• WAMP64/WWW/AWD/file read async await.htm

FULL STACK DEVELOPMENT
• Full Stack Development refers to the development of both front end(client
side) and back end(server side) portions of web application.
• Full stack web Developers: Full stack web developers have the ability to
design complete web applications and websites. They work on the frontend,
backend, database and debugging of web applications or websites

TECHNOLOGY RELATED TO FULL STACK
DEVELOPMENT

FRONT END & BACK END
Front End:
• It is the visible part of website or web application which is responsible for user experience.
The user directly interacts with the front-end portion of the web application or website.
• Languages: HTML, CSS, JavaScript
• Frameworks for front end: AngularJS, jQuery, React.JS, SAAS
Back End:
• It refers to the server-side development of web application or website with a primary focus on
how the website works. It is responsible for managing the database through queries and
APIs by client-side commands.
• Languages: PHP, Java, C++, Python, JavaScript, Node.JS
• Frameworks for back end: Rail, Express, Laravel, Spring, Django etc.

POPULAR STACKS
• MEAN Stack: MongoDB, Express, AngularJS and Node.js.
• MERN Stack: MongoDB, Express, ReactJS and Node.js
• Django Stack: Django, python and MySQL as Database.
• Rails or Ruby on Rails: Uses Ruby, PHP and MySQL.
• LAMP Stack: Linux, Apache, MySQL and PHP.

MEAN STACK
It comprises of four main technologies as follows:
• MongoDB⎯the database
• Express⎯the web framework
• AngularJS⎯the front-end framework
• Node.js⎯the web server

HISTORY OF WEB DEVELOPMENT
• Back in the early days of the web, people didn’t have high expectations of
websites.
• Not much emphasis was given to presentation; it was much more about
what was going on behind the scenes.
• Due to internet spread and business needs, it was required to disseminate
their presence on the globe. Need to work on different browsers was not
required on those days.
• This thing led towards difference between front-end and back-end
development.
• The back-end developers were focused on the mechanics behind the
scenes, the front-end developers focused on building a good user

LIBRARIES AND FRAMEWORKS
• During the 2000s libraries and frameworks started to become popular and
prevalent for the most common languages, on both the front and back ends.
• A good library or framework abstracts away some of the complexities of
development, allowing you to code faster and requiring less in-depth expertise.
• Through the use of frameworks and modern tools you no longer have to choose
one side or the other to be a good web developer.
• The last few years have seen an increasing tendency for moving the application
logic away from the server and into the front end.
• Tightly coupling the application code to the front end like this really starts to blur
the lines between traditional front-end and back-end developers. One of the
reasons that people like to use this approach is that it reduces the load on the
servers, thus reducing cost.
• This crowd-sourcing the computational power is required for the application by

TREND TOWARD FULL STACK
DEVELOPMENT
• The paths of front-end and back-end developers are merging, and it’s
entirely possible to be fully proficient in both disciplines.
• If you’re a freelancer, consultant, or part of a small team, being
multiskilled is extremely useful, increasing the value that you can
provide for your clients.
• Being able to develop the full scope of a website or application gives
you better overall control and can help the different parts work
seamlessly together, as they haven’t been built in isolation by separate
teams.

BENEFITS OF FULL STACK DEVELOPMENT
• You can build applications end-to-end by yourself with no
dependencies on other people.
• You have more skills, services, and capabilities to offer customers

WHY MEAN STACK?
• One of the great things about the stack MEAN is that it not only uses
JavaScript in the browser, it uses JavaScript throughout.
• Using the MEAN stack, you can code both the front end and back end
in the same language.

NODE.JS
• Node.js is a software platform that allows you to create your own web
server and build web applications on top of it.
• Node.js isn’t itself a web server, nor is it a language.
• It contains a built-in HTTP server library, meaning that you don’t
need to run a separate web server program such as Apache or Internet
Information Services (IIS).
• With PHP, for example, you can easily find a shared-server web host
running Apache, send some files over FTP, and—all being well—your
site is running.
• This works because the web host has already configured Apache for
you and others to use.
• With Node.js this isn’t the case, as you configure the Node.js server

CONT..
• One of the main reasons that Node.js is gaining broad popularity is that you code it
in a language that most web developers are already familiar with: JavaScript.
• Until now, if you wanted to be a full-stack developer you had to be
proficient in at least two languages: JavaScript on the front end and
something else like PHP or Ruby on the back end.
• Another reason for the popularity of Node.js is, when coded correctly, it’s extremely
fast and makes very efficient use of system resources.
• Node.js is light on system resources because it’s single threaded, whereas
traditional web servers are multithreaded.

SINGLE VS MULTI THREAD WEB SERVER
Traditional Web Server Single Thread Web Server

NPM - NODE PACKAGE MANAGER
• npm is a package manager that gets installed when you install Node.js. npm gives
you the ability to download Node.js modules or “packages” to extend the
functionality of your application.
• More than 46000 packages are available.
• As you’ve seen, Node.js is extremely powerful and flexible, but it
doesn’t give you much help when trying to create a website or
application. Express has been created to give you a hand here. Express
is installed using npm.

EXPRESS
• Express is a web application framework for Node.js that has been designed to do this in
a well-tested and repeatable way.
• Node.js is a platform not a server. This allows you to get creative with your server setup
and do things that other web servers can’t do.
• Express abstracts away this difficulty by setting up a web server to listen to incoming
requests and return relevant responses.
• One of the great features of Express is that it provides a really simple interface for
directing an incoming URL to a certain piece of code. Whether this is going to serve a
static HTML page, read from a database, or write to a database doesn’t really matter.
• Express provides support for a number of different templating engines that make it
easier to build HTML pages in an intelligent way, using reusable components as well as
data from your application. Express compiles these together and serves them to the
browser as HTML.
• Express comes with the ability to use sessions so that you can identify individual visitors through
multiple requests and pages.

MONGODB
• MongoDB is document database unlike relational database where we have row and
column. Column defines the field and row specified data entry.

CONT..
• MongoDB stores documents as BSON, which is binary (JavaScript Serialized JSON
Object Notation).
{
"firstName" : "Simon",
"lastName" : "Holmes",
_id : ObjectId("52279effc62ca8b0c1000007")
}
• In short, JSON is a JavaScript way of holding data, hence why
MongoDB fits so well into the JavaScript-centric MEAN stack!

MONGODB IS NOT GOOD FOR?
• MongoDB isn’t a transactional database and shouldn’t be used as such.
A transactional database can take a number of separate operations as
one transaction. If any one of the operations in a transaction should
fail the entire transaction fails, and none of the operations complete.
• MongoDB does not work like this. MongoDB will take each of the
operations independently; if one fails then it alone fails, and the rest of
the operations will continue.
• MongoDB’s flexibility about what it stores in documents is a great
thing for the database. But most applications need some structure to
their data.
• Note that it’s the application that needs the structure, not the database.
So where does it make most sense to define the structure of your

ANGULARJS
• AngularJS is a JavaScript framework for working with data directly in
the front end.
• You could use Node.js, Express, and MongoDB to build a fully
functioning data driven web application
• The traditional way of doing things is to have all of the data processing
and application logic on the server, which then passes HTML out to
the browser. AngularJS enables you to move some or all of this
processing and logic out to the browser, sometimes leaving the server
just passing data from the database.

ANGULARJS VS JQUERY
• jQuery is generally added to a page to provide interactivity, after the
HTML has been sent to the browser and the Document Object Model
(DOM) has completely loaded.
• AngularJS comes in a step earlier and helps put together the HTML
based on the data provided.
• Also, jQuery is a library, and as such has a collection of features that
you can use as you wish. AngularJS is what is known as an opinionated
framework.
• AngularJS helps put the HTML together based on the data provided,
but it does more than this. It also immediately updates the HTML if
the data changes and can also update the data if the HTML changes.
This is known as two-way data binding.

SINGLE PAGE APPLICATION (SPA)
• Something that AngularJS has been specifically designed for is single-
page application (SPA) functionality.
• In real terms, an SPA runs everything inside the browser and never
does a full page reload. What this means is that all application logic,
data processing, user flow, and template delivery can be managed in
the browser.
• Think Gmail. That’s an SPA. Different views get shown in the page,
along with a whole variety of data sets, but the page itself never fully
reloads.
• This approach can really reduce the amount of resources you need on
your server, as you’re essentially crowd-sourcing the computational
power. Each person’s browser is doing the hard work, and your server

WHEN ANGULARJS NOT TO BE USED?
• Despite its many benefits, AngularJS isn’t appropriate for every website.
• AngularJS uses JavaScript to build the rendered HTML from templates
and data, so if your browser doesn’t support JavaScript, or if there’s a bug
in the code, then the site won’t run.
• This reliance on JavaScript to build the page also causes problems with
search engines. When a search engine crawls your site it will not run any
JavaScript, and with AngularJS the only thing you get before JavaScript
takes over is the template from the server. If you want your content and
data indexed by search engines rather than just your templates, you’ll
need to think whether AngularJS is right for that project.
• One thing you can do is use AngularJS for some things and not others.
There’s nothing wrong with using AngularJS selectively in your project.
For example, you might have a data-rich interactive application or section

GIT FOR SOURCE CODE CONTROL
• Saving code on your computer or a network drive is all very well and
good, but that only ever holds the current version. It also only lets you,
or others on your network, access it.
• Git is a distributed revision control and source code management
system.
• This means that several people can work on the same codebase at the
same time on different computers and networks. These can be pushed
together with all changes stored and recorded. It also makes it possible
to roll back to a previous state if necessary.
• Git is typically used from the command line, although there are GUIs
available for Windows and Mac.
• In a typical Git setup you’ll have a local repository on your machine

HOSTING OF NODEJS APPLICATION
• To run a Node.js application successfully you either need a server that
has been configured with that in mind, or you can use a PaaS provider
that’s aimed specifically at hosting Node.js.
• We’re going to use Heroku (www.heroku.com) as our hosting provider.
Heroku is one of the leading hosts for Node.js applications, and it has
an excellent free tier that we’ll be making use of.
• Applications on Heroku are essentially Git repositories, making the
publishing process incredibly simple.

ANGULARJS
• AngularJS extends HTML with new attributes.
• AngularJS is perfect for Single Page Applications (SPAs).
• AngularJS is easy to learn.
• AngularJS is a JavaScript framework. It can be added to an HTML
page with a <script> tag.
• AngularJS extends HTML attributes with Directives, and binds data
to HTML with Expressions.

MVC (MODEL VIEW CONTROLLER)
• AngularJS provides developers an options to write client-side applications
using JavaScript in a clean Model View Controller (MVC) way.
The model is responsible for managing application data.
It responds to the request from view and to the
instructions from controller to update itself.
A presentation of 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.
The controller responds to user input and performs
interactions on the data model objects. The controller
receives input, validates it, and then performs business
operations that modify the state of the data model.

HOW TO START ANGULARJS APP?
• Need to add the following script tag in HTML file. It refers from CDN of
Google.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
• We can also download the file and put the same folder.
<script src="angular.min.js"></script>
• While it is common in HTML applications to place scripts at the end of the
<body> element, it is recommended that you load the AngularJS library
either in the <head> or at the start of the <body>.

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.

ANGULARJS DIRECTIVES
• AngularJS directives are HTML attributes with an ng prefix.
• The ng-init directive initializes AngularJS application variables.
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-
bind="firstName"></span></p>
</div>
• Alternatively with valid HTML:
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-
bind="firstName"></span></p>
</div>
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.

ANGULARJS EXPRESSION
• AngularJS binds data to HTML using Expressions.
• AngularJS expressions can be written inside double braces: {{ expression }}.
• AngularJS expressions can also be written inside a directive: ng-bind="expression".
• AngularJS expressions are much like JavaScript expressions: They can
contain literals, operators, and variables.
• For example: Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
• AngularJS script: Change the background color of text box based on the color
name entered in the textbox.

CONT..
Using Expressions
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Using ng-bind
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

ANGULARJS STRING
• <div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
• <div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

ANGULARJS OBJECT
• <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
• <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>

ANGULARJS ARRAY
• <div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
• <div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>

ANGULARJS VS JAVASCRIPT EXPRESSON
• Like JavaScript expressions, AngularJS expressions can contain literals,
operators, and variables.
• Unlike JavaScript expressions, AngularJS expressions can be written inside
HTML.
• AngularJS expressions do not support conditionals, loops, and exceptions,
while JavaScript expressions do.
• AngularJS expressions support filters, while JavaScript expressions do not.

ANGULARJS MODULE
• 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.
• <div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
• The "myApp" parameter refers to an HTML element in which the application will
run.
• Now you can add controllers, directives, filters, and more, to your AngularJS
application.

CONTROLLER
• AngularJS controllers control the data of AngularJS applications.
• AngularJS controllers are regular JavaScript Objects.
• <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) { // controller is javascript inbuilt object and created
by
$scope.firstName = "John"; // object constructor by passing $scope
$scope.lastName = "Doe"; // $scope is the application object (the owner of
// application variables and functions).
});
</script>

CONT..
• <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()}} // method calling for application
</div>
<script>
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() { // method inside controller
return $scope.firstName + " " + $scope.lastName;
};
});
</script>

MODULE AND CONTROLLER IN SEPARATE
FILE
• <!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">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script> //adding of module
<script src="myCtrl.js"></script> //adding of controller
</body>
</html>
• var app = angular.module("myApp", []); // myApp.js – Module
• app.controller("myCtrl", function($scope) { // myCtrol.js – Controller
$scope.firstName = "John";
$scope.lastName= "Doe";
});

DATA BINDING
• Data binding in AngularJS is the synchronization between the model and the
view.
• Data model : AngularJS applications usually have a data model. The data model
is a collection of data available for the application.
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
• View (HTML): The HTML container where the AngularJS application is displayed,
is called the view.
<p ng-bind="firstname"></p>

ONE VS TWO WAY DATA BINDING
• One-way data binding is what you’re aiming for when looking at using Node.js, Express, and
MongoDB. Node.js gets the data from MongoDB, and Express then uses a template to compile
this data into HTML that’s then delivered to the server.
• This one-way model is the basis for most database-driven websites. In this model most of the
hard work is done on the server, leaving the browser to just render HTML and run any
JavaScript interactivity.

CONT..
• Two-way data binding is different. First, the template and data are sent independently to the
browser. The browser itself compiles the template into the view and the data into a model. The
real difference is that the view is “live.” The view is bound to the model, so if the model changes
the view changes instantly. On top of this, if the view changes, then the model also changes.

TWO WAY DATA BINDING
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="firstname">
<h1>{{firstname}}</h1>
</div>
<script>
app.controller('myCtrl', function($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
});
</script>

SCOPE OBJECT
• 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.
• Property and functions in controller are created with prefix $scope. and they are refereed
in view with just name of it.
• If we consider an AngularJS application to consist of:
⮚ View, which is the HTML.
⮚ Model, which is the data available for the current view.
⮚ Controller, which is the JavaScript function that makes/changes/removes/controls
the data.
• In this, the scope is the Model.

CONT..
• It is important to know which scope you are dealing with, at any time.
• For larger applications there can be sections in the HTML DOM which can only
access certain scopes.
• It is possible that there can be more than one scope in any application.
// AWS/AngularJS/two scopes.htm

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.
• If a variable has the same name in both the current scope and in the
rootScope, the application uses the one in the current scope.
// AWD/AngularJS/root scope.htm

NG-REPEAT DIRECTIVE
• Angular-JS ng-repeat directive is a handy tool to repeat a set of HTML code for a
number of times or once per item in a collection of items. ng-repeat is mostly
used on arrays and objects.
<div ng-repeat=“i in array ">
{{i}}
</div>
<ul>
<li ng-repeat=“(key,value) in names”>{{key “and” value}} </li>
<ul>
• AWD/AngularJS/ng-repeat array.htm – ng-repeat record.htm – ng-repeat
object.htm
<div ng-repeat="keyName in MyObjectName "> {{keyName}} </div>

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.

HOW TO ADD FILTER?
• <div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>

CURRENCY FILTER AND FILTER
• {{ number | currency : symbol : fractionsize }}
• Symbol and fractionsize both are optional.
• <div ng-app="myApp" ng-controller="costCtrl">
<p>Price = {{ price | currency : "NOK" : 3 }}</p>
</div>
• Filter filter – AWD/AngularJS/filter filter.htm
• Filter based on input in text box // AWD/AngularJS/filter filter textbox.htm
• Filter based on more than two keys //AWD/AngularJS/filter two keys.htm
• Example - //AWD/AngularJS/filter subject.htm

ORDER BY FILTER
<tr ng-repeat="x in names | orderBy:properyName">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
//AWD/AngularJS/filter orderby.htm

NUMBER FILTER
• {{ string | number : fractionsize}} // fractionsize is optional
• <div ng-app="myApp" ng-controller="nCtrl">
<h1>{{prize | number}}</h1>
</div>
<script>
app.controller('nCtrl', function($scope) {
$scope.prize = 1000000;
});
</script>

DATE FILTER
• {{ date | date : format : timezone }}
Some common values used in format are as
follow:
‘yyyy’ – define year ex. 2019
‘yy’ – define year ex. 19
‘y’ – define year ex. 2019
‘MMMM’ – define month ex. April
‘MMM’ – define month ex. Apr
‘MM’ – define month ex. 04
‘dd’ – define day ex. 09
‘d’ – define day ex. 9
‘hh’ – define hour in AM/PM
‘h’ – define hour in AM/PM
‘mm’ – define minute
‘m’ – define minute
‘ss’ – define second
‘s’ – define second
Some predefined values for format are as
follow:
“short” – equivalent to “M/d/yy h:mm a”
“medium” – equivalent to “MMM d, y h:mm:ss a”
“shortDate” – equivalent to “M/d/yy” (5/7/19)
“mediumDate” – equivalent to “MMM d, y” (May 7,
2019)
“longDate” – equivalent to “MMMM d, y” (May 7,
2019)
“fullDate” – equivalent to “EEEE, MMMM d, y”
(Tuesday, May 7, 2019)
“shortTime” – equivalent to “h:mm a” (2:35 AM)
“mediumTime” – equivalent to “h:mm:ss a”
(2:35:05 AM)

LIMITTO FILTER
• The limitTo filter in AngularJS is used to returns an array or a string which
contains a specified number of elements.
• {{ object | limitTo : limit : begin }}
• Parameters:
⮚ limit: Number of returned elements.
⮚ begin: Begin point of limitation. default is 0.
//AWD/AngularJS/filter limitTo.htm
//AWD/AngularJS/filter limitTo array.htm

JSON FILTER
• The json filter in AngularJs is used to convert a JavaScript object into a
JSON.
• {{ object | json : spacing }}
• Parameter value:
⮚ json: It is used to specify that the object should be displayed in JSON
format.
⮚ spacing: It is an optional parameter with a default value of 2 that
specifies the number of spaces per indentation.

CUSTOM FILTER
• You can make your own filters by registering a new filter factory function with
your module.
<script>
app.filter('myFormat', function() {
return function(x) {
var txt;
txt = x.length;
return txt;
};
}); // AWD/AngularJS/filter custom.htm - filter custom altaernate.htm

ANGULARJS SERVICES
• In AngularJS, a service is a function, or object, that is available for, and
limited to, your AngularJS application.
• AngularJS has about 30 built-in services.
• One of them is $location service: has methods which return information
about the location of the current web page.
app.controller('customersCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
• Note that the $location service is passed into the controller as an argument.
In order to use the service in the controller, it must be defined as a
dependency.
The $location service has methods which return information about the location of the current web page:

WHY SERVICES?
• For many services, like the $location service, it seems like you could use
objects that are already in the DOM, like the window.location object, and you
could, but it would have some limitations, at least for your AngularJS
application.
• AngularJS constantly supervises your application, and for it to handle
changes and events properly, AngularJS prefers that you use the $location
service instead of the window.location object.

$HTTP SERVICE (AJAX CALL)
• 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.
//WAMP64/WWW/AWD/http service.htm
//WAMP64/WWW/AWD/http json read.htm
• The response from the server is an object with these properties:
⮚ .config the object used to generate the request.
⮚ .data a string, or an object, carrying the response from the server.
⮚ .headers a function to use to get header information.
⮚ .status a number defining the HTTP status.
⮚ .statusText a string defining the HTTP status.

CUSTOM DIRECTIVES
• AngularJS lets you extend HTML with new attributes called Directives.
• AngularJS has a set of built-in directives which offers functionality to your
applications.
• New directives are created by using the .directive function.
• To invoke the new directive, make an HTML element with the same tag name
as the new directive.
• When naming a directive, you must use a camel case name, w3TestDirective,
but when invoking it, you must use - separated name, w3-test-directive.
// AWD/AngularJS/custom directive.htm

CONT..
• You can invoke a directive by using:
⮚ Element name: <w3-test-directive></w3-test-directive> - E
⮚ Attribute - <div w3-test-directive></div> - A
⮚ Class - <div class="w3-test-directive"></div> - C
⮚ Comment -  - M
• You can restrict your directives to only be invoked by some of the methods.
app.directive("w3TestDirective", function() {
return {
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});
• By default, the value is EA, meaning that both Element names and attribute names can
invoke the directive.

TABLE
• The ng-repeat directive is perfect for displaying tables.
• // WAMP64/WWW/AWD/table display.htm
• // WAMP64/WWW/AWD/table display odd even.htm

DROPDOWN LIST – NG-OPTION DIRECTIVE
• AngularJS lets you create dropdown lists based on items in an array, or an object.
// AWD/AngularJS/dropdown ng-options.htm - AWD/AngularJS/dropdown ng-repeat.htm
• <select ng-options="array expression"></select>
Legal expressions:
label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by expression
label disable when disable for value in array track by expression
label for value in array | orderBy expression track by expression

CONT..
• Suppose we have array of objects:
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
<select ng-model="selectedCar">
<option ng-repeat="x in
cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
<select ng-model="selectedCar" ng-options="x.model
for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
When using the value as an object, use ng-value instead of value

CONT..
• // AWD/AngularJS/dropdown key-value.htm
• The value in a key-value pair can also be an object:
• // AWD/AngularJS/dropdown value-object.htm
• In dropdown, we can also put the key of from key-value pair in the above
example

ANGULARJS SQL
• AngularJS is perfect for displaying data from a Database. Just make sure the data is in JSON form.
• <?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT CompanyName, City, Country FROM Customers");
$outp = "";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
if ($outp != "") {$outp .= ",";}
$outp .= '{"Name":"' . $rs["CompanyName"] . '",';
$outp .= '"City":"' . $rs["City"] . '",';
$outp .= '"Country":"'. $rs["Country"] . '"}';
}
$outp ='{"records":['.$outp.']}';
$conn->close();
echo($outp);
?>

ANGULARJS HTML DOM
• AngularJS has directives for binding application data to the attributes of
HTML DOM elements.
• The ng-disabled directive binds AngularJS application data to the disabled
attribute of HTML elements. - // AWD/AngularJS/ng-disabled.htm
• The ng-show directive shows or hides an HTML element. //
AWD/AngularJS/ng-show.htm
• You can use any expression that evaluates to true or false. - . //
AWD/AngularJS/ng-show expression.htm
• The ng-hide directive hides or shows an HTML element.

ANGULARJS EVENTS
• AngularJS has its own HTML events directives.
• ng-blur, ng-change, ng-click, ng-copy, ng-cut, ng-dblclick, ng-focus,
ng-keydown, ng-keypress, ng-keyup, ng-mousedown, ng-mouseenter, ng-
mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-paste
• The event directives allows us to run AngularJS functions at certain user
events.
• An AngularJS event will not overwrite an HTML event, both events will be
executed.
• Increase the count variable when the mouse moves over the H1 element: -
// AWD/AngularjS/ng-mousemove.htm
• In the above script, ng-click event can be attached.

CONT..
• You can also refer to a function for event. // AWD/AngularJS/ng-mousemove
function.htm
• Toggle button to show the dropdown list - // AWD/AngularJS/ng-click
toggle.htm
• You can pass the $event object as an argument when calling the function.
• The $event object contains the browser's event object. -
// AWD/AngularJS/event object.htm

ANGULARJS FORMS
• Forms in AngularJS provides data-binding and validation of input controls.
• Input controls are the HTML input elements:
⮚ input elements
⮚ select elements
⮚ button elements
⮚ textarea elements
• Checkbox - // AWD/AngularJS/input checkbox.htm
• Radiobutton – // AWD/AngularJS/input radiobutton.htm
• Select box - // AWD/AngularJS/input selectbox.htm

ANGULARJS FORM VALIDATION
• AngularJS can validate input data.
• AngularJS offers client-side form validation.
• AngularJS monitors the state of the form and input fields (input, textarea,
select), and lets you notify the user about the 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.

CONT..
• Required field validation - // AWD/AngularJS/required field.htm
• Email validation for HTML5 feature - // AWD/AngularJS/email validation.htm

INPUT STATE
• AngularJS is constantly updating the state of both the form and the input fields.
• Input fields have the following states:
⮚ $untouched: Returns true if the user has not tabbed out from the control
⮚ $touched: Returns true if the user has tabbed out from the control
⮚ $pristine: Returns true if the user has not interacted with control yet else returns false.
⮚ $dirty: Returns true if user changed the value of model at least once
⮚ $invalid: The field content is not valid
⮚ $valid: The field content is valid
⮚ $error: - Object contains all the validation attributes applied to the specified element.
• They are all properties of the input field and are either true or false.
• Show an error message if the field has been touched AND is empty: //
AWD/AngularJS/validation touch_empty.htm

CONT..
• Generally, by using html5 required and angularjs ng-required attributes we can perform
required field validation in form. Both required and ng-required will do the same
validation so we can use either of them based on our interest.
• Following is the way of defining required and ng-required properties in angularjs
applications.
1. <input required>
2. <input ng-required="true"> are essentially the same thing.
• Form validation using required. - // AWD/AngularJS/form validation required.htm
• Access the Input field properties like <form name>.<input name>.<angular
property>
• // AWD/AngularJS/form validation input.htm
• // AWD/AngularJS/submit disable.htm

CONT..
// AWD/AngularJS/form input validation ex-2.htm
Directive Description
ng-required Sets required attribute on an input field.
ng-minlength Sets minlength attribute on an input field.
ng-maxlength Sets maxlength attribute on an input field.
Setting the attribute to a negative or non-
numeric value, allows view values of any
length.
ng-pattern Sets pattern validation error key if the
ngModel value does not match the specified
RegEx expression.
// AWD/AngularJS/form validation full.htm
AWD/AngularJS/list adding on button click.htm

FORM STATE
• Forms have the following states:
⮚ $pristine No fields have been modified yet
⮚ $dirty One or more have been modified
⮚ $invalid The form content is not valid
⮚ $valid The form content is valid
⮚ $submitted The form is submitted
• They are all properties of the form and are either true or false.
• You can use these states to show meaningful messages to the user.
• // AWD/AngularJS/form validation disable.htm

CSS CLASSES
• AngularJS adds CSS classes to forms and input fields depending on their states.
• The following classes are added to, or removed from, input fields:
⮚ ng-untouched The field has not been touched yet
⮚ ng-touched The field has been touched
⮚ ng-pristine The field has not been modified yet
⮚ ng-dirty The field has been modified
⮚ ng-valid The field content is valid
⮚ ng-invalid The field content is not valid
⮚ ng-valid-key One key for each validation. Example: ng-valid-required, useful when
there are more than one thing that must be validated
⮚ ng-invalid-key Example: ng-invalid-required
// AWD/AngularJS/input css class.htm

CONT..
• The following classes are added to, or removed from, forms:
⮚ ng-pristine No fields has not been modified yet
⮚ ng-dirty One or more fields has been modified
⮚ ng-valid The form content is valid
⮚ ng-invalid The form content is not valid
⮚ ng-valid-key One key for each validation. Example: ng-valid-required,
useful when there are more than one thing that must be validated
⮚ ng-invalid-key Example: ng-invalid-required
// AWD/AngularJS/form css class.htm
// AWD/AngularJS/css class example.htm
// AWD/AngularJS/custom validation ex-1.htm

ANGULARJS API
• he AngularJS Global API is a set of global JavaScript functions for performing common
tasks like:
⮚ Comparing objects
⮚ Iterating objects
⮚ Converting data
• The Global API functions are accessed using the angular object.
• lowercase API - $scope.x2 = angular.lowercase($scope.x1);
• // AWS/AngularJS/lowercase API.htm
⮚ ngular.lowercase() Converts a string to lowercase
⮚ angular.uppercase() Converts a string to uppercase
⮚ angular.isString() Returns true if the reference is a string
⮚ angular.isNumber() Returns true if the reference is a number

ANGULARJS INCLUDE
• With AngularJS, you can include HTML content using the ng-
include directive.
• <body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
• The HTML files you include with the ng-include directive, can also contain
AngularJS code:

CROSS DOMAIN ACCESS
• By default, the ng-include directive does not allow you to include files from other
domains.
• To include files from another domain, you can add a whitelist of legal files and/or
domains in the config function of your application.
<body ng-app="myApp">
<div ng-include="'https://tryit.w3schools.com/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://tryit.w3schools.com/**'
]);
});
</script>
</body>
• Be sure that the server on the destination allows cross domain file access.

ANGULARJS ANIMATION
• AngularJS provides animated transitions, with help from CSS.
• To make your applications ready for animations, you must include the
AngularJS Animate library:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angu
lar-animate.js"></script>
• Then you must refer to the ngAnimate module in your application: <body ng-
app="ngAnimate">
• Or if your application has a name, add ngAnimate as a dependency in your
application module.
• // AWS/AngularJS/animation-1.htm

CONT..
• The ngAnimate module adds and removes classes.
• The ngAnimate module does not animate your HTML elements, but when ngAnimate notice
certain events, like hide or show of an HTML element, the element gets some pre-defined
classes which can be used to make animations.
• The directives in AngularJS who add/remove classes are:
⮚ ng-show
⮚ ng-hide
⮚ ng-class
⮚ ng-view
⮚ ng-include
⮚ ng-repeat
⮚ ng-if
⮚ ng-switch

ANGULAR ROUTING
• 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.
• To make your applications ready for routing, you must include the AngularJS Route
module: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-
route.js"></script>
• Then you must add the ngRoute as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
• Now your application has access to the route module, which provides the $routeProvider.
• Use the $routeProvider to configure different routes in your application:

CONT..
• Your 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 your
application: <div ng-view></div> OR <ng-view></ng-view> OR
<div class="ng-view"></div>
• // WAMP64/WWW/AWD/routing.htm
• We can also write separate controller for each route.
• // WAMP64/WWW/AWD/routing controller.htm

WHAT IS NODE.JS?
• Node.js is an open source server environment
• Node.js is free
• Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
• Node.js uses JavaScript on the server

WHY NODE.JS?
• 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:
⮚ Sends the task to the computer's file system.
⮚ Waits while the file system opens and reads the file.
⮚ Returns the content to the client.
⮚ Ready to handle the next request.
• Here is how Node.js handles a file request:
⮚ Sends the task to the computer's file system.
⮚ Ready to handle the next request.
⮚ 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.
• Node.js runs single-threaded, non-blocking, asynchronous programming, which is very memory
efficient

WHAT NODE.JS CAN 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 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"

GETTING STARTED WITH NODE.JS
• The official Node.js website has installation instructions for
Node.js: https://nodejs.org

HTTP MODULE
• Node.js has a built-in module called HTTP, which allows Node.js to transfer data over
the Hyper Text Transfer Protocol (HTTP).
• To include the HTTP module, use the require() method: var http =
require('http’);
var http = require('http');
//create a server object:
http.createServer(function (req, res) {
res.write('Hello World!'); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080
Save file as .js and compile it as node filename.js

Adding Header information
If the response from the HTTP server is supposed to be displayed as HTML, you should include an HTTP header with the correct content
type:

Advanced Web Technology.pptx

Recommended

Recommended

More Related Content

Similar to Advanced Web Technology.pptx

Similar to Advanced Web Technology.pptx (20)

Recently uploaded

Recently uploaded (20)

Advanced Web Technology.pptx