SlideShare a Scribd company logo
1 of 67
Download to read offline
Mrs.V.Mareeswari
Assistant Professsor(Sr)
School of InformationTechnology and Engineering
VIT,Vellore
Cabin No:SJT 210-A30
Module 3
Web Applications
 Web applications-
 Web Application Frameworks
 MVC framework
 Angular JS
 Single Page Applications
 ResponsiveWeb Design
V.Mareeswari / AP(Sr) / SITE /VIT2
Web Applications
 A web application is a Client-Server computer program that
utilizes web browsers and web technology to perform tasks over
the Internet.
V.Mareeswari / AP(Sr) / SITE /VIT3
How web application works?
 User triggers a request to the web server over the Internet, either
through a web browser or the application’s user interface.
 Web server forwards this request to the appropriate web application
server.
 Web application server performs the requested task – such as
querying the database or processing the data – then generates the
results of the requested data.
 Web application server sends results to the web server with the
requested information or processed data.
 Web server responds back to the client with the requested
information that then appears on the user’s display
V.Mareeswari / AP(Sr) / SITE /VIT4
EXAMPLE OF A WEB APPLICATION
Web applications include online forms, online retail sales, online
auctions, wikis, instant messaging services, shopping carts, word
processors, spreadsheets, video and photo editing, file conversion, file
scanning, and email programs such as Gmail, Yahoo and AOL. Popular
applications include Google Apps and Microsoft 365.
Google Apps for Work has Gmail, Google Docs, Google Sheets, Google
Slides, online storage and more. Other functionalities include online
sharing of documents and calendars. This lets all team members access
the same version of a document simultaneously.
V.Mareeswari / AP(Sr) / SITE /VIT5
Benefits of Web Application
 Web applications run on multiple platforms regardless of OS or
device as long as the browser is compatible.
 All users access the same version, eliminating any compatibility
issues.
 They are not installed on the hard drive, thus eliminating space
limitations.
 They reduce software piracy in subscription-based web applications
(i.e. SaaS).
 They reduce costs for both the business and end user as there is less
support and maintenance required by the business and lower
requirements for the end user’s computer
V.Mareeswari / AP(Sr) / SITE /VIT6
Web Application Frameworks
 A web framework (WF) or web application
framework (WAF) is a software framework that is designed to
support the development of web applications including web
services, web resources, and web APIs.
 Web frameworks provide a standard way to build and deploy web
applications. Web frameworks aim to automate the overhead
associated with common activities performed in web development.
 For example, many web frameworks
provide libraries for database access, templating frameworks,
and session management, and they often promote code
reuse. Although they often target development of dynamic web sites,
they are also applicable to static websites.
V.Mareeswari / AP(Sr) / SITE /VIT7
Types of framework architectures
 Model–view–controller (MVC)
Many frameworks follow the MVC architectural pattern to separate the data model with business
rules from the user interface. This is generally considered a good practice as it modularizes code,
promotes code reuse, and allows multiple interfaces to be applied. In web applications, this permits
different views to be presented, such as web pages for humans, and web service interfaces for remote
applications.
 Push-based vs. pull-based
 Most MVC frameworks follow a push-based architecture also called "action-based". These frameworks
use actions that do the required processing, and then "push" the data to the view layer to render the
results. Django, Ruby on Rails, Symfony, Spring MVC, Stripes, Diamond, CodeIgniter are good
examples of this architecture.
 An alternative to this is pull-based architecture, sometimes also called "component-based". These
frameworks start with the view layer, which can then "pull" results from multiple controllers as needed.
In this architecture, multiple controllers can be involved with a single view. Lift, Tapestry, JBoss
Seam, JavaServer Faces, (µ)Micro, andWicket are examples of pull-based architectures.
 Play, Struts, RIFE, and ZK have support for both push- and pull-based application controller calls.
 Three-tier organization
 In three-tier organization, applications are structured around three physical tiers: client, application, and
database. The database is normally an RDBMS. The application contains the business logic, running on a
server and communicates with the client using HTTP. The client on web applications is a web browser
that runs HTML generated by the application layer. The term should not be confused with MVC, where,
unlike in three-tier architecture, it is considered a good practice to keep business logic away from the
controller, the "middle layer".
V.Mareeswari / AP(Sr) / SITE /VIT8
Model-View-Controller (MVC)
 The Model-View-Controller (MVC) is an architectural pattern
that separates an application into three main logical components:
the model, the view, and the controller.
 MVC is one of the most frequently used industry-standard web
development framework to create scalable and extensible projects.
V.Mareeswari / AP(Sr) / SITE /VIT9
 Model
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. For
example, a Customer object will retrieve the customer information from the
database, manipulate it and update it data back to the database or use it to
render data.
 View
The View component is used for all the UI logic of the application. For example,
the Customer view will include all the UI components such as text boxes,
dropdowns, etc. that the final user interacts with.
 Controller
Controllers act as an interface between Model and View components to process
all the business logic and incoming requests, manipulate data using the Model
component and interact with the Views to render the final output. For example,
the Customer controller will handle all the interactions and inputs from the
Customer View and update the database using the Customer Model. The same
controller will be used to view the Customer data.V.Mareeswari / AP(Sr) / SITE /VIT10
V.Mareeswari / AP(Sr) / SITE /VIT11
Top Web Development Frameworks -2018
S.No Name Description
1 AngularJS
 JavaScript framework ,develop your front-end based apps
 Google,Angular 4 , MVC architectural pattern
 Netflix, Freelancer.com,GoodFIlms
2 Ruby on Rails
 server-side web development framework is built using Ruby
 Basecamp,Ask.fm, GitHub, 500px
3 Yii
 Yii is an open-source web application development framework that is
built in PHP5. Tass, Craftcms, HumHub
4 Meteor JS
 written in Node.js ,creating simple websites for personal use
 developing for iOS, web,Android or desktop
5 Express JS
 developed in Node.js,develop web applications andAPIs as fast and
easy
 Express is the best choice for those people whose goal it is to develop
simple web services andAPIs rather than web portals or high-loaded
calculating backends.V.Mareeswari / AP(Sr) / SITE /VIT12
6 Zend
 based on PHP
 building more secure, modern, reliable, web services and applications.
7 Django
 written in Python
 ModelViewTemplate (MVC) architecture
8 Laravel
 PHP development frameworks
 develop the web and mobile applications for small websites and big
businesses
 MVC support
9
React.js  JavaScript library maintained by Facebook
 near future called, React Fibre
