AngularJS

AngularJS is a JavaScript open-source front-end structural framework

that is mainly used to develop single-page web applications(SPAs). It
is a continuously growing and expanding framework which provides
better ways for developing web applications. It changes the static
HTML to dynamic HTML. Its features like dynamic binding and
dependency injection eliminate the need for code that we have to
write otherwise. AngularJS is rapidly growing and because of this
reason, we have different versions of AngularJS with the latest stable
being 1.7.9. It is also important to note that Angular is different from
AngularJS. It is an open-source project which can be freely used and
changed by anyone. It extends HTML attributes with Directives, and
data is bound with HTML.

History of AngularJS: AngularJS was originally developed in 2008-

2009 by Miško Hevery and Adam Abrons at Brat Tech LLC, as software
for the online JSON storage service, in order to ease to development
of the applications for the enterprise, that has been valued by the
megabyte. It is now maintained by Google. AngularJS was released
with version 1.6, which contains the component-based application
architecture concept. This release version removed the Sandbox,
which facilitates security, despite having the various vulnerabilities
that have evolved, which bypassed the Sandbox.
Why use AngularJS?
 Easy to work with: All you need to know to work with
AngularJS is the basics of HTML, CSS, and Javascript, not
necessary to be an expert in these technologies.
 Time-saving: AngularJs allows us to work with components
and hence we can use them again which saves time and
unnecessary code.
 Ready to use a template: AngularJs is mainly plain HTML,
and it mainly makes use of the plain HTML template and
passes it to the DOM and then the AngularJS compiler. It
traverses the templates and then they are ready to use.
 Directives: AngularJS’s directives allow you to extend HTML
with custom elements and attributes. This enables you to
create reusable components and define custom behaviors for
your application. Directives make it easier to manipulate the
DOM, handle events, and encapsulate complex UI logic within
a single component.
Key Features: There are numerous features of AngularJS that
contribute to creating efficient applications. Some of the features are
described below:
 Model view Controller: An architecture is basically a
software pattern used to develop an application. It consists of
three components:
 Model: This component consists of a database & is
responsible for managing the data & logic of the
application. It responds to the request made by the
View component & the instruction given by the
Controller component, in order to update itself.
 View: This component is responsible for displaying
the application data to the users. The View is
basically the user interface that helps to render the
required data to the user, with the help of the
AngularJS expressions.
 Controller: This component is responsible for
communicating & interacting between the Model &
the View Component, i.e. its main job is to connect
the model and the view component. It helps to
validate the input data by implementing some
business logic that manipulates the state of the data
model.
Normally, when we talk about MVC architecture, we have to split our
applications into these three components and then write the code to
connect them. However, in AngularJS, all we have to do is split the
application into MVC and it does the rest by itself. It saves a lot of
time and allows you to finish the job with less code.
 Data Model Binding: Data Binding in AngularJS is a two-way
process, i.e. the view layer of the MVC architecture is an
exact copy of the model layer. You don’t need to write special
code to bind data to the HTML controls. Normally, in other
MVC architectures, we have to continuously update the view
layer and the model layer to remain in sync with one another.
In AngularJs it can be said that the model layer and the view
layer remain synchronized with each other. When the data in
the model changes, then the view layer reflects the change
and vice versa. It happens immediately and automatically
which helps in making sure that the model and the view are
updated at all times.
 Templates: The main advantage of using AngularJS is how it
makes use of the templates. Normally what happens is that
 the templates are passed by the browser into DOM, then DOM
becomes the input of the AngularJS compiler and then
AngularJS traverses the DOM template for rendering
instructions which are called directives. The other siblings of
AngularJS work differently as they make use of the HTML
String whereas AngularJs does not manipulate the template
strings. Using the DOM is what gives us the privilege to
extend the directive vocabulary or even abstract them into
reusable components.
 Unit Testing ready: The concern of Google’s designer was
not only to develop Angular but also to develop a testing
framework called “Karma” which helps in designing unit tests
for AngularJS applications.
 Integration and Extensibility: AngularJS can be easily
integrated with other libraries and frameworks. It provides
support for interacting with server-side APIs, handling HTTP
requests, and integrating with third-party tools. AngularJS also
allows you to extend its functionality by creating custom
directives, filters, and services, giving you the flexibility to
tailor the framework to your specific needs.
Benefits of AngularJS:
Depending Injection: Dependency Injection is a software design
pattern. It works on the basis of Inversion of Control. Inversion control
means objects do not create other objects. Instead, they get these
objects from an outside source. The dependent object is not created
by the primary object after that and then uses its methods. Instead,
an external source creates the dependent object and gives it to the
source object for further usage. On the basis of dependency injection,
we create a service to acquire all the information from the database
and get it into the model class.
In [Link], dependencies are injected by using an “injectable
factory method” or “constructor function”. These components can be
injected with “service” and “value” components as dependencies.
The $http service is normally defined from within the controller in the
following manner.
[Link] ('AngularJSController', function ($scope,
$http)
Example: This example illustrates the basic Angular JS by
implementing the directive, controller, etc.
 HTML
 <!DOCTYPE html>

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

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

</body>
</html>

The ng-app directive tells AngularJS that the <div> element is the "owner" of
an AngularJS application.
The ng-model directive binds the value of the input field to the application
variable name.
The ng-bind directive binds the content of the <p> element to the application
variable name.