Last active
August 29, 2015 14:05
-
-
Save stefanocrosta/7a90880a2320a419d852 to your computer and use it in GitHub Desktop.
Angular Providers Examples
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Equivalences between different AngularJS Provider constructs. | |
* Related documentation: | |
* - https://docs.angularjs.org/guide/providers | |
* and in particular checkout the summary: https://docs.angularjs.org/guide/providers#conclusion | |
* | |
* Related tutorials: | |
* AngularJS Patterns #27-#32 | |
* - https://www.youtube.com/watch?v=Wrjjp_Up8K0 | |
* - https://www.youtube.com/watch?v=8qOI5OUommo | |
* - https://www.youtube.com/watch?v=hfH2aXQOb3M | |
* - https://www.youtube.com/watch?v=yMuaJNCJX4s | |
*/ | |
/** | |
* # Value -just a value | |
* | |
* Use when you only need to inject (share) a single value | |
*/ | |
app.value('valueName', valueValue); | |
/** | |
* Factory - the revealing pattern | |
* | |
* Use when you want: | |
* - have dependencies | |
* - service initialization | |
* - delayed/lazy init | |
* | |
* Singleton pattern, the `factoryNameFactory` is invoked when the factory is injected. | |
*/ | |
app.factory("factoryName", function factoryNameFactory($INJECTEDSCOPE){ | |
// the "private", init part: | |
var blah = 'blah'; | |
// the "public", injected object: | |
return { | |
something: blah; | |
} | |
}); | |
// example with dependencies: | |
myApp.factory('factoryName', ['valueName', function factoryFactory(valueName) { | |
// ... | |
}]); | |
/** | |
* # Service - the simple pattern | |
* | |
* Use this when you want to deal with a custom type for OOC. | |
* It is mostly the same as a factory just written differently! | |
* Can also use dependencies. | |
*/ | |
app.service("serviceName", function($INJECTEDSCOPE){ | |
// private something | |
var blah = 'blah'; | |
// assign your public injected stuff into the public constructor | |
this.something = blah; | |
}) | |
/** | |
* # Provider - the full thing | |
* | |
* the core recipe type - all the other recipe types are just syntactic sugar on top of it. | |
* Explicitly manage the $get singleton generator method yourself. | |
* Provides an application-wide configuration, made before the application starts app. | |
* | |
* Please note the naming conventions and the correct location for dependency management. | |
* | |
* Injection (through `app.config()`) is done by a provider injector which is different | |
* from the regular instance injector, in that it instantiates and wires (injects) all provider instances only. | |
* | |
*/ | |
app.provider("providerName", function ProviderNameProvider(){ | |
// this is the "configuration" part- run at the app start-up | |
var blah = 'blah'; | |
this.blah = function(value) { | |
blah = value; | |
} | |
// the self-built | |
this.$get = ["someDependency", function providerNameProvider($INJECTEDSCOPE) { | |
return Something; | |
// eg: | |
// return new Constructor(params); | |
}] | |
}); | |
// inject the provider into our app: | |
app.config(["providerNameProvider", function(providerNameProvider){ | |
providerNameProvider.blah('blahblah'); | |
}]); | |
/** | |
* # Constant - make a value available to both config and run phases | |
* | |
* Since the config function runs in the configuration phase when no services are available, | |
* it doesn't have access even to simple value objects created via Value recipe. Use `Config` for that | |
*/ | |
app.constant('constantName', constantValue); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Short summary of different ways to write providers in Angular: using "service", "factory", "provider" plus "value" and "constant".