Internet Application Development
Laboratory # 09
UET TAXILA
Lab Engr. Sidra Shafi
AngularJS
AngularJS
is a very powerful JavaScript Framework. It is used in Single Page Application
(SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive
to user actions. AngularJS is open source, completely free, and used by thousands of developers
around the world.
Example 1:
<!doctype html>
<html ng-app>
<head>
<script src = ""></script>
</head>
<body>
<div>
<label>Name:</label>
<input type = "text" ng-model = "yourName" placeholder = "Enter a name here">
<hr />
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Advantages of AngularJS:
1.
AngularJS provides capability to create Single Page Application in a very clean and
maintainable way.
2.
AngularJS provides data binding capability to HTML thus giving user a rich and responsive
experience
3.
AngularJS code is unit testable.
4.
With AngularJS, developers write less code and get more functionality.
5.
In AngularJS, views are pure html pages, and controllers written in JavaScript do the
business processing.
AngularJS applications can run on all major browsers and smart phones including Android and iOS based
phones/tablets.
Disadvantages of AngularJS:
Though AngularJS comes with lots of plus points but same time we should consider the
following points −
1.
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.
2.
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.
AngularJS - Environment Setup:
1.
Use the file given with manual to use AngularJS library.
2.
You can also use the library using online reference as in Example 1.
AngularJS - First Application
Steps to create AngularJS Application
Step 1 − Load framework
Being a pure JavaScript framework, it can be added using <Script> tag.
<script src =
"">
</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>
Steps to run AngularJS Application
Use above mentioned three steps in an HTML page.
