I trying to understand how do I work with Angularjs. It looks like nice framework, but I stuck with a little problem with DI...
How I can inject dependecies in "run" method of the module? I mean I able to do it, but it works only if I have service/factory/value with as same name as "run" parameter name. I build a simple application do illustrate what I mean:
var CONFIGURATION = "Configuration"; //I would like to have App.Configuration var LOG_SERVICE = "LogService"; //I would like to have App.Services.LogService var LOGIN_CONTROLLER = "LoginController"; var App = {}; App.Services = {}; App.Controllers = {}; App = angular.extend(App, angular.module("App", []) .run(function ($rootScope, $location, Configuration, LogService) { //How to force LogService to be the logger in params? //not var = logger = LogService :) LogService.log("app run"); })); //App.$inject = [CONFIGURATION, LOG_SERVICE]; /* NOT WORKS */ App.Services.LogService = function (config) { this.log = function (message) { config.hasConsole ? console.log(message) : alert(message); }; }; App.Services.LogService.$inject = [CONFIGURATION]; App.service(LOG_SERVICE, App.Services.LogService); App.Controllers.LoginController = function (config, logger) { logger.log("Controller constructed"); } //The line below, required only because of problem described App.Controllers.LoginController.$inject = [CONFIGURATION, LOG_SERVICE]; App.factory(CONFIGURATION, function () { return { hasConsole: console && console.log }; });
Why I need it may you ask :) But in my mind, first off all to have meaningful namespaces to organize the code. It will also minimize name collision and in the last, when minifing the JS, the things breaks down, since it renamed to more shorten names.
Injecting a value into an AngularJS controller function is done simply by adding a parameter with the same name as the value (the first parameter passed to the value() function when the value is defined). Here is an example: var myModule = angular. module("myModule", []); myModule.
Angular's Dependency Injection is based on providers, injectors, and tokens. Every Angular module has an injector associated with it. The injector is responsible to create the dependencies and inject them when needed. Dependencies are added to the injector using the providers property of the module metadata.
Dependency Injection in AngularJS can be defines as the software design pattern which defines the way the software components are dependent on each other. AngularJS provides a set of components that can be injected in the form of dependencies such as factory, value, constant, service, and provider.
Which Component can be Injected as a Dependency In AngularJS? In Angular. JS, dependencies are injected by using an “injectable factory method” or “constructor function”. These components can be injected with “service” and “value” components as dependencies.
I think that the reason
App.$inject = [CONFIGURATION, LOG_SERVICE];
doesn't work, is because you have 2 other parameters $rootScope
& $location
that you need to inject in the $inject
. So it needs to be:
App.$inject = ["$rootScope", "$location", CONFIGURATION, LOG_SERVICE];
Another way you can inject your service is to use this version:
app.run(["$rootScope", "$location", CONFIGURATION, LOG_SERVICE, function ($rootScope, $location, Configuration, LogService) { }] );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With