AngularJSMODULES – SERVICES – FACTORY - PROVIDERS

Request flow in AngularJS

Module

Routes

Config

ControllerView

Directives $scopeFactory

Service

Provider

Value

Modules

Module

Routes

Config Filter Directive ControllerFactory

Service

Provider

Value

Modules

Are logical containers of various parts of application Includes controllers, services, filters, directives, values, constants… as

shown Unlike in many languages, here Modules are not namespace Definition

Module is a container for application controllers

Module - container

Controller 1

Controller 2

Directive 5

Directive 7

Module 1

Controller 3

Controller 4

Directive 6

Directive 8

Module 2

Module 1

Module 2

Controller 3

Controller 4

Directive 6

Directive 8

Controller 1

Controller 2

Directive 5

Directive 7

Injector

Controllers

As the name suggest… the controllers are to control the request flow should be very thin devoid of any business logic, persistent data Use to set up the initial state of $scope object Add more behaviour to $scope object Not to use for

DOM manipulations (make use of directives, databinding) Format input (make use of form controls) Filter output (make use of filters) Sharing code/state across controllers (make use of angular services) Managing the life-cycle of other components

Provider

A provider is the most configurable and verbose version of services because it's based on prior settings or logic.

Syntactically defined as a custom type that implements $get method As you might have guessed, a provider can be injected into

module's config() block, where a user can configure it before the app starts. Should use, if to expose an API for application-wide configuration that must be

made before the application starts. This is usually interesting only for reusable services whose behaviour might

need to vary slightly between applications.

Services

provides us method to keep data across the lifetime of the angular app provides us method to communicate data across the controllers in a

consistent way is a singleton object and it gets instantiated only once per

application is used to organize and share data and functions across the application are instantiated lazily, means they are invoked only when they are

triggered

Services

A service is registered using the service() function of angular.module(). The second argument to service() is a constructor function. When we

ask for the service as a dependency, AngularJS creates an object from this constructor function and injects it.

A service is a singleton. AngularJS instantiates the service object only once and all other components share the same instance.

Factory

A factory is another injectable type and effectively same as Service It’s a factory of Service, able to determine what to instantiate and what

to return You register a factory by calling the factory() function

on angular.module().

Compare

Features / Recipe type Factory Service Value Constant Providercan have dependencies

yes yes no no yes

uses type friendly injection

no yes yes yes no

object available in config phase

no no no yes yes

can create functions yes yes yes yes yes

can create primitives

yes no yes yes yes

Demo

http://jsfiddle.net/sumanthkrishna/6dwmuL8n/1/ http://jsfiddle.net/sumanthkrishna/rkLdrcg0/2/ http://jsfiddle.net/sumanthkrishna/aq1k6cx2/1/

References

https://docs.angularjs.org/guide/providers http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/