understanding dependency injection in angular.js

Question

I was just going through the code of a online reppositoty using angular.js and came across the following example:

<!DOCTYPE html>
<html ng-app="demoapp">
    <head>
        <script src="js/ol.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/angular-sanitize.min.js"></script>
        <script src="js/angular-openlayers-directive.js"></script>
        <link rel="stylesheet" href="css/ol.css" />
        <link rel="stylesheet" href="css/angular-openlayers-directive.css" />
        <script>
            var app = angular.module('demoapp', ['openlayers-directive']);
        </script>
    </head>
    <body>
        <openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
            <ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place.">
            </ol-marker>
        </openlayers>
        <h1>Adding a layer with markers with no javascript example</h1>
    </body>
</html>

Now there is the below part:

 var app = angular.module('demoapp', ['openlayers-directive']);

I am not quite sure about, the above line, I read about dependency injection HERE. But i am not quite sure what is the purpose of the above line ? what is it really doing ?

I have gone though a few online examples that have code like the below:

// Define a new module for our app. The array holds the names of dependencies if any.
var app = angular.module("instantSearch", []);

(See the comment) , Ok but i still don't get what ['openlayers-directive'] , is doing ?

['openlayers-directive'] is injecting an another module (a directive by the looks of it), probably located in js/angular-openlayers-directive.js — Avalanche
– Avalanche, Commented Oct 19, 2015 at 11:56
@Avalanche no. This is not dependency injection, and openlayers-directive is not a directive: it's a module. — JB Nizet
– JB Nizet, Commented Oct 19, 2015 at 12:01

JB Nizet · Accepted Answer · 2015-10-19 11:57:48Z

1

It declares a module named 'demoapp' that is dependant on a module named 'openlayers-directive'. This, basically, means that all the angular components (directives, services, filters, controllers, constants, etc.) defined in the module 'openlayers-directive' will be usable in your angular application.

Read the documentation.

answered Oct 19, 2015 at 11:57

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neil · Accepted Answer · 2015-10-19 12:00:51Z

openlayers-directive is an angular module. When you are creating your demo app module, you are including a reference to the openlayers module.

So if you wanted to use other modules in your demo app module you would also include them here, where you are declaring your module for the first time.

For example:

var app = angular.module('demoapp', ['openlayers-directive', 'anotherModule', 'yetAnotherModule']);

In your code you can then pass in any services from these modules by simply including them as parameters.

So if you have a demoController you could pass in a service from one of the included modules and use it.

For example

angular.module('demoApp').controller('demoContoller', function($scope, anotherModuleService)
{
    $scope.someFunctionFiredFromController = function()
    {
         //I have access to this service because the module it
         //belongs to was referenced by the demoApp module, and the  
         //service was injected into the controller
         anotherModuleService.doSomethingRelevant();
    }
});

Collectives™ on Stack Overflow

understanding dependency injection in angular.js

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related