What Is ANGULARJS and How

Does It Work?
 INTRODUCTION

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.
According to Wikipedia, AngularJS (also written as Angular.js) is a JavaScript-based open-
source front-end web application framework mainly maintained by Google and by a
community of individuals and corporations to address many of the challenges
encountered in developing single-page applications

WWW.ZEROBUGACADEMY.COM
 WHAT IS ANGULARJS?

AngularJS is built on the belief that declarative programming should be used to create
user interfaces and connect software components, while imperative programming is
better suited to defining an application's business logic.
The framework adapts and extends traditional HTML to present dynamic content
through two-way data-binding that allows for the automatic synchronization of models
and views. As a result, AngularJS de-emphasizes explicit DOM manipulation with the goal
of improving testability and performance.

WWW.ZEROBUGACADEMY.COM
 DESIGN GOALS

AngularJS Design Goals include:

to decouple DOM manipulation from application logic. The difficulty of this is
dramatically affected by the way the code is structured.
to decouple the client side of an application from the server side. This allows
development work to progress in parallel, and allows for reuse of both sides.
to provide structure for the journey of building an application: from designing the UI,
through writing the business logic, to testing.

WWW.ZEROBUGACADEMY.COM
 HOW DOES IT WORKS?

Keeping some of the issues/concerns shown by different classes of developers in

relation with learning AngularJS, following are some of the areas that shall be explored
in detail:

Overall AngularJS initialization & rendering process

AngularJS as a Dependency Injection framework
Scope & key APIs
Directives

WWW.ZEROBUGACADEMY.COM
 ANGULARJS INITIALIZATION & RENDERING PROCESS

Following are key method invocations that happen as part of initializing angular app
and rendering the same.
angularInit method which checks for ng-app module.
bootstrap method which is invoked once an ng-app module is found. Following are key
invocations from within bootstrap method:
createInjector method which returns dependency injector. On dependency injector
instance, invoke method is called.
compile method which collects directives
Composite linking method which is returned from compile method. Scope object is
passed to this composite linking method
$apply method invoked on scope object finally does the magic and renders the view.

WWW.ZEROBUGACADEMY.COM
 DEPENDENCY INJECTION

Dependency Injection is pervasive throughout AngularJS. You can use it when defining
components or when providing run and config blocks for a module.
Services, directives, filters, and animations are defined by an injectable factory method
or constructor function, and can be injected with "services", "values", and "constants" as
dependencies.
Controllers are defined by a constructor function, which can be injected with any of the
"service" and "value" as dependencies, but they can also be provided with "special
dependencies". See Controllers below for a list of these special dependencies.
The run method accepts a function, which can be injected with "services", "values" and,
"constants" as dependencies. Note that you cannot inject "providers" into run blocks.

WWW.ZEROBUGACADEMY.COM
 SCOPE AND KEY API'S

Scopes provide APIs ($watch) to observe model mutations

Scopes provide APIs ($apply) to propagate any model changes through the system into
the view from outside of the "AngularJS realm" (controllers, services, AngularJS event
handlers).
Scopes can be nested to limit access to the properties of application components while
providing access to shared model properties. Nested scopes are either "child scopes" or
"isolate scopes". A "child scope" (prototypically) inherits properties from its parent
scope. An "isolate scope" does not. See isolated scopes for more information.
Scopes provide context against which expressions are evaluated. For example
{{username}} expression is meaningless, unless it is evaluated against a specific scope
which defines the username property.

WWW.ZEROBUGACADEMY.COM
 DIRECTIVES

At a high level, directives are markers on a DOM element (such as an attribute, element
name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a
specified behavior to that DOM element (e.g. via event listeners), or even to transform
the DOM element and its children.
AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and
ngClass. Much like you create controllers and services, you can create your own
directives for AngularJS to use. When AngularJS bootstraps your application, the HTML
compiler traverses the DOM matching directives against the DOM elements.

WWW.ZEROBUGACADEMY.COM
Zerobug Academy is the fast growing software training
institute in Chennai offering training in various technologies
like Java Training, Dot Net Training, Php Training, AWS Training,
Selenium Testing Training, Digital Marketing Training, Big data
Training and much more with live examples for the students
who are looking for employment opportunities and for the
professional who are looking for a job change.

Contact Us:
+91-9750061584