CODEWITHSUNDEEP
angularjs
Alexander Solonik
Alexander Solonik

Reputation: 10230

understanding dependency injection in angular.js

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 ?

Upvotes: 0

Views: 142

Answers (2)

Neil
Neil

Reputation: 2749

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();
    }
});

Upvotes: 1

JB Nizet
JB Nizet

Reputation: 691625

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.

Upvotes: 1

Related Questions