Organizational Research By

Surprising Reserch Topic

understanding dependency injection in angular js

understanding dependency injection in angular js  using -'angularjs'

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">
        <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" />
            var app = angular.module('demoapp', ['openlayers-directive']);
        <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.">
        <h1>Adding a layer with markers with no javascript example</h1>

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 ?

asked Oct 19, 2015 by sujata naik
0 votes

Related Hot Questions

2 Answers

0 votes

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 by deven.bendale
0 votes

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
answered Oct 19, 2015 by tejas lakhani