U n it 4: An g u la r .

JS
What is AngularJS
Angular JS is an open source JavaScript framework that is used to build web applications.
It can be freely used, changed and shared by anyone.

Angular Js is developed by Google.

It is an excellent framework for building single phase applications and line of business
applications.

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.

Advantage of AngularJS
There are a lot of JavaScript frameworks for building web applications. So, it is a genuine
question, why to use Angular JS.
o Dependency Injection: Dependency Injection specifies a design pattern in which
components are given their dependencies instead of hard coding them within the
component.
o Two way data binding: AngularJS creates a two way data-binding between the
select element and the orderProp model. orderProp is then used as the input for
the orderBy filter.
o Testing: Angular JS is designed in a way that we can test right from the start. So,
it is very easy to test any of its components through unit testing and end-to-end
testing.
o Model View Controller: In Angular JS, it is very easy to develop application in a
clean MVC way. You just have to split your application code into MVC
components i.e. Model, View and the Controller.
o Directives, filters, modules, routes etc.
1. Open-Source Framework – Since AngularJS is an open-source framework, you can
enjoy and experience minimal issues or loopholes. This is one of the most essential
benefits of AngularJS.

2. Provides Two-Way Binding - Be it the previous version or Angular latest version, the
framework always helps to synchronize the data and presentation layer. Because of this
feature, you'll never need to write additional JavaScript code just to keep the data in your
HTML code and your data layer coordinated. AngularJS framework automatically does
this for you. You only require defining which control relies on which component of your
Model.

3. Material Design Library – Angular JS has a remarkable Angular material library with
several attractive designs. These material designs assist software developers in
developing responsive and valuable user interfaces.

4. Lightweight Web Apps - The earlier versions of the AngularJS framework had a
significant size problem that limits fast loading. Angular's latest versions now consist of
enhanced functionalities; this helps to make a lighter web app in comparison to other
models. Also, to make a web app more efficient, you can opt for some of the best Angular
frameworks.
5. Different Testing Techniques – AngularJS development supports both unit testing and
integration testing.

Key Features of Angular JS

1. AngularJS is an open-source, free front-end framework utilized by
several web and mobile app development service providers
worldwide.

2. AngularJS framework comes under Apache License version 2.0.

3. AngularJS offers software developers different choices to write client-

side apps utilizing JavaScript in a clear MVC (Model View Controller)
approach.

4. Angular JS framework is a robust JavaScript-based development

framework to develop RICH Internet Application (RIA).

5. The applications you write in the AngularJS framework come with

cross-browser compliance. AngularJS automatically manages all the
JavaScript code ideal for each browse
● Sco p e – T h e y a r e th e o b je cts th a t r e fe r t o th e M o d e l.
Sim p ly sta te d , t h e y a r e ce m e n t b e tw e e n Vie w a n d
C o n tr o lle r .

● D a ta - B in d in g – T h e p r o ce ss is a u to m a tic d a ta
sy n ch r o n iz a tio n b e tw e e n M o d e l a n d Vie w e le m e n ts.

● Se r v ice s – An g u la r JS fr a m e w o r k co n sists o f d iffe r e n t

in b u ilt se r v ice s.

● C o n tr o lle r – T h e y a r e th e Ja v a Scr ip t fu n ctio n a litie s t h a t

co n fin e a sp e cific sco p e .

● D ir e ct iv e s – T h e y a r e m a r k e r s o n D O M co m p o n e n ts.
So ftw a r e d e v e lo p e r s u se th e m t o p r o d u ce cu sto m H T M L
ta g s. An g u la r JS fr a m e w o r k co n sists o f in b u ilt co m m a n d s.
 ● F ilte r s – T h e se h e lp to ch o o se su b se ts fo r d iffe r e n t ite m s
fr o m a n a r r a y a n d r e tu r n a fr e sh n e w a r r a y .

● R o u tin g – It is a n An g u la r JS co n ce p t fo r sw itch in g v ie w s.

● T e m p la t e s – All th e d a t a fr o m th e M o d e l a n d C o n tr o lle r
a r e sto r e d h e r e , a lso k n o w n a s t h e r e n d e r e d Vie w .

● D e e p L in k in g – It e n a b le s d e v e lo p e r s t o e n co d e th e
a p p lica t io n sta te in th e U R L . T h is is n e ce ssa r y fo r
b o o k m a r k in g . Also , y o u ca n q u ick ly r e sto r e th e
a p p lica t io n in t h e sa m e co n d it io n w ith t h e h e lp o f a U R L .

