What is AngularJS?

● AngularJS is an open source Model-View-Controller framework which is similar to the

JavaScript framework.
● Angular JS framework is used for developing mostly Single Page applications.
● This framework has been developed by a group of developers from Google itself. Because of
the sheer support of Google and ideas from a wide community forum, the framework is always
kept up to date. Also, it always incorporates the latest development trends in the market.

AngularJS Features

● Angular has the following key features which makes it one of the powerful frameworks in the
market.
● MVC – The framework is built on the famous concept of MVC. This pattern is based on
splitting the business logic layer, the data layer, and presentation layer into separate sections.
The division into different sections is done so that each one could be managed more easily.
● Data Model Binding – You don't need to write special code to bind data to the HTML controls.
This can be done by Angular by just adding a few snippets of code.
● Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to
be written to design any application. But with Angular, you will be amazed with the lesser
amount of code you need to write for DOM manipulation.
● Unit Testing ready – The designers at Google not only developed Angular but also developed a
testing framework called "Karma" which helps in designing unit tests for AngularJS
applications

AngularJS Architecture

• The Controller represents the layer that has the business logic. User events trigger the functions
which are stored inside your controller. The user events are part of the controller.

• Views are used to represent the presentation layer which is provided to the end users

• Models are used to represent your data. The data in your model can be as simple as just having
primitive declarations. For example, if you are maintaining a student application, your data
model could just have a student id and a name. Or it can also be complex by having a structured
data model. If you are maintaining a car ownership application, you can have structures to
define the vehicle itself in terms of its engine capacity, seating capacity, etc.
AngularJS Advantages

● Since it's an open source framework, you can expect the number of errors or issues to be
minimal.
● Two-way binding – [Link] keeps the data and presentation layer in sync. Now you don't
need to write additional JavaScript code to keep the data in your HTML code and your data
later in sync. [Link] will automatically do this for you. You just need to specify which
control is bound to which part of your model
● Routing – Angular can take care of routing which means moving from one view to another. This
is the key fundamental of single page applications; wherein you can move to different
functionalities in your web application based on user interaction but still stay on the same page.
● Angular supports testing, both Unit Testing, and Integration Testing.
● It extends HTML by providing its own elements called directives. At a high level, directives are
markers on a DOM element (such as an attribute, element name, and comment or CSS class)
that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element. These
directives help in extending the functionality of existing HTML elements to give more power to
your web application.

Modules:-
What is an AngularJS Module?

An AngularJS module is a container for different application parts and settings. It helps in
organizing code in a manageable way and is used to configure the app, define dependencies, and
bind the application logic together.

An AngularJS module defines an application.

 The module is a container for the different parts of an application.

The module is a container for the application controllers.

Controllers always belong to a module.

Creating a Module

A module is created by using the AngularJS function [Link]

<div ng-app="myApp">...</div>
<script>
var app=[Link]("myApp",[]);
</script>

The "myApp" parameter refers to an HTML element in which the application will [Link] you can
add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller
Add a controller to your application, and refer to the controller with the ng-controller. <!DOCTYPE
html>
<html>
<script src="[Link]
<body>

<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}
</div>

<script>
var app = [Link]("myApp", []);
[Link]("myCtrl", function($scope) {
$[Link] = "John";
$[Link] = "Doe";
});
</script>

</body>
</html>
Adding a Directive

AngularJS has a set of built-in directives which you can use to add functionality to your application.

In addition you can use the module to add your own directives to your applications:

Example
<!DOCTYPE html>
<html>
<script src="[Link]
<body>

<div ng-app="myApp" w3-test-directive></div>

<script>
var app = [Link]("myApp", []);
[Link]("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
</body>
</html>

Directives
AngularJS allows us to extend HTML in very simple way using attributes. The attributes are basically
directives. There are different types of directives which can play different roles in Application. They
are App Directive, Model Directive, Bind Directive, Init Directive, and Repeat Directive.

App Directive

ng-app= “ ”

The app directive defines the area of AngularJS application. The syntax of app directive is ng-app = “
”; In here the ng is the namespace of AngularJS and app is the application area of Angular JS.
Model Directive
Bind Directive
ng-model & ng-bind

ng-model = “data”: binds the inputted value from Html controls (textarea, checkbox, select, input and
radio etc.) to “data”.

Init Directive
Repeat Directive
Model:-
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

The ng-model Directive

With the ng-model directive you can bind the value of an input field to a variable created in AngularJS.

<!DOCTYPE html>
<html>
<script src="[Link]
<style>
[Link]-invalid {
background-color: lightblue;
}
</style>
 <body>

<form ng-app="" name="myForm">

Enter your name:
<input name="myName" ng-model="myText" required>
</form>
<p>Edit the text field and it will get/lose classes according to the status.</p>
<p><b>Note:</b> A text field with the "required" attribute is not valid when it is empty.</p>
</body>
</html>
Two-Way Binding

The binding goes both ways. If the user changes the value inside the input field, the AngularJS property
will also change its value:

<!DOCTYPE html>
<html>
<script src="[Link]
<body>

<div ng-app="myApp" ng-controller="myCtrl">

Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>

<script>
var app = [Link]('myApp', []);
[Link]('myCtrl', function($scope) {
$[Link] = "John Doe";
});
</script>

<p>Change the name inside the input field, and you will see the name in the header changes
accordingly.</p>

</body>
</html>
AngularJS Data Binding
Data binding is a very useful and powerful feature used in software development technologies. It acts
as a bridge between the view and business logic of the application.

AngularJS follows Two-Way data binding model.

One-Way Data Binding

The one-way data binding is an approach where a value is taken from the data model and inserted into
an HTML element. There is no way to update model from view. It is used in classical template systems.
These systems bind data in only one direction.

Two-Way Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the model and view
components.

Data binding lets you treat the model as the single-source-of-truth in your application. The view is a
projection of the model at all times. If the model is changed, the view reflects the change and vice
versa.
 <!DOCTYPE html>
<html>
<script src="[Link]
<body>
<div ng-app="" ng-init="firstName='Ajeet'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>

In the above example, the {{ firstName }} expression is an AngularJS data binding expression. Data
binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ firstName }} is bound with ng-model="firstName".

Let's take another example where two text fields are bound together with two ng-model directives:

<!DOCTYPE html>
<html>
<script src="[Link]
<body>
 <div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>

Expressions
Filters
Controllers