Angular JS Basics

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.

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

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.

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

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.

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

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.

 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

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

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

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

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

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

Simultaneously what text typed in text box will be displayed after Hello

AngularJS Directives
 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>

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

<!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
 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:

<!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";
Include AngularJS
Point toAngularJS app
View
Controller

 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:
 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.

 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

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.

Single Page Application
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>

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

ular.min.js"></script>
<script
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>

AngularJS Events
 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.

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

Call function at click
for show / hide
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>

Responsive Web Design
 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

References
 https://youtu.be/0kmdjqgO9IY - good for begineers

Form Validation
<!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>

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

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.

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.

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:

Methods of $http service
 There are several shortcut methods:
 .get()
 .delete()
 .get()
 .head()
 .jsonp()
 .patch()
 .post()
 .put()

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.

Form Validation
 AngularJS offers client-side form validation.
 AngularJS monitors the state of the form and input
fields (input, textarea, select), and lets you notify
the user about the current state.
 AngularJS also holds information about whether
they have been touched, or modified, or not.
 You can use standard HTML5 attributes to validate
input, or you can make your own validation
functions.

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

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

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

AngularJS Includes
 With AngularJS, you can include HTML from an external file
using the ng-include directive:
 <div ng-include="'myFile.htm'"></div>

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.

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.

Angular JS Basics

Recommended

More Related Content

What's hot (19)

Similar to Angular JS Basics (20)

Recently uploaded (20)

Angular JS Basics