● D e p e n d e n cy In je ctio n – An g u la r JS fr a m e w o r k co n sists o f
a n in b u ilt d e p e n d e n cy in je ctio n w h ich h e lp s d e v e lo p e r s
w ith se a m le ss so ftw a r e d e v e lo p m e n t.

● M VVM – T a k e n o te : An g u la r JS d o e s n o t im p le m e n t a n d
in te g r a t e M VC in its co n v e n tio n a l fo r m . In ste a d , it u se s
a n a p p r o a ch clo se r to M VVM (M o d e l- Vie w - Vie w M o d e l).
H u m o r o u sly it is a lso k n o w n a s M o d e l Vie w W h a te v e r .

L im it a t io n s o f An gu la r JS
1. St eep Learning Curve - AngularJS framework has a high learning curve. A
software developer well-versed in JavaScript concepts would find it
challenging to grasp AngularJS concepts speedily. At a point, they would
discover ReactJS to be much more effortless to deploy. However, you need not
worry. If you want to opt for AngularJS, our software developers will make
your work much more manageable.

2. Complicat ed Soft ware - Software development considers Angular JS

development complex and challenging. Since it is difficult to manage and
maintain due to its several components, it also consists of different third-party
libraries and syntaxes.

3. T ime-Consuming Syst ems - T here are only minor differences in the

working methodologies of Angular and AngularJS frameworks. So, migrating
the legacy systems built on Angular to AngularJS is a real-time-consuming
process that maximizes the loading effect directly on the processor .

What Can You Do with Angular JS?

As you might have got a little bit of an idea about the proven elegance of
AngularJS in the world of front-end development, let's explore some of the
best reasons that give Angular JS development an upper hand over other
options:

AngularJ S MVC Architecture

MVC stands for Model View Controller. It is a software design pattern for developing
web applications. It is very popular because it isolates the application logic from the user
interface layer and supports separation of concerns.
The MVC pattern is made up of the following three parts:

1. Model: It is responsible for managing application data. It responds to the requests

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

MVC is popular because it isolates the application logic from the user
interface layer and supports separation of concerns. The controller receives
all requests for the application and then works with the model to prepare any
data needed by the view. The view then uses the data prepared by the
controller to generate a final presentable response.

