Angular JS session 7

Fo
rA
pt
ec
h
C
en
tre

U
se

O

nl
y


nl
y

Session Objectives

O

Explain dependency injection and its working in AngularJS
Describe factory and service in AngularJS

U
se

Outline the differences between factory and service and their uses

Fo
rA
pt
ec
h

C
en
tre

Explain the usage of SPAs in AngularJS

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

2


Introduction to Dependency Injection [1-2]

nl
y

Dependency injection:

U

se

O

Is a technique for passing a dependent object into another object to make all
functionality of the former available to the latter.

C
en
tre

Prevents a component from directly referring to another component but allows
obtaining a reference to it.
Eliminates hard-coded dependencies by requesting a dependent functionality instead
of creating it by coding.

Fo
rA
pt
ec
h

Makes AngularJS applications maintainable.

Modularizes an application by making splitting it into several components, all of which
are injectable into each other.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

3


Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Introduction to Dependency Injection [2-2]

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

4


nl
y

Objects and Components as Dependencies

C
en
tre

U
se

O

In AngularJS, five objects or components exist that inject into each other as
dependencies:

Dependencies
Provider

Constant

Factory

Service

Fo

rA
pt
ec
h

Value

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

5


Value

nl
y

A value:

Injects into a factory, service, or a controller.

U
se

O

Refers to a JavaScript object, string, or a number that injects into a controller during the config phase.

Output:

Fo
rA
pt
ec
h

C
en
tre

Following example shows how to inject a value into a controller:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

6


Provider

nl
y

A provider:

U
se

O

Creates a service or factory during the
config phase using the $provide
service.

Returns a value, factory, or a service.

Fo
rA
pt
ec
h

The example shows how to use a
provider.

C
en
tre

is a distinct factory method with the
$get() method.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

7


Constant

nl
y

A constant:

Is injectable into config(), controller, and a provider.

U
se

O

Remains fixed throughout execution.

Output:

Fo
rA
pt
ec
h

C

en
tre

Following example shows how to inject a constant into a controller:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

8


Factory

nl
y

A factory:

O

Is a component that is technically a function that is injectable with values.

U
se

Returns a re-usable value when a service or a controller requires it.

Fo

rA
pt
ec
h

Is injectable into a controller.

C
en
tre

Implements the factory() method for creating and returning a value.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

9


Creating a Factory [1-2]

Fo
rA
pt
ec
h

C

en
tre

U
se

O

nl
y

Following example shows how to create a service using factory() and inject it into a
controller:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

10


Creating a Factory [2-2]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following is the output of code for creating a service using factory() and injecting it into a
controller:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

11


O

nl
y

Service
A service:

C
en
tre

U
se

Is a single JavaScript object holding a set of functions that are injectable
into a controller.
Is used to create a service that returns no value.

Fo
rA
pt
ec
h

Implements the service() constructor function for creating a service
object and adding functions and properties to it.
Is injectable into a controller, filter, directive, or another service.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

12

Creating a Factory and a Service [1-2]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following example shows how to create a factory and a service, both returning Hello string:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

13

Fo
rA
pt
ec
h

C
en
tre

U
se

O

Following is the output of code creating a factory and a service:

nl
y

Creating a Factory and a Service [2-2]

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

14

Service

Fo
rA
pt
ec
h

Factory

C
en
tre

U
se

O

nl
y

Factory versus Service [1-2]

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

15

Factory versus Service [2-2]

O

Factory

Service

U
se

Point of
Distinction

nl
y

Factory and Service have several differences.

Is a function that returns an object or a Is a constructor function that uses the
value.
new keyword to declare an object. It
is instantiated only when a
component depends on it.

Use

Is used for non-configurable services. It Is used for inserting simple logic. Go

can also be used as a service for replacing for it if you are using a class.
complex logic. Go for it if you are using an
object.

Fo
rA
pt
ec
h

Properties

C
en
tre

Function Type

Are defined without this keyword.

Are defined with this keyword.

Friendly Injections

Are not supported.

Are supported.

Primitives

Are created.

Are not created.

Preferable Choice

Is more preferable due to its class-like Is preferred only for defining utility
definition.
services or using ES6 classes.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

16


AngularJS Dynamic Templates

O

nl
y

A dynamic template:

U
se

Allows adding services in the desired order or dynamically.

C
en
tre

Is made by implementing a custom directive for each service.

Fo
rA
pt
ec
h

Consists of custom directives that extend the HTML functionality and
are associated with elements, attributes, styles, and comments.
Works at the time of loading by invoking the compile() method of
the directive once and processing via the directive’s link() method.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

17


Creating a Dynamic Template [1-2]

Fo

rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following example shows how to define a custom directive :

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

18


Creating a Dynamic Template [2-2]

Fo

rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following is the output of code using a custom directive:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

19


Steps for Building an SPA

•

nl
y

O

U
se

•

Each AngularJS application is begun by designing a module.
A module is a container for holding different components such as controllers and services.
Next, you specify the name of module as well as controller as the value of ng-app and
ng-controller attributes, respectively.
Next, you utilize the routing capabilities of AngularJS to make an SPA by using the built-in
ngRoute module.
Following are the steps to use this module:

2. Create a new
module with
controller. This
module relies on the
ngRoute module.

Fo
rA
pt
ec
h

1. Include the angular
script files.

C
en
tre

•
•
•

Dynamic and Responsive Web Development Using
AngularJS

3. Separate the
common HTML code
for every page, which
acts as the site’s
layout.

4. Specify where
HTML code of each
page shall be added in
the layout by using
the ng-view directive.

© APTECH LIMITED

20

nl
y

Building an SPA [1-4]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

Following code shows how to create a module and a controller for a custom
Single Page Application:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

21


Building an SPA [2-4]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following code shows how to use ngRoute:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

22


Building an SPA [3-4]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following code shows how to create a simple HTML layout for routing pages:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

23


Building an SPA [4-4]

Fo
rA
pt
ec
h

C
en
tre

U
se

O

nl
y

Following is the output of the SPA code:

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

24


Summary

O

nl
y

Dependency injection is a technique for adding a dependent functionality into a
module upon execution without coding for it.

U
se

The benefits of dependency injection include no hard-coded dependencies, modular
applications, reusable modules, easy configurations, and hassle-free code changes.

C
en
tre

AngularJS allow injecting values, providers, constants, factories, and services into
each other as dependencies.
The config() method accepts only a provider or a constant as a parameter.

Fo
rA
pt

ec
h

A factory uses a function that returns a value, while a service is a constructor function
used for creating an object.
Factories and services are providers.
Creating a dynamic template involves using custom directives per service such that
the services are dynamically added to a Web page.

Dynamic and Responsive Web Development Using
AngularJS

© APTECH LIMITED

25