AngularJS - Basics
AngularJS is a JavaScript framework based on MVC design pattern. It is mostly used for the client side web
application development. It is best suited for the implementation of the Single
Page Application Architecture (SPA). It is an OpenSource technology developed
and supported by Google.
As per https://docs.angularjs.org “AngularJS
is a structural framework for dynamic web apps. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your
application's components clearly and succinctly. Angular's data binding and
dependency injection eliminate much of the code you would otherwise have to
write. And it all happens within the browser, making it an ideal partner with
any server technology.”
MVC is
popular because it isolates the application logic from the user interface layer
and supports separation of concerns. A Model View Controller pattern is made up
of the following three parts:
·
Model - maintains data.
·
Controller - controls the communications between the Model and View.
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<title>AngularJS
: Hello World</title>
<body>
<h1>AngularJS
: Hello World</h1>
<div
ng-app="">
<p>Enter Name: <input
type="text" ng-model="name"></p>
<p>Hello {{name}}!</p>
</div>
</body>
</html>
Here we have
added the Angular library added with <Script> tag as
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
Now note the
line <div ng-app=""> where “ng-app” indicates that we have
angular application in <div>. It is also used to load various AngularJS
modules in AngularJS Application. “ng-model”
helps to bind the values of AngularJS application data to HTML input
controls. The {{ }} expression is an AngularJS
data binding expression. Here we can also use “ng-bind” to bind the model value
to our html page. With ng-bind
“<p>Hello {{name}}!</p>”
changed to
<p>Hello
<span ng-bind=name></span>!</p>
We can also initialize
the model data with “ng-init”.
<div
ng-app="" ng-init="name='ratnesh'">
<p>Enter Name: <input
type="text" ng-model="name"></p>
<p>Hello <span
ng-bind=name></span>!</p>
</div>
We can also
initialize two or more value in our model as below.
<div
ng-app="" ng-init="name='ratnesh';country='india'">
<p>Enter Name: <input
type="text" ng-model="name"></p>
<p>Hello <span
ng-bind=name></span>! Is it cold in <span
ng-bind=country></span> ?</p>
</div>
“ng-repeat”
is also very common directive. It is used to repeat an html element. In below
lines of code we are repeating the “<tr>” for each item in model called “friends”.
<div
ng-app="" ng-init="friends=[
{name:'Rahul',city:'Banglore'},
{name:'Rajib',city:'Pune'},
{name:'Biswadeep',city:'Dhanbad'}]">
<table
border="1">
<tr ng-repeat="x in friends">
<td>{{x.name}}</td>
<td>{{x.city}}</td>
</tr>
</table>
</div>
AngularJS : Controllers
In AngularJs application, controller is a
javacript object used to control the flow of data in application. It is defined
by ng-controller directive .It accepts $scope as a parameter which refer the
current application.
Now we are
trying to build an application which takes the input form user as name and
score and calculate the percentage for score out of 950 and display the
message. Here we have defined a controller as “CalulateController” it takes the
argument $scope. The ng-model
directives bind the input fields to the controller properties (name and score).
The property percent is the function of current $scope object, which returns
the percentage.
<div
ng-app="" ng-controller="CalulateController">
Name:
<input type="text" ng-model="Name"><br>
Score:<input
type="text" ng-model="score"><br>
<br>
<span
ng-if="Name && score">
{{Name}}
have scored {{score}} i.e {{percent()}} %
</span>
</div>
<script>
function
CalulateController($scope)
{
$scope.percent= function() {return
$scope.score / 950*100;}
}
</script>
</body>
Please note
ng-if directive which helps us to hide/unhide the message.
Now we can
also move our scripts in separate file say scripts.js and link it to our HTML
file.
AngularJS - Filters
Filters are used to transform the data
while displaying. They can be used in expression or directives using pipe (|)
character. The commonly used filters are.
S.No.
|
Name
|
Description
|
1
|
uppercase
|
Used to convert text to upper case
text.
|
2
|
lowercase
|
Used to convert text to lower case
text.
|
3
|
currency
|
Used to format text in a currency
format.
|
4
|
filter
|
Used to filter the array.
|
5
|
orderBy
|
Used to sort the array.
|
Now see the
below code shipment as an example of filters.
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<title>AngularJS
: Filters</title>
<body>
<h3>AngularJS
: Filters</h3>
<div
ng-app="" ng-init="friends=[
{name:'Rahul',city:'Banglore',salary:1523},
{name:'Rajib',city:'Pune',salary:3500},
{name:'Biswadeep',city:'Dhanbad',salary:2583}]">
<p>Search
: <input type="text" ng-model="FilterText"></p>
<table
border="1">
<tr>
<th>Name</th>
<th>City</th>
<th>Salary</th>
</tr>
<tr
ng-repeat="x in friends| orderBy:'city'| filter:FilterText">
<td>{{x.name|uppercase}}</td>
<td>{{x.city|lowercase}}</td>
<td>{{x.salary|currency}}</td>
</tr>
</table>
</div>
</body>
</html>
Here we have
initialized the friends array and each item has name, city and salary. We have
created the table earlier but this time we have transformed the name in
uppercase, city in lowercase and salary as currency. Note the “ng-repeat” we
have added two filters “orderBy” and
“filter”. Order by make the data
sorted by city. By default it is ascending. If we need to sort the table
descending then we need to change it to orderBy:'-city'.
We have use
“filter” to filter the table data depending the value in text box or model
value, in our case the model is “FilterText”. It will by default search the
text in entire row. We can also set to particular column as well. Suppose we
need to search within the name only the ng-model
needs to change as ng-model="FilterText.name"