10 Node.js
 Node.js is not just a framework, it is a complete environment.
 lightweight and efficient against real-time applications with a large
amount of data running on distributed devices
V.Mareeswari / AP(Sr) / SITE /VIT13
11 Symfony
 PHP framework
 largest open source platforms such as PHPBB, Piwik, and
Drupal.
12 ASP.NET  open-source and has close to 15% market share.
13 CakePHP
 written in PHP
 model-controller-view and association data mapping
14 Vue.js
 open-source JavaScript library for developing user interfaces
 released in 2013 and now it has 59600 stars on Github
 Angular itself has 56300 stars on Github
V.Mareeswari / AP(Sr) / SITE /VIT14
Angular JS
 AngularJS is an open source Model-View-Controller framework
which is similar to the JavaScript framework.
 It can be added to an HTML page with a <script> tag.
 AngularJS extends HTML attributes with Directives, and binds data
to HTML with Expressions.
 AngularJS is open source, completely free, and used by thousands of
developers around the world.
 It is used in Single Page Application (SPA) projects.
 It was originally developed in 2009 by Misko Hevery and Adam
Abrons. It is now maintained by Google.
 AngularJs 1.7.2 is the stable version in June 2018, but AngularJs 2.0 is
the latest version which is actually a beta version.Angular 5.
 It is licensed under the Apache license version 2.0.V.Mareeswari / AP(Sr) / SITE /VIT15
AngularJS Features
V.Mareeswari / AP(Sr) / SITE /VIT16
 Angular has the following key features which makes it one of the powerful
frameworks in the market.
 MVC – The framework is built on the famous concept of MVC (Model-
View-Controller). This is a design pattern used in all modern day web
applications. This pattern is based on splitting the business logic layer, the
data layer, and presentation layer into separate sections. The division into
different sections is done so that each one could be managed more easily.
 Data Model Binding – You don't need to write special code to bind data
to the HTML controls. This can be done by Angular by just adding a few
snippets of code.
 Writing less code – When carrying out DOM manipulation a lot of
JavaScript was required to be written to design any application. But with
Angular, you will be amazed with the lesser amount of code you need to
write for DOM manipulation.
 Unit Testing ready – The designers at Google not only developed Angular
but also developed a testing framework called "Karma" which helps in
designing unit tests forAngularJS applications.
Disadvantages of AngularJS
V.Mareeswari / AP(Sr) / SITE /VIT17
Though AngularJS comes with lots of plus points but same time we
should consider the following points −
 Not Secure − Being JavaScript only framework, application written
in AngularJS are not safe. Server side authentication and authorization
is must to keep an application secure.
 Not degradable − If your application user disables JavaScript then
user will just see the basic page and nothing more.
The AngularJS Components
V.Mareeswari / AP(Sr) / SITE /VIT18
 The AngularJS framework can be divided into following three major
parts −
 ng-app − This directive defines and links an AngularJS application to
HTML.
 ng-model − This directive binds the values of AngularJS application
data to HTML input controls.
 ng-bind − This directive binds the AngularJS Application data to
HTML tags.
Download for offline web development:
 https://code.angularjs.org/1.7.4/angular.min.js
V.Mareeswari / AP(Sr) / SITE /VIT19
<html><head> Basic 3.html
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js
"></script> </head>
<body><h1>Sample Application</h1><div ng-app = "">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p></div>
</body> </html>
 ng-app directive indicates the start of AngularJS application.
 ng-model directive then creates a model variable named "name" which
can be used with the html page and within the div having ng-app
directive.
 ng-bind then uses the name model to be displayed in the html span tag
whenever user input something in the text box.
V.Mareeswari / AP(Sr) / SITE /VIT20
<html ng-app><head> Basic.html
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/ang
ular.min.js"></script>
</head><body><div><label>Name:</label>
<input type = "text" ng-model = "NameText" placeholder =
"Enter a name here">
<hr /><h1>Hello {{NameText}}!</h1>
</div></body></html>
AngularJS expressions can be written inside double
braces:{{ expression }} or ng-bind="expression"
V.Mareeswari / AP(Sr) / SITE /VIT21
V.Mareeswari / AP(Sr) / SITE /VIT22
Simultaneously what text typed in text box will be displayed after Hello
AngularJS Directives
V.Mareeswari / AP(Sr) / SITE /VIT23
 AngularJS directives are HTML attributes with an ng prefix.
 The ng-init directive initializes AngularJS application variables.
<!DOCTYPE html> <html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m
in.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div></body></html>
V.Mareeswari / AP(Sr) / SITE /VIT24
<!DOCTYPE html> <html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min
.js"></script><body>
<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in
the input field.</p></body></html>
AngularJS Numbers
V.Mareeswari / AP(Sr) / SITE /VIT25
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
<p>Total in dollar: <span ng-bind="quantity * cost">
</span></p></div>
AngularJS Arrays
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p></div>
Angular JS Objects
V.Mareeswari / AP(Sr) / SITE /VIT26
<div ng-app=""
ng-init="firstName='John';lastName='Doe'">
<p>The full name is {{ firstName + " " + lastName }}</p>
</div>
Angular JS Strings
<div ng-app=""
ng-init="person={firstName:'V',lastName:'Mareeswari'}">
<p>The name is {{ person.lastName }}</p></div>
AngularJS Expressions vs. JavaScript
Expressions
V.Mareeswari / AP(Sr) / SITE /VIT27
 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.
ng-repeat
V.Mareeswari / AP(Sr) / SITE /VIT28
The ng-repeat directive repeats an HTML element. The ng-
repeat directive actually clones HTML elements once for each
item in a collection.
<!DOCTYPE html> <html> <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul
ar.min.js"></script><body>
<div ng-app="" ng-init="names=['Janani','Hema','Kumar']">
<p>Looping with ng-repeat:</p> <ul>
<li ng-repeat="x in names">
{{ x }}
</li> </ul></div></body>
V.Mareeswari / AP(Sr) / SITE /VIT29
<!DOCTYPE html> <html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an
gular.min.js"></script><body>
<div ng-app="" ng-init="names=[
{name:'Marees',country:'India'},
{name:'Hema',country:'America'},
{name:'Kumar',country:'Denmark'}]">
<p>Looping with objects:</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}</li>
</ul></div></body></html>
Array of Objects
AngularJS Modules
V.Mareeswari / AP(Sr) / SITE /VIT30
 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.
Step1 : Creating 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.
Step2 :Adding a Controller
 Add a controller to your application, and refer to the controller with the ng-