ã z§̉ J ì0? �└�( ã ¶Äìç ã ä Xã ö�? Xö§ê

This chapter describes how to set up AngularJS library to be used in web
application development. It also briefly describes the directory structure
and its contents.

When you open the link https://angularjs.org/, you will see there are two
options to download AngularJS library −

● View on GitHub − By clicking on this button, you are diverted to

GitHub and get all the latest scripts.
● Download AngularJS 1 − By clicking on this button, a screen you get
to see a dialog box shown as –
●
This screen gives various options of using Angular JS as follows −
● Downloading and hosting files locally
o There are two different options : Legacy and Latest. The names
themselves are self-descriptive. The Legacy has version less
than 1.2.x and the Latest come with version 1.3.x.
o We can also go with the minimized, uncompressed, or zipped
version.
● CDN access − You also have access to a CDN. The CDN gives you
access to regional data centers. In this case, the Google host. The
CDN transfers the responsibility of hosting files from your own
servers to a series of external ones. It also offers an advantage that
if the visitor of your web page has already downloaded a copy of
AngularJS from the same CDN, there is no need to re-download it.
Parts Of AngularJs:
An AngularJS application consists of following three important parts –

AngularJS extends HTML with ng-directives.

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

Creating AngularJS Application

Step 1: Load framework

Being a pure JavaScript framework, it can be added using <Script> tag.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.
min.js"></script>
Step 2: Define AngularJS application using ng-app directive
<div ng-app = "">
...
</div>

Step 3: Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4: Bind the value of above model defined using ng-bind

directive
<p>Hello <span ng-bind = "name"></span>!</p>
AngularJ S Data Binding
Data binding is a very useful and powerful feature used in software development
technologies. It acts as a bridge between the view and business logic of the application.
AngularJS follows Two-Way data binding model.

One-Way Data Binding

The one-way data binding is an approach where a value is taken from the data model
and inserted into an HTML element. There is no way to update model from view. It is
used in classical template systems. These systems bind data in only one direction.

Two -Way Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the
model and view components.
Data binding lets you treat the model as the single-source-of-truth in your application.
The view is a projection of the model at all times. If the model is changed, the view
reflects the change and vice versa.
First Example:
<html>
<head>
<title>AngularJS First Application</title>
</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>

<script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
 </body>
</html>

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the <div> element is the "owner"
of an AngularJS application.

The ng-model directive binds the value of the input field to the application
variable name.

The ng-bind directive binds the content of the <p> element to the
application variable name.

How AngularJS Integrates with HTML

● The ng-app directive indicates the start of AngularJS application.
● The ng-model directive creates a model variable named name,
which can be used with the HTML page and within the div having
ng-app directive.
● The ng-bind then uses the name model to be displayed in the HTML
<span> tag whenever user enters input in the text box.
● Closing</div> tag indicates the end of AngularJS application.

ã z§̉ J ì0? �┘�&ÄìXNöĶXî

AngularJS directives are used to extend HTML. They are special attributes
starting with ng-prefix. AngularJS has a set of built-in directives which
offers functionality to your applications.Let us discuss the following
directives −

● ng-app − This directive starts an AngularJS Application.

● ng-init − This directive initializes application data.
● ng-model − This directive defines the model that is variable to be
used in AngularJS.
 ● ng-repeat − This directive repeats HTML elements for each item in
a collection.

ng-app directive
The ng-app directive starts an AngularJS Application. It defines the root
element. It automatically initializes or bootstraps the application when the
web page containing AngularJS Application is loaded. It is also used to load
various AngularJS modules in AngularJS Application. In the following
example, we define a default AngularJS application using ng-app attribute
of a <div> element.
<div ng-app = "">
...
</div>

ng-init directive
The ng-init directive initializes an AngularJS Application data. It is used to
assign values to the variables.
<!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>
ng-model directive
The ng-model directive defines the model/variable to be used in AngularJS
Application
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

ng-repeat directive
The ng-repeat directive repeats HTML elements for each item in a
collection.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>

<div ng-app="" ng-init="names=['Jani','Hege','Kai”,”ABC”,”XYZ']">

<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>

</body>
</html>
 ã z§̉ J ì0? �┘�( ®ê ìXî î Äç ã î
In AngularJS, expressions are used to bind application data to HTML.
AngularJS resolves the expression, and return the result exactly where the
expression is written. AngularJS expressions are pure JavaScript
expressions and output the data where they are used.
Expressions are written inside double braces {{expression}}.They can also
be written inside a directive.
Ex: ng-bind="expression".

AnularJS expressions are very similar to JavaScript expressions. They can

contain literals, operators, and variables. For example:

{{ 5 + 5 }} or {{ firstName + " " + lastName }}

Ex:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.j
s"></script>
<body>
<div ng-app>
<p>A simple expression example: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Ex2.

AngularJS Numbers

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angula
r.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=5;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
</body>
</html>

ex:
<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="qua ntity=5;cos t=5">

<p>Tota l in dollar: <s pan ng-bind="qua ntity * cos t"></s pan></p>

</div>

</body>

</html>
AngularJS Strings
ex.without bind

<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="firs tNa me='Sonoo';la s tNa me='J a is wa l'">

<p>My full na me is : {{ firs tNa me + " " + la s tNa me }}</p>

</div>

</body>

</html>

ex.with ng-bind

<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="firs tNa me='Sonoo';la s tNa me='J a is wa l'">

<p>My full na me is : <s pan ng-bind="firs tName + ' ' + las tNa me"></s pan></p>

</div>
 </body>

</html>

AngularJS Objects
<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="pers on={firs tNa me:'Sonoo',la s tNa me:'J a is wa l'}">

<p>My na me is {{ pers on.firs tName }}</p>

</div>

</body>

</html>

Same example with ng-bind:

<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="pers on={firs tNa me:'Sonoo',la s tNa me:'J a is wa l'}">

<p>The na me is <s pan ng-bind="pers on.firs tNa me"></s pan></p>

 </div>

</body>

</html>

AngularJS Arrays

<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="points =[1,15,19,2,40]">

<p>The firs t res ult is {{ points [0] }}</p>

</div>

</body>

</html>

Same example with ng-bind:

<!DOCTYPE html>

<html>

<s cript
s rc="http:/ / a ja x.googlea pis .com/ a ja x/ libs / angula rjs / 1.4.8/ a ngula r.min.js ">

</s cript>

<body>

<div ng-a pp="" ng-init="points =[1,15,19,2,40]">

 <p>The firs t res ult is <s pan ng-bind="points [0]"></s pan></p>

</div>

</body>

</html>

AngularJS Scope
The scope is the binding part between the HTML (view) and the JavaScript
(controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.

How to Use the Scope?

When you make a controller in AngularJS, you pass the $scope object as an
argument:

ex:

<!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">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>The property "carname" was made in the controller, and can be referred to
in the view by using the {{ }} brackets.</p>
</body>
</html>

When adding properties to the $scope object in the controller, the view
(HTML) gets access to these properties.

In the view, you do not use the prefix $scope, you just refer to a property
name, like {{carname}}.

Understanding the Scope

If we consider an AngularJS application to consist of:

● View, which is the HTML.

● Model, which is the data available for the current view.
● Controller, which is the JavaScript function that
makes/changes/removes/controls the data.

Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are
available for both the view and the controller.

ex:If you make changes in the view, the model and the controller will be
updated

<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></s
cript>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>When you change the name in the input field, the changes will affect the
model, and it will also affect the name property in the controller.</p>
</body>
</html>

AngularJS Controllers
AngularJS controllers are used to control the flow of data of AngularJS
application. A controller is defined using ng-controller directive. A controller
is a JavaScript object containing attributes/properties and functions. Each
controller accepts $scope as a parameter which refers to the
application/module that controller is to control. A controller is a JavaScript
Object, created by a standard JavaScript object constructor

ex:
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>

○ Here, the AngularJS application runs inside the <div> is defined by

ng-app="myApp".

○ The AngularJS directive is ng-controller="myCtrl" attribute.

○ The myCtrl function is a JavaScript function.

 ○ AngularJS will invoke the controller with a $scope object.

○ In AngularJS, $scope is the application object (the owner of

application variables and functions).

○ The controller creates two properties (variables) in the scope

(firstName and lastName).

○ The ng-model directives bind the input fields to the controller

properties (firstName and lastName).

AngularJS controller example with methods (variables

as functions)
ex:

<!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="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>

Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "Siya";
$scope.lastName = "Sharma";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>

</body>
</html>

The example above demonstrated a controller object with two properties:

lastName and firstName.

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

AngularJS Controller in external files

In la rger a pplica tions , genera lly the controllers a re s tored in externa l files .

<!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="namesCtrl">

<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

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

</body>
</html>

namesController.js file
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

AngularJS Filters
In AngularJS, filters are used to format data. Following is a list of filters
used for transforming data.

Filter Description
 Currency It forma ts a number to a currency forma t.

Da te It forma ts a da te to a s pecified forma t.

Filter It s elect a s ubs et of items from an a rra y.

J s on It forma ts a n object to a J s on s tring.

Limit It is us ed to limit a n a rra y/ s tring, into a s pecified number of

elements / cha ra cters .

Lowerca s e It forma ts a s tring to lower ca s e.

Number It forma ts a number to a s tring.

Orderby It orders a n a rray by a n expres s ion.

Upperca s e It forma ts a s tring to upper ca s e.

How to add filters to expressions

Filters can be added to expressions by using the pipe character |, followed by
a filter.
ex:
The uppercase filter format strings to upper case
<!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="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
$scope.firstName = "Shriya",
$scope.lastName = "Mehta"
});
</script>

</body>
</html>

Adding Filters to Directives

Filters are added to directives, like ng-repeat, by using the pipe character |,
followed by a filter

ex:

<!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="namesCtrl">

<p>Looping with objects:</p>

<ul>

<li ng-repeat="x in names | orderBy:'country'">

{{ x.name + ', ' + x.country }}

</li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},

