Introduction to AngularJS

Ratnesh Singh
9y
9.6k
0
1
100
Article

AngularJS - Basics

AngularJS is a JavaScript framework based on the MVC design pattern. It is usually used for 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 in AngularJS Docs “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 need 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 of the following three parts:

Model: maintains data.
View: represents data.
Controller: controls the communications between the Model and View.

First Application: Hello world

<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 with the <Script> tag as in the following:

<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 an angular application in the <div>. It is also used to load various AngularJS modules into the 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>” is 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 values in our model as in the following:

<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 a very common directive. It is used to repeat an HTML element. In the following lines of code we are repeating the “<tr>” for each item in the 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 an AngularJs application, the Controller is a JavaScript object to control the flow of data in the application. It is defined by the ng-controller directive. It accepts $scope as a parameter that refers to the current application.

Now we are trying to build an application that takes the input form user as name and score and calculates the percentage for the score out of 950 and displays the message. Here we have defined a controller as “CalulateController” that 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 the current $scope object that 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 the ng-if directive that helps us to hide and unhide the message.

Now we can also move our scripts into a separate file, say scripts.js and link it to our HTML file.

AngularJS: Filters

Filters are used to transform the data when displaying. They can be used in expressions and directives using the pipe (|) character. The following are the commonly used filters:

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 the following 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 a 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 that in the “ng-repeat” we have added the two filters “orderBy” and “filter”. Order by sorts the data 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 on the value in the text box or model value, in our case the model is “FilterText”. It will by default search the text in the entire row. We can also set it to a specific column as well. Suppose we need to search within the name only. The ng-model needs to be changed to ng-model="FilterText.name".

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all