§ This unit covers the elementary form of AngularJS.

§ AngularJS was developed by Misko Hevery and Adam Abrons in 2009.

§ It is a popular form of web application development framework which is
now managed and upgraded by Google.
§ AngularJS deals in the development of dynamic web applications. We
can extend your HTML syntax to use the components of our application
effectively.
§ This framework provides a special form of binding which allows its use
without writing the code from scratch.
[email protected] 4.04.2023 2
§ AngularJS has the following major features:

§ It can be used to create RICH Internet Application (RIA) in an effective form.

§ It supports options to write the client side applications in the form of Model View Controller
(MVC).
§ It provides the cross-browser compliance by automatically handling the JavaScript code for
all browsers.
§ It is in an open source and free to use library.

Contrary to the strength of the AngularJS, it has some drawbacks as it is not

secure due to the lack of server side authentication and if the scripts are
blocked by the user, the functionality can not be utilized.
[email protected] 4.04.2023 3
WHY SHOULD YOU USE ANGULARJS
§ Front-end applications have become one of the best ways to win the target
market, interact with the customers and outdo the competitors. The features
and uniqueness of AngularJS have made it stand out a framework to develop
user-friendly applications in less time and less effort. Let us find out why
developers prefer AngularJS to build front-end apps.
§ Very Easy to Learn and get started: AngularJs is perhaps the easiest thing
that any developer can think of. Developers can complete their first application
in a couple of minutes just by including some attribute into the HTML.
§ Affordability: AngularJsis an open-source framework that allows developers
to build custom web/mobile applications at lower costs.

[email protected] 4.04.2023 4
WHY SHOULD YOU USE ANGULARJS
§ Two-Way Data Binding: Unlike other template systems, AngularJS
templating system follows two-way data binding. In this process, first, the
template is compiled on the browser and produces a live view. Here, the
changes in the view appear in the model, and any changes in the model
immediately propagated to the view.

§ Declarative UI Expression: AngularJS has a fully structured UI where it is

easier to understand and manipulate the components. Designers can easily
learn markups. Thus we can say that declarative expressions of the application
UI make more sense.

[email protected] 4.04.2023 5
§ Upon completion of this unit, you should be able to:

1.Install AngularJS in your computer or use it through CDN.

2.Understand the syntax of AngularJS.
3.Use directive to enhance the functionality of your web page.
4.Add filters to format data.
5.Understand the concept of data binding.

[email protected] 4.04.2023 6
§ Data Binding: Synchronization of information between model and view.

§ Directive: Extend HTML with new attributes.

§ Filter: AngularJS filters are used to format the data.

§ Expression: AngularJS expressions are written inside double braces.

[email protected] 4.04.2023 7
§ We can use the following two styles to use jQuery library to write and execute
code in HTML document.

1. Local Installation

2. CDN Based Version

[email protected] 4.04.2023 8
§ For local installation, we can download the AngularJS library from its official website
https://angularjs.org/. When you click “download” button on the home page, the following
window will be appeared as shown in figure 8.1.

You can select the required version from the popup window
and download it on your computer.
After downloading, copy the AngularJS file “angular.min.js”
in the directory of your project and then reference it.

[email protected] 4.04.2023 9
§ If you are using CDN version of AngularJS, you need to provide the link of that AngularJS file
instead of downloading it. You can simply include the AngularJS library in to your HTML
document as shown in code 8.1.

[email protected] 4.04.2023 10
[email protected] 4.04.2023 11
§ An expression is a combination of one or more constants, variables,
operators and functions that represent a value.
§ In AngularJS, an expression is surrounded with double braces
“{{expression}}”.
§ They are used to bind application data to HTML. Like JavaScript,
the AngularJS expression can contain operators and variables.

[email protected] 4.04.2023 12
[email protected] 4.04.2023 13
AngularJS expressions are like JavaScript applications. However, they can not contain
conditional statements and loops.

[email protected] 4.04.2023 14
§ Create a simple AngularJS expression and display “Hello World” in your
output.

[email protected] 4.04.2023 15
§ AngularJS extends HTML functionality by providing new attributes
called directives. These directives are special functions that attach
specific behavior with the DOM elements.
§ These special attributes start with “ng-” prefix where “ng-” stand for
angular. AngularJS has a library of built in directives which are used to
extend HTML functionality.
§ For example, the static HTML code does not have the feature to update
the date in a web page continuously.
§ To enable an automatic updating of date in HTML, AngularJS can
provide a directive to display an advance form of date picker widget
(application code).
§ These directives start with the prefix “ng-”.
[email protected] 4.04.2023 16
§ ng-app − This directive starts an AngularJS Application.

• ng-init − This directive initializes application data.

• ng-model − This directive defines the model i.e. variable to be used in

AngularJS.

• ng-repeat − This directive repeats html elements for each item in a

collection.
[email protected] 4.04.2023 17
§ “ng-app” directive starts an AngularJS application.
§ It automatically
initializes or bootstraps the application by defining the root
element when web page containing AngularJS application is loaded.
§ It is also used to load various AngularJS modules.
§ The following example shows the syntax of “ng- app” attribute of a div
element.

<div ng-app="">
:
</div>
[email protected] 4.04.2023 18
§ “ng-init” initializes an AngularJS application data.
§ It is used to define a local variable which can be used in the
application when required.
§ The following example, initializes name of the person by using
“ng-init”.

<div ng-init="firstName='Ali’”>
:
</div>

[email protected] 4.04.2023 19
§ “ng-model” binds an element with the property to be used in
AngularJS application.
§ The following example shows the binding of input type “text”,
using “ng-model” name.

