AngularJS is a very powerful JavaScript library. 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. It is licensed under the Apache license
version 2.0.
The most important general features of AngularJS are:
AngularJS is a efficient framework that can create Rich Internet Applications (RIA).
AngularJS provides developers an options to write client side applications using JavaScript in a clean Model
View Controller (MVC) way.
Applications written in AngularJS are cross-browser compliant. AngularJS automatically handles JavaScript
code suitable for each browser.
AngularJS is open source, completely free, and used by thousands of developers around the world. It is
licensed under the Apache license version 2.0.
Overall, AngularJS is a framework to build large scale, high performance, and easy-to-maintain web
applications.
The most important core features of AngularJS are:
Data-binding: It is the automatic synchronization of data between model and view components.
Scope: These are objects that refer to the model. They act as a glue between controller and view.
Controller: These are JavaScript functions bound to a particular scope.
Services: AngularJS comes with several built-in services such as $http to make a XMLHttpRequests. These
are singleton objects which are instantiated only once in app.
Filters: These select a subset of items from an array and returns a new array.
Directives: Directives are markers on DOM elements such as elements, attributes, css, and more. These can
be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives such
as ngBind, ngModel etc.
Templates:These are the rendered view with information from the controller and model. These can be a
single file (such as index.html) or multiple views in one page using partials.
Routing: It is concept of switching views.
Model View Whatever: MVW is a design pattern for dividing an application into different parts called
Model, View, and Controller, each with distinct responsibilities. AngularJS does not implement MVC in the
traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers
it humorously as Model View Whatever.
Deep Linking: Deep linking allows you to encode the state of application in the URL so that it can be
bookmarked. The application can then be restored from the URL to the same state.
Dependency Injection: AngularJS has a built-in dependency injection subsystem that helps the developer to
create,understand, and test the applications easily.
The advantages of AngularJS are:
AngularJS provides capability to create Single Page Application in a very clean and maintainable way.
AngularJS provides data binding capability to HTML. Thus, it gives user a rich and responsive experience.
AngularJS code is unit testable.
AngularJS uses dependency injection and make use of separation of concerns.
AngularJS provides reusable components.
With AngularJS, the developers can achieve more functionality with short code.
In AngularJS, views are pure html pages, and controllers written in JavaScript do the business processing.

On the top of everything, AngularJS applications can run on all major browsers and smart phones, including
Android and iOS based phones/tablets.
Disadvantages of AngulaJS
Though AngularJS comes with a lot of merits, here are some points of concern:
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.
Not degradable: If the user of your application disables JavaScript, then nothing would be visible, except
the basic page.
The AngularJS framework can be divided into 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.
We include the AngularJS JavaScript file in the HTML page so that we can use it:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
Next, it is required to tell which part of HTML contains the AngularJS app. You can do this by adding the ngapp attribute to the root HTML element of the AngularJS app. You can either add it to html element or body
element as shown below:
<body ng-app="myapp">
</body>
The view is this part:
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
Model - It is the lowest level of the pattern responsible for maintaining data.
View - It is responsible for displaying all or a portion of the data to the user.
Controller - It is a software Code that controls the interactions between the Model and View.
Creating AngularJS Application
Step 1: Load framework
Being a pure JavaScript framework, it can be added using <Script> tag.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>
Executing AngularJS Application
Use the above mentioned three steps in an HTML page.

testAngularJS.htm
<html>
<title>AngularJS First Application</title>
<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
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.
Angular JS Tutorial
AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. 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.
5. DIRECTIVES
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. In the
following example, we initialize an array of countries. We use JSON syntax to define the array of countries.
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
... Angular JS Tutorial
16

