CODEWITHSUNDEEP
angularjs
gogogadgetinternet
gogogadgetinternet

Reputation: 6079

What underlying concept(s) am I not understanding in regard to this AngularJS code snippet?

I've been reading through the tutorial, dev guide, and practicing on my own, but I'm having trouble piecing everything together in my mind with regard to dependency injection.

Question: Within the first code snippet in the linked page below, why is the name of the "service" located in front of $inject and why is the parameter of the service used here again? Or better yet what concepts am I lacking in understanding? I'd like to be able to piece it all together in my head step by step, but I'm still trying to understand how exactly even the globally defined "services/functions" can be written this way.

http://docs.angularjs.org/guide/dev_guide.services.understanding_services

Upvotes: 0

Views: 69

Answers (2)

chubbsondubs
chubbsondubs

Reputation: 38676

So in that code snippet is injecting the $location service into MyController. So MyController depends on $location so it declares the dependency and its owns the dependency declaration.

Here is the code commented:

// declaring a Controller function
var MyController = function($location) { ... };

// $location service is required by MyController
MyController.$inject = ['$location'];

// Then register the Controller in the module.
// The module is the container that performs DI on the objects within it.
myModule.controller('MyController', MyController);

Typically though you'd do the following to declare the Controller and it's dependencies in one shot that's cleaner. The dependencies are strings at the front of the array before the final function which is the controller being registered. Here is the simpler definition:

myModule.controller('MyController', ['$scope', '$location', function($scope, $location) {
    $scope.someFunction = function() {
        // do something with $location service in here
    };
}]);

Keep in mind this:

"...even the globally defined "services/functions"

The whole point of DI is to not define things globally because global definitions create coupling that make it hard to reuse major portions of your system (ie you can't break apart the system without instantiating the whole thing). Dependency Injection separates the dependency (ie MyController depends on/uses $location service) from where it finds that reference. Beginner developers, and some dense senior devs quite frankly, typically just define things globally and that's how everything gets a reference to their dependencies. DI allows code to simply declare its dependencies so its dependencies can be given to the code by an external entity instead of the code assuming where to get it from. Often this is called the Hollywood Principle - Don't call us we'll call you.

Upvotes: 1

Justin Niessner
Justin Niessner

Reputation: 245399

It looks like you're lacking a strong understanding of Dependency Injection in AngularJS.

Once you define a service, it then needs to be injected inside to the controller that is going to use it. The two code samples on that page show the two different methods of injecting the service into the controller.

I'd suggest you look at the docs: AngularJS: Dependency Injection

Upvotes: 0

Related Questions