controller directive:
V.Mareeswari / AP(Sr) / SITE /VIT31
<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script><body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div><script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Mareeswari";
$scope.lastName = "V";
});</script></body></html>
<!doctype html><html><head>
<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js
"></script></head>
<body ng-app = "myapp">
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world ofWeb
Technology!</h2>
</div><script>
angular.module("myapp", []).controller("HelloController",
function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});</script></body></html>
V.Mareeswari / AP(Sr) / SITE /VIT32
Include AngularJS
Point toAngularJS app
View
Controller
V.Mareeswari / AP(Sr) / SITE /VIT33
 Include AngularJS
included the AngularJS JavaScript file in the HTML page so we can use
AngularJS
 Point to AngularJS app
tell what part of the HTML contains the AngularJS app either add it
to html element or body element
 View
ng-controller tells AngularJS what controller to use with this
view. helloTo.titletells AngularJS to write the "model" value named
helloTo.title to the HTML at this location.
 Controller
code registers a controller function named HelloController in the angular
module named myapp.
The $scope parameter passed to the controller function is the model. The
controller function adds a helloTo JavaScript object, and in that object it
adds a title field.
When the page is loaded in the browser,
following things happen:
V.Mareeswari / AP(Sr) / SITE /VIT34
 HTML document is loaded into the browser, and evaluated by the
browser. AngularJS JavaScript file is loaded, the angular global object is
created. Next, JavaScript which registers controller functions is
executed.
 Next AngularJS scans through the HTML to look for AngularJS apps
and views. Once view is located, it connects that view to the
corresponding controller function.
 Next, AngularJS executes the controller functions. It then renders the
views with data from the model populated by the controller. The page is
now ready.
V.Mareeswari / AP(Sr) / SITE /VIT35
 The controller's primary responsibility is to control the data which
gets passed to the view. The scope and the view have two-way
communication.
 The properties of the view can call "functions" on the scope.
Moreover events on the view can call "methods" on the scope.
AngularJS Routing
 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.
 Angularrouting.html & angularrouting2.html
V.Mareeswari / AP(Sr) / SITE /VIT36
Ng-view
 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:
 1. <div ng-view></div>
 2. <ng-view></ng-view>
 3. <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.
V.Mareeswari / AP(Sr) / SITE /VIT37
Single Page Application
V.Mareeswari / AP(Sr) / SITE /VIT38
<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
> </script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-
route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<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>
V.Mareeswari / AP(Sr) / SITE /VIT39
<div ng-view></div><script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$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>
V.Mareeswari / AP(Sr) / SITE /VIT40
V.Mareeswari / AP(Sr) / SITE /VIT41
V.Mareeswari / AP(Sr) / SITE /VIT42
<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang
ular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!Home">Home</a>
<a href="#!Blog">Blog</a>
<a href="#!About">About</a>
<div ng-view></div>
V.Mareeswari / AP(Sr) / SITE /VIT43
<script>var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) { $routeProvider
.when("/", {
templateUrl : "SPA1.html" })
.when("/Home", {
templateUrl : "SPA1_Home.html" })
.when("/Blog", {
templateUrl : "SPA1_Blog.html" })
.when("/About", {
templateUrl : "SPA1_About.html"
});});</script><p>Click on the links to navigate to "Home
page", "Blog page", "About", or back to "main
page"</p></body></html>
AngularJS Events
V.Mareeswari / AP(Sr) / SITE /VIT44
 You can add AngularJS event listeners to your HTML elements by using
one or more of these directives:
 ng-blur, ng-change, ng-focus
 ng-click, ng-dblclick
 ng-copy, ng-cut, ng-paste
 ng-keydown, ng-keypress, ng-keyup
 Mouse Events : Mouse events occur when the cursor moves over an
element, in this order:
1.ng-mouseover 2. ng-mouseenter 3. ng-mousemove 4. ng-mouseleave
 Or when a mouse button is clicked on an element, in this order:
1. ng-mousedown 2. ng-mouseup 3. ng-click
 You can add mouse events on any HTML element.
V.Mareeswari / AP(Sr) / SITE /VIT45
<!DOCTYPE html><html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m
in.js"></script><body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div><script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});</script></body></html>
V.Mareeswari / AP(Sr) / SITE /VIT46
Call function at click
for show / hide
V.Mareeswari / AP(Sr) / SITE /VIT47
<!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">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show="showMe">
<table border=1 bgcolor="yellow"><caption>Details</caption>
<tr><td>Mareeswari</td><td>SITE</td></tr>
<tr><td>Tharun</td><td>SCOPE</td></tr></table>
</div> </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe = false;
$scope.myFunc = function() {
$scope.showMe = !$scope.showMe;
} });</script> <p>Click the button to show/hide the details.</p>
</body></html>
V.Mareeswari / AP(Sr) / SITE /VIT48
Responsive Web Design
V.Mareeswari / AP(Sr) / SITE /VIT49
 Having a responsive website is very important. One must be able
to access it from all devices making it available on all platforms.
Thus, you must give the developers enough time to work on the
website and not rush into creating a website that won’t work across
multiple devices.
Summary
V.Mareeswari / AP(Sr) / SITE /VIT50
References
 https://youtu.be/0kmdjqgO9IY - good for begineers
V.Mareeswari / AP(Sr) / SITE /VIT51
Form Validation
V.Mareeswari / AP(Sr) / SITE /VIT52
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min
.js"></script>
<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>
V.Mareeswari / AP(Sr) / SITE /VIT53
V.Mareeswari / AP(Sr) / SITE /VIT54
<!DOCTYPE html><html><script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body><h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
<p>Username:<br><input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is
required.</span></span></p>
<p>Email:<br><input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span></span></p>
<p><input type="submit“ ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid"></p></form>
<script>var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});</script></body></html>
V.Mareeswari / AP(Sr) / SITE /VIT55
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.
V.Mareeswari / AP(Sr) / SITE /VIT56
AngularJS service
 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
the $location service.
V.Mareeswari / AP(Sr) / SITE /VIT57
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.
 Use the $http service to request data from the server:
V.Mareeswari / AP(Sr) / SITE /VIT58
Methods of $http service
 There are several shortcut methods:
 .get()
 .delete()
 .get()
 .head()
 .jsonp()
 .patch()
 .post()
 .put()
V.Mareeswari / AP(Sr) / SITE /VIT59
Angular JS Forms
 Forms inAngularJS provides data-binding and validation of input
controls.
Input Controls
 Input controls are the HTML input elements:
 input elements(formss.html)
 select elements(ngswitchselect.html)
 button elements
 Radiobutton(ngswitch1)
 textarea elements
 Input controls provides data-binding by using the ng-
