Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Services Factory Provider Value Constant - AngularJS

619 vues

Publié le

Understand the special objects that $injector looks out for. AngularJS lets you hold the persistent data, and transfer them across the controllers.

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Services Factory Provider Value Constant - AngularJS

  1. 1. AngularJS MODULES – SERVICES – FACTORY - PROVIDERS
  2. 2. Request flow in AngularJS Module Routes Config ControllerView Directives $scope Factory Service Provider Value
  3. 3. Modules Module Routes Config Filter Directive ControllerFactory Service Provider Value
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12. Demo  http://jsfiddle.net/sumanthkrishna/6dwmuL8n/1/  http://jsfiddle.net/sumanthkrishna/rkLdrcg0/2/  http://jsfiddle.net/sumanthkrishna/aq1k6cx2/1/
  13. 13. References  https://docs.angularjs.org/guide/providers  http://tylermcginnis.com/angularjs-factory-vs-service-vs-provider/

×