AngularJS is a free and open-source JavaScript-based web framework for developing single-

page applications(SPA). It was maintained mainly by Google and a community of individuals

and corporations. It aimed to simplify both the development and the testing of such
applications by providing a framework for client-side model–view–controller (MVC)
and model–view–viewmodel (MVVM) architectures, along with components commonly used
in web applications and progressive web applications.It is a JavaScript framework that comes
with rules, guidelines, structure, documentation, built-in functionality, etc hence expanding to
include better methods for creating web applications. It’s a declarative paradigm
AngularJS refers to the original 1.0 releases.
In Angular, Directives are defined as classes that can add new behavior to the elements in the
template or modify existing behavior. The purpose of Directives in Angular is to maneuver the
DOM, be it by adding new elements to DOM or removing elements and even changing the
appearance of the DOM elements.
Directives are meant to be a function that executes when found in the DOM by the Angular
compiler to extend the vocabulary of the HTML to teach new tricks. Directives have a name
and can be predefined or custom-defined so that they can be called anything. Depending on the
predefined directive, its use is determined – attribute, comment, element, or class.
Angular is now used to refer to version 2+ . Angular is currently at version 17 (Nov 2023).
AngularJS Modules

There are various features of angular JS. Some of them are as follows:
1. MVC Architecture MVC refers to Model View Architecture, a product example of developing
applications. The model layer deals with information on the application. The view layer
displays this information and the controller connects the model and the view layer. In trivial
MVC structures and other languages, you are usually required to divide your application into
these segments and write the code to associate them with each other as well, which honestly
is, really tiresome work. In AngularJS, you just need to partition it into MVC and Angular takes
care of the rest. This feature of AngularJS saves the developer a lot of time and tedious work.

2. The unique AngularJS Router The router in this framework has a very particular usage.
Unlike other frameworks, it doesn’t observe the location.hash. In those frameworks, the
router observes and checks for the location.hash and calls the function after the route
matches. Instead, it acts as a server-side router in AngularJS.

3. User Interface with HTML AngularJS takes the assistance of User Interface with HTML to
design the UI, making it a bit different from other frameworks. It is hard to adapt to shorter
labels. However, Angular makes these short labels simple to use and execute. It gives an
essentially better, and highly efficient interface, without raising any costs.

4. Directives This is one of the unique functionalities of AngularJS, and one that makes it very
different from other frameworks. Mandates allowed developers and design teams to portion
out practices to the Document Object Model (DOM), enabling software architects to make a
dynamic component with HTML. Directives are attributes with the prefix ng- before their
action.
 The ng-app directive initializes the application.
 The ng-init directive initializes the data.
 The ng-model directive connects the value of the controls to the data.

5. Scope Apart from Directives, Scope is the other highly applicable functionality of AngularJS.
Scopes are objects that advert to the model. They join the controller layer and the view layer
with each other.
6. Data Binding AngularJS was developed with Model-View-Controller method of engineering.
The system connects and binds the Model and the View. Changes made in the Interface will
have a contiguous consequence on the objects of the application structure and vice versa. The
changes and the consequences take place in real-time. AngularJS takes away the tedious task
of working with getElementById, addEventlistener kind of coding.

7. Dependency Injection Conditions characterize how the code interface one another and how
the changes made in a particular section influence the rest of the application. Each change
requires changing sections as well. In AngularJS, you can apply injectors that treat conditions
as outside components, separating the segments from their respective states. This feature of
Angular makes it sections highly reusable, and easier to verify and use. Dependency Injection
eases the testing process, meaning less load on the Tester.

8. Compatibility Applications developed with a framework like Angular also run smoothly on
Android, iOS and major mobile OSes.

9. Avoid Tiresome Work You can avoid to re-writing the code when developing a new app. In
Angular, you can simply copy paste the code into the new app, and make an actual component.
AngularJS writes most of the code and saves the user from unnecessary hassles.

10. Developed by Google Google is one of the big fours of the new age. AngularJS is
maintained and updated by a devoted group of profoundly gifted expert who realize and
identify issues and bugs within the system. Also, with this kind of support and regular updates
you wouldn’t have to worry about the Framework going obsolete anytime soon.

11. High Performance A large number of variables can assist the developer/designer in making
their application more agile.
Directives

Name Description

angular.module The angular.module is a global place for creating, registering and

retrieving AngularJS modules. All modules (AngularJS core or 3rd party)
that should be available to an application must be registered using this
mechanism.

ngController The ngController directive attaches a controller class to the view. This is
a key aspect of how angular supports the principles behind the Model-
View-Controller design pattern.

ngApp Use this directive to auto-bootstraps module in an AngularJS application

. The ngApp directive designates the root element of the application
and is typically placed near the root element of the page - e.g. on
the <body> or <html> tags.

ngInit The ngInit directive allows you to evaluate an expression in the current
scope.

ngModel The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
ngBind The ngBind attribute tells AngularJS to replace the text content of the
specified HTML element with the value of a given expression, and to
update the text content when the value of that expression changes.

ngClick Expression to evaluate upon click. (Event object is available as $event)

ngOptions The ngOptions attribute can be used to dynamically generate a list

of <option> elements for the <select> element using the array or object
obtained by evaluating the ngOptions comprehension expression.

ngRepeat The ngRepeat directive instantiates a template once per item from a
collection. Each template instance gets its own scope, where the given
loop variable is set to the current collection item, and $index is set to
the item index or key.

ngshow
nghide
ngblur
ngsubmit