model directive.
V.Mareeswari / AP(Sr) / SITE /VIT60
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.
V.Mareeswari / AP(Sr) / SITE /VIT61
Form State and Input State
 AngularJS is constantly updating the state of both the form and the
input fields.
 Input fields have the following states:
 $untouchedThe field has not been touched yet
 $touchedThe field has been touched
 $pristineThe field has not been modified yet
 $dirtyThe field has been modified
 $invalidThe field content is not valid
 $validThe field content is valid
 They are all properties of the input field, and are
either true or false.
V.Mareeswari / AP(Sr) / SITE /VIT62
 Forms have the following states:
 $pristine No fields have been modified yet
 $dirty One or more have been modified
 $invalidThe form content is not valid
 $validThe form content is valid
 $submittedThe form is submitted
 They are all properties of the form, and are
either true or false.
V.Mareeswari / AP(Sr) / SITE /VIT63
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
 Cssclasses.html
V.Mareeswari / AP(Sr) / SITE /VIT64
AngularJS Includes
 With AngularJS, you can include HTML from an external file
using the ng-include directive:
 <div ng-include="'myFile.htm'"></div>
V.Mareeswari / AP(Sr) / SITE /VIT65
Types of web application frameworks
 In the Web 1.0 era, all web apps were mainly built around servers.
Such apps still exist and are highly secure, since their entire app logic is
stored on the backend.
 As web standards began to change, app logic started to shift toward the
client, which helped to ensure a smarter interaction between a user
and a web app. With the logic on its side, a client can instantly react to
user input. What’s more, client-side logic makes apps responsive, so
they are easy to navigate on any device.
 This way, we now have two groups of web application frameworks: one
helps to set up app logic on the server, the other – on the client. To
create a powerful web app, you can use both of them simultaneously.
V.Mareeswari / AP(Sr) / SITE /VIT66
1. Server-side web application framework
 Although frontend has evolved, it’s first and foremost job is to display an interface, and without app logic any