<div ng-app="" ng-init="">

Name: <input type="text" ng-model="name">
</div>

[email protected] 4.04.2023 20
§ “ng-repeat” directive repeats html elements for each item in a
collection.
§ In following example, we have iterated over array of countries.

<div ng-repeat="">
Name: <input type="text" ng-model="name">
</div>

§ The code 8.3 demonstrates the use “ng-init” and “ng-repeat” example.

[email protected] 4.04.2023 21
[email protected] 4.04.2023 22
Output of code 8.3 is shown in figure 8.4. In this code “ng-init” initializes names and “ng-
repeat” is repeating HTML code to display each item of the array.

[email protected] 4.04.2023 23
§ Data Binding is a process through which we can establish a link between the
data and the consumer frontend in a way that it gets synchronized
automatically.
§ AngularJS provides this feature in an effective way. This kind of binding links
the data with the frontend at all times. Once the data changes, the display gets
updated at the same time and vice versa. Thus, this update is being processed
on all change events of the data.
§ Prior to AngularJS, the data binding was expedited in one direction only. The
model and the template (data source) were merged to form a view (consumer
frontend) only once. So, the view was generated after taking a snapshot of the
data at any one time.
§ The change in the data was not constantly being tracked for the view to get
update as shown in figure 8.5.
[email protected] 4.04.2023 24
[email protected] 4.04.2023 25
§ Twoway data binding maintains and continues update relationship between the
model and the view by using AngularJS.
§ This
is achieved by placing the view at a central position on the theme as
shown in figure 8.6.

[email protected] 4.04.2023 26
§ 8.5.1. One way building

§ “ng-model” directive can be used in its basic form for one way data binding.
§ Its
application is shown in code 8.4. Code 8.4 describes the application of “ng-
model” in form.

[email protected] 4.04.2023 27
[email protected] 4.04.2023 28
§ Output of code 8.4 is shown in figure 8.7.
§ The phrase “AIOU” is displayed in the text field as it is binded
from “scope.name”.

[email protected] 4.04.2023 29
§ “ng-model” directive can also be used for two way data binding. Its application is shown in code 8.5.

[email protected] 4.04.2023 30
 The output of code 8.5 is shown in figure 8.8 and 8.9.
Two way binding is achieved in this code as the phrase entered in the text field will appear
instantaneously in the display.
We are going to change the text "AIOU" with "Hello. I am new to angular!”.

One way data binding binds the data from model to

view whereas two way data binding binds the data
from model to view and view to model.
[email protected] 4.04.2023 31
§ The flow of data can be controlled by using AngularJS controller.
§ It is a function that can change attributes and properties of data by
using $scope object.
§ This object maintains data and behavior by adding and updating the
properties.
§ These controllers can be linked by the model only whereas the view
may be separated completely and independently.
§ Code 8.6 describes the application of AngularJS controller.

[email protected] AngularJS controller controls the flow of data through its properties. 4.04.2023 32
4.04.2023 33
When we click on “Hello”, this text will be replaced
by “AIOU” as shown in figure 8.11.

[email protected] 4.04.2023 34
§ Write a small code to attach a property of “text-color” inside a
controller and display the effect of this property in the output.

[email protected] 4.04.2023 35
§ A scope is an object which is shared by the controller and the view.
§ This object joins the functionality of the controller with the views.
As the controller defines the properties on the scope, the views uses
these properties.
§ AngularJS keeps the controller and the view is synchronized by
implementing two way data binding.
§ Code 8.7 demonstrates the use of scope in AngularJS.

[email protected] 4.04.2023 36
[email protected] 4.04.2023 37
In the above example “scope. uniname” is being assigned a value “AIOU” and is being transferred to
“{{uniname}}” before it is displayed in the heading. Output of code 8.7 is shown in figure 8.12.

[email protected] 4.04.2023 38
§ AngularJS Filters is an AngularJS code that reads a certain amount
of data and transforms into an output pattern by adding or removing
certain elements.
§ It can change or update the data to display it on user screen without
changing its original format.
§ Table 8.1 list down some important filters.

• Filters can be used to change the format of the data.

[email protected] 4.04.2023 39
Filters can be added to expressions by using the pipe character |, followed by a
filter. Some of the filters are discussed below.

[email protected] 4.04.2023 40
The uppercase filter format strings to upper case. Code 8.8
demonstrates the use of uppercase filter.

4.04.2023 41
Output of code 8.8 is shown in figure 8.13. The phrase “world” is being displayed after converting it into upper case.

[email protected] 4.04.2023 42
§ The lowercase filter string to lower case.
§ Here we have addes lowercase filter to print first name in all
lowercase letters asshown in example.

Enter First name: <input type = "text" ng-model="firstname">

<p>Name in lower case: {{ firstname() | lowercase }}</p>

[email protected] 4.04.2023 43
§ To display only required subjects, we use subjectname as filter.
§ This can be explained with the help of the following example.

Enter subject: <input type ="text" ng-model = "subjectname">

Subject:
<ul>
<li ng-repeat ="subject in student.subjects | filter:
subjectname" > <li>
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>
[email protected] 4.04.2023 44
§ To order subjects by marks, we use orderBy marks.

<ul>
<li ng-repeat ="subject in student.subjects | orderBy: 'marks'" >
<li>
{{ subject.name + ', marks:' + subject.marks }}
</li>
</ul>

[email protected] 4.04.2023 45
[email protected] 4.04.2023 46
Please note that the figure of 100 is automatically formatted with the currency form.

[email protected] 4.04.2023 47