Services Factory Provider Value Constant - AngularJS
Download as PPTX, PDF0 likes846 views
This document summarizes key concepts in AngularJS including modules, services, factories, and providers. It explains that modules are containers for application components and can include controllers, services, filters and directives. Controllers control request flow but should avoid business logic. Services provide a way to share data across controllers by creating singleton objects. Factories are similar to services but can determine what to instantiate. Providers are the most configurable type and can be injected during configuration.
Services Factory Provider Value Constant - AngularJS
- 1. AngularJS MODULES – SERVICES – FACTORY - PROVIDERS
- 2. Request flow in AngularJS Module Routes Config ControllerView Directives $scope Factory Service Provider Value
- 3. Modules Module Routes Config Filter Directive ControllerFactory Service Provider Value
- 4. 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
- 5. 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
- 6. 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
- 7. 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.
- 8. 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
- 9. 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.
- 10. 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().
- 11. Compare Features / Recipe type Factory Service Value Constant Provider can 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
- 12. Demo http://jsfiddle.net/sumanthkrishna/6dwmuL8n/1/ http://jsfiddle.net/sumanthkrishna/rkLdrcg0/2/ http://jsfiddle.net/sumanthkrishna/aq1k6cx2/1/