UI/UX is irrelevant.That’s why server-side frameworks are important.
 Among the most popular MVC-based server-side web frameworks are:
 Symfony (PHP)
 Django (Python)
 Express (Node.js/JavaScript)
 Ruby on Rails (Ruby)
 ASP.NET (C#)
 By using either of these server-side web application frameworks, you let it handle HTTP requests, database
control and management, as well as URL mapping.You can also render view data with a server, like in theWeb 1.0
era, but consider using client-side frameworks instead to introduce more user-engaging features and
responsiveness.
2. Client-side web application framework
 In the previous article on web app architecture, we discussed the Single-PageWeb App concept,where one of the
main components of the architecture is a JavaScript client layer.To properly set it up, you need client-side
frameworks, such as:
 Bootstrap
 React.js
 Angular.js
 Backbone
 Semantic-UI.
 While with server-side frameworks your choice mainly depends on the language you feel comfortable to develop
in, here you should mind specific capabilities of different client-side frameworks. Since they vary in the scope of
functionality supported, look for the one that fits the needs of your future web app.
V.Mareeswari / AP(Sr) / SITE /VIT67

More Related Content

What's hot

Web design - Applications and web application definition
Web design - Applications and web application definitionWeb design - Applications and web application definition
Web design - Applications and web application definitionMustafa Kamel Mohammadi
 
Introduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcIntroduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcAbdelmonaim Remani
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo SystemzTraining Institute
 
Mobile for Enterprise
Mobile for EnterpriseMobile for Enterprise
Mobile for EnterpriseNUS-ISS
 
2009 Ontario GNU Linux Fest - Build your business on SugarCRM
2009 Ontario GNU Linux Fest - Build your business on SugarCRM2009 Ontario GNU Linux Fest - Build your business on SugarCRM
2009 Ontario GNU Linux Fest - Build your business on SugarCRMJohn Mertic
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Katy Slemon
 
Front end architecture
Front end architectureFront end architecture
Front end architectureRemus Langu
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet ApplicationsDr. V Vorvoreanu
 
Sprint Portlet MVC Seminar
Sprint Portlet MVC SeminarSprint Portlet MVC Seminar
Sprint Portlet MVC SeminarJohn Lewis
 
Addressing Integration needs in the education industry with the WSO2 Platform
Addressing Integration needs in the education industry with the WSO2 PlatformAddressing Integration needs in the education industry with the WSO2 Platform
Addressing Integration needs in the education industry with the WSO2 PlatformWSO2
 
iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019Nick Samuel
 
Pro Dev Briefing Irvine Wesyppt23
Pro Dev Briefing Irvine Wesyppt23Pro Dev Briefing Irvine Wesyppt23
Pro Dev Briefing Irvine Wesyppt23Wes Yanaga
 
Share2B Technical Overview
Share2B Technical OverviewShare2B Technical Overview
Share2B Technical Overviewmircomueller
 
Microsoft graph api deep dive
Microsoft graph api deep diveMicrosoft graph api deep dive
Microsoft graph api deep diveAlbert-Jan Schot
 

What's hot (20)

Web design - Applications and web application definition
Web design - Applications and web application definitionWeb design - Applications and web application definition
Web design - Applications and web application definition
 
The Future of the CMS
The Future of the CMSThe Future of the CMS
The Future of the CMS
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Introduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring MvcIntroduction To Building Enterprise Web Application With Spring Mvc
Introduction To Building Enterprise Web Application With Spring Mvc
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo Systemz
 
Mobile for Enterprise
Mobile for EnterpriseMobile for Enterprise
Mobile for Enterprise
 
2009 Ontario GNU Linux Fest - Build your business on SugarCRM
2009 Ontario GNU Linux Fest - Build your business on SugarCRM2009 Ontario GNU Linux Fest - Build your business on SugarCRM
2009 Ontario GNU Linux Fest - Build your business on SugarCRM
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...
 
Mvc Architecture in a web based application
Mvc Architecture in a web based applicationMvc Architecture in a web based application
Mvc Architecture in a web based application
 
Wpf 1
Wpf 1Wpf 1
Wpf 1
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Rich Internet Applications
Rich Internet ApplicationsRich Internet Applications
Rich Internet Applications
 
Sprint Portlet MVC Seminar
Sprint Portlet MVC SeminarSprint Portlet MVC Seminar
Sprint Portlet MVC Seminar
 
Addressing Integration needs in the education industry with the WSO2 Platform
Addressing Integration needs in the education industry with the WSO2 PlatformAddressing Integration needs in the education industry with the WSO2 Platform
Addressing Integration needs in the education industry with the WSO2 Platform
 
iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019iProspect - Tech SEO - Task - 17/12/2019
iProspect - Tech SEO - Task - 17/12/2019
 
Pro Dev Briefing Irvine Wesyppt23
Pro Dev Briefing Irvine Wesyppt23Pro Dev Briefing Irvine Wesyppt23
Pro Dev Briefing Irvine Wesyppt23
 
Share2B Technical Overview
Share2B Technical OverviewShare2B Technical Overview
Share2B Technical Overview
 
Design patterns
Design patternsDesign patterns
Design patterns
 
Tasvir_UI Developer
Tasvir_UI DeveloperTasvir_UI Developer
Tasvir_UI Developer
 
Microsoft graph api deep dive
Microsoft graph api deep diveMicrosoft graph api deep dive
Microsoft graph api deep dive
 

Similar to Angular JS Basics

Web Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureWeb Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureVersatile Mobitech
 
Components of a Generic Web Application Architecture
Components of  a Generic Web Application ArchitectureComponents of  a Generic Web Application Architecture
Components of a Generic Web Application ArchitectureMadonnaLamin1
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...RapidValue
 
Web application framework
Web application frameworkWeb application framework
Web application frameworkPankaj Chand
 
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfAsp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfIntegrated IT Solutions
 
An overview of microsoft mvc dot net
An overview of microsoft mvc dot netAn overview of microsoft mvc dot net
An overview of microsoft mvc dot netneha sharma
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeIRJET Journal
 
Resume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_expResume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_expSandip Mohod
 
Actively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperActively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperKarthik Reddy
 
Actively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperActively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperKarthik Reddy
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satyaSatya Johnny
 

Similar to Angular JS Basics (20)

Web Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application ArchitectureWeb Application Development-Ultimate Guide To Web Application Architecture
Web Application Development-Ultimate Guide To Web Application Architecture
 
Components of a Generic Web Application Architecture
Components of  a Generic Web Application ArchitectureComponents of  a Generic Web Application Architecture
Components of a Generic Web Application Architecture
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
Choosing the Right HTML5 Framework to Build your Mobile Web Application White...
 
Karthik .net resume
Karthik  .net resumeKarthik  .net resume
Karthik .net resume
 
Web application framework
Web application frameworkWeb application framework
Web application framework
 
Top 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptxTop 5 backend frameworks for web development in.pptx
Top 5 backend frameworks for web development in.pptx
 
Asp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdfAsp.net Vs Vue.js.pdf
Asp.net Vs Vue.js.pdf
 
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdfAsp Net Vs Vue JS Which One You Should Choose for Development.pdf
Asp Net Vs Vue JS Which One You Should Choose for Development.pdf
 
An overview of microsoft mvc dot net
An overview of microsoft mvc dot netAn overview of microsoft mvc dot net
An overview of microsoft mvc dot net
 
Siva_DotNet
Siva_DotNetSiva_DotNet
Siva_DotNet
 
Tech Lead-Sachidanand Sharma
Tech Lead-Sachidanand SharmaTech Lead-Sachidanand Sharma
Tech Lead-Sachidanand Sharma
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future Scope
 
Resume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_expResume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_exp
 
Actively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperActively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net Developer
 
Actively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net DeveloperActively looking for an opportunity to work as a challenging Dot Net Developer
Actively looking for an opportunity to work as a challenging Dot Net Developer
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Struts notes
Struts notesStruts notes
Struts notes
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
 

Recently uploaded

办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Sonam Pathan
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 

Recently uploaded (17)

办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170Call Girls Near The Suryaa Hotel New Delhi 9873777170
Call Girls Near The Suryaa Hotel New Delhi 9873777170
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 

Angular JS Basics

  • 1. Mrs.V.Mareeswari Assistant Professsor(Sr) School of InformationTechnology and Engineering VIT,Vellore Cabin No:SJT 210-A30 Module 3
  • 2. Web Applications  Web applications-  Web Application Frameworks  MVC framework  Angular JS  Single Page Applications  ResponsiveWeb Design V.Mareeswari / AP(Sr) / SITE /VIT2
  • 3. Web Applications  A web application is a Client-Server computer program that utilizes web browsers and web technology to perform tasks over the Internet. V.Mareeswari / AP(Sr) / SITE /VIT3
  • 4. How web application works?  User triggers a request to the web server over the Internet, either through a web browser or the application’s user interface.  Web server forwards this request to the appropriate web application server.  Web application server performs the requested task – such as querying the database or processing the data – then generates the results of the requested data.  Web application server sends results to the web server with the requested information or processed data.  Web server responds back to the client with the requested information that then appears on the user’s display V.Mareeswari / AP(Sr) / SITE /VIT4
  • 5. EXAMPLE OF A WEB APPLICATION Web applications include online forms, online retail sales, online auctions, wikis, instant messaging services, shopping carts, word processors, spreadsheets, video and photo editing, file conversion, file scanning, and email programs such as Gmail, Yahoo and AOL. Popular applications include Google Apps and Microsoft 365. Google Apps for Work has Gmail, Google Docs, Google Sheets, Google Slides, online storage and more. Other functionalities include online sharing of documents and calendars. This lets all team members access the same version of a document simultaneously. V.Mareeswari / AP(Sr) / SITE /VIT5
  • 6. Benefits of Web Application  Web applications run on multiple platforms regardless of OS or device as long as the browser is compatible.  All users access the same version, eliminating any compatibility issues.  They are not installed on the hard drive, thus eliminating space limitations.  They reduce software piracy in subscription-based web applications (i.e. SaaS).  They reduce costs for both the business and end user as there is less support and maintenance required by the business and lower requirements for the end user’s computer V.Mareeswari / AP(Sr) / SITE /VIT6
  • 7. Web Application Frameworks  A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs.  Web frameworks provide a standard way to build and deploy web applications. Web frameworks aim to automate the overhead associated with common activities performed in web development.  For example, many web frameworks provide libraries for database access, templating frameworks, and session management, and they often promote code reuse. Although they often target development of dynamic web sites, they are also applicable to static websites. V.Mareeswari / AP(Sr) / SITE /VIT7
  • 8. Types of framework architectures  Model–view–controller (MVC) Many frameworks follow the MVC architectural pattern to separate the data model with business rules from the user interface. This is generally considered a good practice as it modularizes code, promotes code reuse, and allows multiple interfaces to be applied. In web applications, this permits different views to be presented, such as web pages for humans, and web service interfaces for remote applications.  Push-based vs. pull-based  Most MVC frameworks follow a push-based architecture also called "action-based". These frameworks use actions that do the required processing, and then "push" the data to the view layer to render the results. Django, Ruby on Rails, Symfony, Spring MVC, Stripes, Diamond, CodeIgniter are good examples of this architecture.  An alternative to this is pull-based architecture, sometimes also called "component-based". These frameworks start with the view layer, which can then "pull" results from multiple controllers as needed. In this architecture, multiple controllers can be involved with a single view. Lift, Tapestry, JBoss Seam, JavaServer Faces, (µ)Micro, andWicket are examples of pull-based architectures.  Play, Struts, RIFE, and ZK have support for both push- and pull-based application controller calls.  Three-tier organization  In three-tier organization, applications are structured around three physical tiers: client, application, and database. The database is normally an RDBMS. The application contains the business logic, running on a server and communicates with the client using HTTP. The client on web applications is a web browser that runs HTML generated by the application layer. The term should not be confused with MVC, where, unlike in three-tier architecture, it is considered a good practice to keep business logic away from the controller, the "middle layer". V.Mareeswari / AP(Sr) / SITE /VIT8
  • 9. Model-View-Controller (MVC)  The Model-View-Controller (MVC) is an architectural pattern that separates an application into three main logical components: the model, the view, and the controller.  MVC is one of the most frequently used industry-standard web development framework to create scalable and extensible projects. V.Mareeswari / AP(Sr) / SITE /VIT9
  • 10.  Model 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. For example, a Customer object will retrieve the customer information from the database, manipulate it and update it data back to the database or use it to render data.  View The View component is used for all the UI logic of the application. For example, the Customer view will include all the UI components such as text boxes, dropdowns, etc. that the final user interacts with.  Controller Controllers act as an interface between Model and View components to process all the business logic and incoming requests, manipulate data using the Model component and interact with the Views to render the final output. For example, the Customer controller will handle all the interactions and inputs from the Customer View and update the database using the Customer Model. The same controller will be used to view the Customer data.V.Mareeswari / AP(Sr) / SITE /VIT10
  • 11. V.Mareeswari / AP(Sr) / SITE /VIT11
  • 12. Top Web Development Frameworks -2018 S.No Name Description 1 AngularJS  JavaScript framework ,develop your front-end based apps  Google,Angular 4 , MVC architectural pattern  Netflix, Freelancer.com,GoodFIlms 2 Ruby on Rails  server-side web development framework is built using Ruby  Basecamp,Ask.fm, GitHub, 500px 3 Yii  Yii is an open-source web application development framework that is built in PHP5. Tass, Craftcms, HumHub 4 Meteor JS  written in Node.js ,creating simple websites for personal use  developing for iOS, web,Android or desktop 5 Express JS  developed in Node.js,develop web applications andAPIs as fast and easy  Express is the best choice for those people whose goal it is to develop simple web services andAPIs rather than web portals or high-loaded calculating backends.V.Mareeswari / AP(Sr) / SITE /VIT12
  • 13. 6 Zend  based on PHP  building more secure, modern, reliable, web services and applications. 7 Django  written in Python  ModelViewTemplate (MVC) architecture 8 Laravel  PHP development frameworks  develop the web and mobile applications for small websites and big businesses  MVC support 9 React.js  JavaScript library maintained by Facebook  near future called, React Fibre 10 Node.js  Node.js is not just a framework, it is a complete environment.  lightweight and efficient against real-time applications with a large amount of data running on distributed devices V.Mareeswari / AP(Sr) / SITE /VIT13
  • 14. 11 Symfony  PHP framework  largest open source platforms such as PHPBB, Piwik, and Drupal. 12 ASP.NET  open-source and has close to 15% market share. 13 CakePHP  written in PHP  model-controller-view and association data mapping 14 Vue.js  open-source JavaScript library for developing user interfaces  released in 2013 and now it has 59600 stars on Github  Angular itself has 56300 stars on Github V.Mareeswari / AP(Sr) / SITE /VIT14
  • 15. Angular JS  AngularJS is an open source Model-View-Controller framework which is similar to the JavaScript framework.  It can be added to an HTML page with a <script> tag.  AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.  AngularJS is open source, completely free, and used by thousands of developers around the world.  It is used in Single Page Application (SPA) projects.  It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google.  AngularJs 1.7.2 is the stable version in June 2018, but AngularJs 2.0 is the latest version which is actually a beta version.Angular 5.  It is licensed under the Apache license version 2.0.V.Mareeswari / AP(Sr) / SITE /VIT15
  • 16. AngularJS Features V.Mareeswari / AP(Sr) / SITE /VIT16  Angular has the following key features which makes it one of the powerful frameworks in the market.  MVC – The framework is built on the famous concept of MVC (Model- View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.  Data Model Binding – You don't need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.  Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.  Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called "Karma" which helps in designing unit tests forAngularJS applications.
  • 17. Disadvantages of AngularJS V.Mareeswari / AP(Sr) / SITE /VIT17 Though AngularJS comes with lots of plus points but same time we should consider the following points −  Not Secure − Being JavaScript only framework, application written in AngularJS are not safe. Server side authentication and authorization is must to keep an application secure.  Not degradable − If your application user disables JavaScript then user will just see the basic page and nothing more.
  • 18. The AngularJS Components V.Mareeswari / AP(Sr) / SITE /VIT18  The AngularJS framework can be divided into following three major parts −  ng-app − This directive defines and links an AngularJS application to HTML.  ng-model − This directive binds the values of AngularJS application data to HTML input controls.  ng-bind − This directive binds the AngularJS Application data to HTML tags. Download for offline web development:  https://code.angularjs.org/1.7.4/angular.min.js
  • 19. V.Mareeswari / AP(Sr) / SITE /VIT19 <html><head> Basic 3.html <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js "></script> </head> <body><h1>Sample Application</h1><div ng-app = ""> <p>Enter your Name: <input type = "text" ng-model = "name"></p> <p>Hello <span ng-bind = "name"></span>!</p></div> </body> </html>  ng-app directive indicates the start of AngularJS application.  ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.  ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.
  • 20. V.Mareeswari / AP(Sr) / SITE /VIT20
  • 21. <html ng-app><head> Basic.html <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/ang ular.min.js"></script> </head><body><div><label>Name:</label> <input type = "text" ng-model = "NameText" placeholder = "Enter a name here"> <hr /><h1>Hello {{NameText}}!</h1> </div></body></html> AngularJS expressions can be written inside double braces:{{ expression }} or ng-bind="expression" V.Mareeswari / AP(Sr) / SITE /VIT21
  • 22. V.Mareeswari / AP(Sr) / SITE /VIT22 Simultaneously what text typed in text box will be displayed after Hello
  • 23. AngularJS Directives V.Mareeswari / AP(Sr) / SITE /VIT23  AngularJS directives are HTML attributes with an ng prefix.  The ng-init directive initializes AngularJS application variables. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m in.js"></script> <body> <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div></body></html>
  • 24. V.Mareeswari / AP(Sr) / SITE /VIT24 <!DOCTYPE html> <html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min .js"></script><body> <p>Change the value of the input field:</p> <div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> <p>AngularJS resolves the expression and returns the result.</p> <p>The background color of the input box will be whatever you write in the input field.</p></body></html>
  • 25. AngularJS Numbers V.Mareeswari / AP(Sr) / SITE /VIT25 <div ng-app="" ng-init="quantity=1;cost=5"> <p>Total in dollar: {{ quantity * cost }}</p> <p>Total in dollar: <span ng-bind="quantity * cost"> </span></p></div> AngularJS Arrays <div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>The third result is {{ points[2] }}</p></div>
  • 26. Angular JS Objects V.Mareeswari / AP(Sr) / SITE /VIT26 <div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>The full name is {{ firstName + " " + lastName }}</p> </div> Angular JS Strings <div ng-app="" ng-init="person={firstName:'V',lastName:'Mareeswari'}"> <p>The name is {{ person.lastName }}</p></div>
  • 27. AngularJS Expressions vs. JavaScript Expressions V.Mareeswari / AP(Sr) / SITE /VIT27  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.
  • 28. ng-repeat V.Mareeswari / AP(Sr) / SITE /VIT28 The ng-repeat directive repeats an HTML element. The ng- repeat directive actually clones HTML elements once for each item in a collection. <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul ar.min.js"></script><body> <div ng-app="" ng-init="names=['Janani','Hema','Kumar']"> <p>Looping with ng-repeat:</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div></body>
  • 29. V.Mareeswari / AP(Sr) / SITE /VIT29 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/an gular.min.js"></script><body> <div ng-app="" ng-init="names=[ {name:'Marees',country:'India'}, {name:'Hema',country:'America'}, {name:'Kumar',country:'Denmark'}]"> <p>Looping with objects:</p> <ul> <li ng-repeat="x in names"> {{ x.name + ', ' + x.country }}</li> </ul></div></body></html> Array of Objects
  • 30. AngularJS Modules V.Mareeswari / AP(Sr) / SITE /VIT30  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. Step1 : Creating 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. Step2 :Adding a Controller  Add a controller to your application, and refer to the controller with the ng- controller directive:
  • 31. V.Mareeswari / AP(Sr) / SITE /VIT31 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular.min.js"></script><body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div><script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Mareeswari"; $scope.lastName = "V"; });</script></body></html>
  • 32. <!doctype html><html><head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js "></script></head> <body ng-app = "myapp"> <div ng-controller = "HelloController" > <h2>Welcome {{helloTo.title}} to the world ofWeb Technology!</h2> </div><script> angular.module("myapp", []).controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; });</script></body></html> V.Mareeswari / AP(Sr) / SITE /VIT32 Include AngularJS Point toAngularJS app View Controller
  • 33. V.Mareeswari / AP(Sr) / SITE /VIT33  Include AngularJS included the AngularJS JavaScript file in the HTML page so we can use AngularJS  Point to AngularJS app tell what part of the HTML contains the AngularJS app either add it to html element or body element  View ng-controller tells AngularJS what controller to use with this view. helloTo.titletells AngularJS to write the "model" value named helloTo.title to the HTML at this location.  Controller code registers a controller function named HelloController in the angular module named myapp. The $scope parameter passed to the controller function is the model. The controller function adds a helloTo JavaScript object, and in that object it adds a title field.
  • 34. When the page is loaded in the browser, following things happen: V.Mareeswari / AP(Sr) / SITE /VIT34  HTML document is loaded into the browser, and evaluated by the browser. AngularJS JavaScript file is loaded, the angular global object is created. Next, JavaScript which registers controller functions is executed.  Next AngularJS scans through the HTML to look for AngularJS apps and views. Once view is located, it connects that view to the corresponding controller function.  Next, AngularJS executes the controller functions. It then renders the views with data from the model populated by the controller. The page is now ready.
  • 35. V.Mareeswari / AP(Sr) / SITE /VIT35  The controller's primary responsibility is to control the data which gets passed to the view. The scope and the view have two-way communication.  The properties of the view can call "functions" on the scope. Moreover events on the view can call "methods" on the scope.
  • 36. AngularJS Routing  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.  Angularrouting.html & angularrouting2.html V.Mareeswari / AP(Sr) / SITE /VIT36
  • 37. Ng-view  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:  1. <div ng-view></div>  2. <ng-view></ng-view>  3. <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. V.Mareeswari / AP(Sr) / SITE /VIT37
  • 38. Single Page Application V.Mareeswari / AP(Sr) / SITE /VIT38 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > </script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular- route.js"></script> <body ng-app="myApp"> <p><a href="#/!">Main</a></p> <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>
  • 39. V.Mareeswari / AP(Sr) / SITE /VIT39 <div ng-view></div><script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $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>
  • 40. V.Mareeswari / AP(Sr) / SITE /VIT40
  • 41. V.Mareeswari / AP(Sr) / SITE /VIT41
  • 42. V.Mareeswari / AP(Sr) / SITE /VIT42 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/ang ular-route.js"></script> <body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!Home">Home</a> <a href="#!Blog">Blog</a> <a href="#!About">About</a> <div ng-view></div>
  • 43. V.Mareeswari / AP(Sr) / SITE /VIT43 <script>var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "SPA1.html" }) .when("/Home", { templateUrl : "SPA1_Home.html" }) .when("/Blog", { templateUrl : "SPA1_Blog.html" }) .when("/About", { templateUrl : "SPA1_About.html" });});</script><p>Click on the links to navigate to "Home page", "Blog page", "About", or back to "main page"</p></body></html>
  • 44. AngularJS Events V.Mareeswari / AP(Sr) / SITE /VIT44  You can add AngularJS event listeners to your HTML elements by using one or more of these directives:  ng-blur, ng-change, ng-focus  ng-click, ng-dblclick  ng-copy, ng-cut, ng-paste  ng-keydown, ng-keypress, ng-keyup  Mouse Events : Mouse events occur when the cursor moves over an element, in this order: 1.ng-mouseover 2. ng-mouseenter 3. ng-mousemove 4. ng-mouseleave  Or when a mouse button is clicked on an element, in this order: 1. ng-mousedown 2. ng-mouseup 3. ng-click  You can add mouse events on any HTML element.
  • 45. V.Mareeswari / AP(Sr) / SITE /VIT45 <!DOCTYPE html><html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.m in.js"></script><body> <div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Click Me!</button> <p>{{ count }}</p> </div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; });</script></body></html>
  • 46. V.Mareeswari / AP(Sr) / SITE /VIT46
  • 47. Call function at click for show / hide V.Mareeswari / AP(Sr) / SITE /VIT47 <!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"> <button ng-click="myFunc()">Click Me!</button> <div ng-show="showMe"> <table border=1 bgcolor="yellow"><caption>Details</caption> <tr><td>Mareeswari</td><td>SITE</td></tr> <tr><td>Tharun</td><td>SCOPE</td></tr></table> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.showMe = false; $scope.myFunc = function() { $scope.showMe = !$scope.showMe; } });</script> <p>Click the button to show/hide the details.</p> </body></html>
  • 48. V.Mareeswari / AP(Sr) / SITE /VIT48
  • 49. Responsive Web Design V.Mareeswari / AP(Sr) / SITE /VIT49  Having a responsive website is very important. One must be able to access it from all devices making it available on all platforms. Thus, you must give the developers enough time to work on the website and not rush into creating a website that won’t work across multiple devices.
  • 51. References  https://youtu.be/0kmdjqgO9IY - good for begineers V.Mareeswari / AP(Sr) / SITE /VIT51
  • 52. Form Validation V.Mareeswari / AP(Sr) / SITE /VIT52 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min .js"></script> <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>
  • 53. V.Mareeswari / AP(Sr) / SITE /VIT53
  • 54. V.Mareeswari / AP(Sr) / SITE /VIT54 <!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body><h2>Validation Example</h2> <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <p>Username:<br><input type="text" name="user" ng-model="user" required> <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">Username is required.</span></span></p> <p>Email:<br><input type="email" name="email" ng-model="email" required> <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">Email is required.</span> <span ng-show="myForm.email.$error.email">Invalid email address.</span></span></p> <p><input type="submit“ ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"></p></form> <script>var app = angular.module('myApp', []); app.controller('validateCtrl', function($scope) { $scope.user = 'John Doe'; $scope.email = 'john.doe@gmail.com'; });</script></body></html>
  • 55. V.Mareeswari / AP(Sr) / SITE /VIT55
  • 56. 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. V.Mareeswari / AP(Sr) / SITE /VIT56
  • 57. AngularJS service  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 the $location service. V.Mareeswari / AP(Sr) / SITE /VIT57
  • 58. 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.  Use the $http service to request data from the server: V.Mareeswari / AP(Sr) / SITE /VIT58
  • 59. Methods of $http service  There are several shortcut methods:  .get()  .delete()  .get()  .head()  .jsonp()  .patch()  .post()  .put() V.Mareeswari / AP(Sr) / SITE /VIT59
  • 60. Angular JS Forms  Forms inAngularJS provides data-binding and validation of input controls. Input Controls  Input controls are the HTML input elements:  input elements(formss.html)  select elements(ngswitchselect.html)  button elements  Radiobutton(ngswitch1)  textarea elements  Input controls provides data-binding by using the ng- model directive. V.Mareeswari / AP(Sr) / SITE /VIT60
  • 61. 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. V.Mareeswari / AP(Sr) / SITE /VIT61
  • 62. Form State and Input State  AngularJS is constantly updating the state of both the form and the input fields.  Input fields have the following states:  $untouchedThe field has not been touched yet  $touchedThe field has been touched  $pristineThe field has not been modified yet  $dirtyThe field has been modified  $invalidThe field content is not valid  $validThe field content is valid  They are all properties of the input field, and are either true or false. V.Mareeswari / AP(Sr) / SITE /VIT62
  • 63.  Forms have the following states:  $pristine No fields have been modified yet  $dirty One or more have been modified  $invalidThe form content is not valid  $validThe form content is valid  $submittedThe form is submitted  They are all properties of the form, and are either true or false. V.Mareeswari / AP(Sr) / SITE /VIT63
  • 64. 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  Cssclasses.html V.Mareeswari / AP(Sr) / SITE /VIT64
  • 65. AngularJS Includes  With AngularJS, you can include HTML from an external file using the ng-include directive:  <div ng-include="'myFile.htm'"></div> V.Mareeswari / AP(Sr) / SITE /VIT65
  • 66. Types of web application frameworks  In the Web 1.0 era, all web apps were mainly built around servers. Such apps still exist and are highly secure, since their entire app logic is stored on the backend.  As web standards began to change, app logic started to shift toward the client, which helped to ensure a smarter interaction between a user and a web app. With the logic on its side, a client can instantly react to user input. What’s more, client-side logic makes apps responsive, so they are easy to navigate on any device.  This way, we now have two groups of web application frameworks: one helps to set up app logic on the server, the other – on the client. To create a powerful web app, you can use both of them simultaneously. V.Mareeswari / AP(Sr) / SITE /VIT66
  • 67. 1. Server-side web application framework  Although frontend has evolved, it’s first and foremost job is to display an interface, and without app logic any UI/UX is irrelevant.That’s why server-side frameworks are important.  Among the most popular MVC-based server-side web frameworks are:  Symfony (PHP)  Django (Python)  Express (Node.js/JavaScript)  Ruby on Rails (Ruby)  ASP.NET (C#)  By using either of these server-side web application frameworks, you let it handle HTTP requests, database control and management, as well as URL mapping.You can also render view data with a server, like in theWeb 1.0 era, but consider using client-side frameworks instead to introduce more user-engaging features and responsiveness. 2. Client-side web application framework  In the previous article on web app architecture, we discussed the Single-PageWeb App concept,where one of the main components of the architecture is a JavaScript client layer.To properly set it up, you need client-side frameworks, such as:  Bootstrap  React.js  Angular.js  Backbone  Semantic-UI.  While with server-side frameworks your choice mainly depends on the language you feel comfortable to develop in, here you should mind specific capabilities of different client-side frameworks. Since they vary in the scope of functionality supported, look for the one that fits the needs of your future web app. V.Mareeswari / AP(Sr) / SITE /VIT67