</div>
ng-model directive
The ng-model directive defines the model/variable to be used in AngularJS Application. In the following
example, we define a model named name.
<div ng-app="">
...
<p>Enter your Name: <input type="text" ng-model="name"></p>
</div>
ng-repeat directive
ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate
over the array of countries.
<div ng-app="">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
Example
The following example shows the use of all the above mentioned directives.
testAngularJS.htm
<html>
<title>AngularJS Directives</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="countries=[{locale:'en-US',name:'United States'},
{locale:'en-GB',name:'United Kingdom'},
{locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat="country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is
defined using ng-controller directive. A controller is a JavaScript object that contains attributes/properties, and
functions. Each controller accepts $scope as a parameter, which refers to the application/module that the
controller needs to handle.
<div ng-app="" ng-controller="studentController"> ... </div>
Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The
following list shows commonly used filters.
.No.
Name
Description
S1
uppercase
converts a text to upper case text.
2
lowercase
converts a text to lower case text.
3
currency
formats text in a currency format.
4
filter
filter the array to a subset of it
based on provided criteria.
5
orderby
orders the array based on provided
criteria.

Table data is generally repeatable. The ng-repeat directive can be used to draw table easily.
directives are used to bind application data to attributes of HTML DOM elements:
S.No.
Name
Description
1
ng-disabled
Disables a given control.
2
ng-show
Shows a given control.
3
ng-hide
Hides a given control.
4
ng-click
Represents a AngularJS
click event.
AngularJS supports modular approach. Modules are used to separate logic such as services, controllers,
application etc. from the code and maintain the code clean. We define modules in separate js files and name
them as per the module.js file. In the following example, we are going to create two modules:
Application Module - used to initialize an application with controller(s).
Controller Module - used to define the controller.
AngularJS enriches form filling and validation. We can use ng-click event to handle the click button and use
$dirty and $invalid flags to do the validation in a seamless way. Use novalidate with a form declaration to
disable any browser-specific validation. The form controls make heavy use of AngularJS events. Let us have a
look at the events first.
Events
AngularJS provides multiple events associated with the HTML controls. For example, ng-click directive is
generally associated with a button. AngularJS supports the following events:
ng-click
ng-dbl-click ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mousemove
ng-mouseover ng-keydown ng-keyup ng-keypress ng-change
The following can be used to track error.
$dirty - states that value has been changed.
$invalid- states that value entered is invalid.
$error- states the exact error.
HTML does not support embedding HTML pages within the HTML page. To achieve this functionality, we can
use one of the following options:
Using Ajax - Make a server call to get the corresponding HTML page and set it in innerHTML of HTML
control.
Using Server Side Includes - JSP, PHP and other web side server technologies can include HTML pages
within a dynamic page.
Using AngularJS, we can embed HTML pages within an HTML page using ng-include directive.
<div ng-app="" ng-controller="studentController">
<div ng-include="'main.htm'"></div>
<div ng-include="'subjects.htm'"></div>
</div>
AngularJS provides $http control which works as a service to read data from the server. Server makes a database
call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used
to get the data from server
AngularJS supports Single Page Application via multiple views on a single page. To do this, AngularJS has
provided ng-view and ng-template directives, and $routeProvider services.
Scope is a special JavaScript object that connects controller with views. Scope contains model data. In
controllers, model data is accessed via $scope object.
AngularJS supports the concept of Separation of Concerns using services architecture. Services are JavaScript
functions, which are responsible to perform only specific tasks. This makes them individual entities which are
maintainable and testable. The controllers and filters can call them on requirement basis. Services are normally
injected using dependency injection mechanism of AngularJS.

AngularJS provides many inbuilt services. For example, $http, $route, $window, $location etc. Each service is
responsible for a specific task such as the $http is used to make ajax call to get the server data, the $route is used
to define the routing information, and so on. The inbuilt services are always prefixed with $ symbol.
There are two ways to create a service:
Factory
Service
Dependency Injection is a software design in which components are given their dependencies instead of hard
coding them within the component. This relieves a component from locating the dependency and makes
dependencies configurable. This also helps in making components reusable, maintainable and testable.
AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which
can be injected into each other as dependencies.
Value
Factory
Service
Provider
Constant
Custom directives are used in AngularJS to extend the functionality of HTML. They are defined using directive
function. A custom directive simply replaces the element for which it is activated. During bootstrap, the
AngularJS application finds matching elements and does one-time activity using its compile() method of the
custom directive. Then it processes the element using link() method of the custom directive based on the scope
of the directive. AngularJS provides support to create custom directives for the following elements:
Element directive - This activates when a matching element is encountered.
Attribute - This activates when a matching attribute is encountered.
CSS - This activates when a matching CSS style is encountered.
Comment - This activates when a matching comment is encountered.
AngularJS supports inbuilt internationalization for three types of filters : Currency, Date, and Numbers. We only
need to incorporate corresponding java script according to locale of the country. By default, it considers the
locale of the browser.