{name:'Hege',country:'Norway'},

{name:'Joe',country:'Denmark'},

{name:'Gustav',country:'Sweden'},

{name:'Birgit',country:'Denmark'},

{name:'Mary',country:'England'},

{name:'Kai',country:'Norway'}
];

});

</script>

</body>

</html>
The currency Filter
The currency filter formats a number as currency:

ex:

<!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="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('costCtrl', function($scope) {

$scope.price = 58;
});

</script>

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

</body>

</html>
The filter Filter
The filter filter selects a subset of an array.

The filter filter can only be used on arrays, and it returns an array
containing only the matching items.

ex:

<!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="namesCtrl">

<ul>

<li ng-repeat="x in names | filter : 'i'">

{{ x }}

</li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

'Jani',

'Carl',

'Margareth',

'Hege',
 'Joe',

'Gustav',

'Birgit',

'Mary',

'Kai'

];

});

</script>

<p>This example displays only the names containing the letter "i".</p>

</body>

</html>

Filter an Array Based on User Input

By setting the ng-model directive on an input field, we can use the value of
the input field as an expression in a filter.

Type a letter in the input field, and the list will shrink/grow depending on the
match:

ex:

<!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="namesCtrl">

<p>Type a letter in the input field:</p>

<p><input type="text" ng-model="test"></p>

