What is angularJS and how does it works?

1
What Is ANGULARJS and How Does It Work?
2
I N T R O D U C T I O N
AngularJS is a JavaScript framework. It can be
added to an HTML page with a ltscriptgt 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
3
W H A T I S A N G U L A R J S ?
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
4
D E S I G N G O A L S
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
5
H O W D O E S I T W O R K S ?
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
WWW.ZEROBUGACADEMY.COM
6
A N G U L A R J S I N I T I A L I Z A T I O N
R E N D E R I N G P R O C E S S
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
7
D E P E N D E N C Y I N J E C T I O N
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. Contro
llers 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
8
S C O P E A N D K E Y A P I ' 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
9
D I R E C T I V E S

• 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
10
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