<ul>

<li ng-repeat="x in names | filter:test">

{{ x }}

</li>

</ul>

</div>

<script>

angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

'Jani',

'Carl',

'Margareth',

'Hege',

'Joe',

'Gustav',

'Birgit',

'Mary',

'Kai'

];

});

</script>

<p>The list will only consists of names matching the filter.</p>

</body>
</html>

Sort an Array Based on User Input

Click the table headers to change the sort order

ex:

<!DOCTYPE html>

<html>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">

<tr>

<th ng-click="orderByMe('name')">Name</th>

<th ng-click="orderByMe('country')">Country</th>

</tr>

<tr ng-repeat="x in names | orderBy:myOrderBy">

<td>{{x.name}}</td>

<td>{{x.country}}</td>

</tr>

</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Carl',country:'Sweden'},

{name:'Margareth',country:'England'},

{name:'Hege',country:'Norway'},

{name:'Joe',country:'Denmark'},

{name:'Gustav',country:'Sweden'},

{name:'Birgit',country:'Denmark'},

{name:'Mary',country:'England'},

{name:'Kai',country:'Norway'}

];

$scope.orderByMe = function(x) {

$scope.myOrderBy = x;

});

</script>

</body>

</html>

Custom Filters
You can make your own filters by registering a new filter factory function
with your module

ex:
<!DOCTYPE html>

<html>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>

<body>

<ul ng-app="myApp" ng-controller="namesCtrl">

<li ng-repeat="x in names">

{{x | myFormat}}

</li>

</ul>

<script>

var app = angular.module('myApp', []);

app.filter('myFormat', function() {

return function(x) {

var i, c, txt = "";

for (i = 0; i < x.length; i++) {

c = x[i];

if (i % 2 == 0) {

c = c.toUpperCase();

txt += c;

return txt;

};
});

app.controller('namesCtrl', function($scope) {

$scope.names = [

'Jani',

'Carl',

'Margareth',

'Hege',

'Joe',

'Gustav',

'Birgit',

'Mary',

'Kai'

];

});

</script>

<p>Make your own filters.</p>

<p>This filter, called "myFormat", will uppercase every other character.</p>

</body>

</html>

AngularJS $http
$http is an AngularJS service for reading data from remote servers.

ex:
<!DOCTYPE html>

<html>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.j
s"></script>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>

<h1>{{myWelcome}}</h1>

</div>

<p>The $http service requests a page on the server, and the response is
set as the value of the "myWelcome" variable.</p>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm")

.then(function(response) {

$scope.myWelcome = response.data;

});
});

</script>

</body>

</html>

Methods
The example above uses the .get method of the $http service.

The .get method is a shortcut method of the $http service. There are several
shortcut methods:

● .delete()
● .get()
● .head()
● .jsonp()
● .patch()
● .post()
● .put()

The methods above are all shortcuts of calling the $http service:

AngularJS Tables
The ng-repeat directive is perfect for displaying tables.

Displaying Data in a Table

ex:

<!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="customersCtrl">

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

$http.get("customers.php")

.then(function (response) {$scope.names = response.data.records;});

});

</script>

</body>

</html>

displaying table with css

ex:

<!DOCTYPE html>

<html>

<style>

table, th , td {

border: 1px solid grey;

border-collapse: collapse;

padding: 5px;

table tr:nth-child(odd) {

background-color: #f1f1f1;

table tr:nth-child(even) {

background-color: #ffffff;

</style>

<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angul
ar.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="customersCtrl">

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('customersCtrl', function($scope, $http) {

$http.get("customers.php")

.then(function (response) {$scope.names =

response.data.records;});

});

</script>

</body>

</html>

AngularJS Forms
Forms in AngularJS provides data-binding and validation of input controls.

Input Controls
Input controls are the HTML input elements:

● input elements
● select elements
● button elements
● textarea elements
●

Data-Binding
Input controls provides data-binding by using the ng-model directive.