AngularJS - Why are dependencies with modules necessary?

Question

Can you tell me why it is recommended to add dependency modules to the creation of a module?

I've tried to run the code without adding the modules TodoApp.controllers and TodoApp.services. Even though I removed them, everything ran perfectly .. (I call a service via those two files)

app.js

// Injects all the needed modules
var TodoApp = angular.module("TodoApp", [
        "ngRoute",
        "ngResource",
        "TodoApp.controllers",
        "TodoApp.services"
]).
    config(function ($routeProvider) {
        $routeProvider.
            when('/', { controller: "listCtrl", templateUrl: 'list.html' }).
            otherwise({ redirectTo: '/' });
    });

Update

Thank you for your response! :)

Unfortunately, those files don't share a common variable:

That was actually the reason why I didn't understand the set of problem. For me, this code gets stored in nowhere. Could it be because of the dot notation in the naming?

controller.js

angular.module('TodoApp.controllers', []).
    controller('listCtrl', function ($scope, $location, todoApiService) {
        $scope.todos = todoApiService.getMyTodos().query();
});

services.js

angular.module('TodoApp.services', []).
    factory('todoApiService', function ($resource) {
        var todoApi = {};

        todoApi.getMyTodos = function () {
            return $resource('/api/todo/:id', { id: '@id' }, { update: { method: 'PUT' } });
        };

    return todoApi;
});

Are those files added after the module / app.js file? If so then there's no need to inject them. Typically I only inject OTHER modules (lets say global / helper ones) into my current app module. Those modules might include their own directives / factories / etc — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Jun 11, 2014 at 15:09
that's correct! so the default loading order of the html handles this whole stuff if I put it into the right order? — HansMusterWhatElse
– HansMusterWhatElse, Commented Jun 11, 2014 at 19:36

Mark Pieszak - Trilon.io · Accepted Answer · 2014-06-12 12:39:47Z

You do not need to inject controllers & services since they have to be part of a module anyway.

You could have them labeled like so in the other files:

TodoApp.controllers(/* ... */)
TodoApp.services(/* ... */)

They are already attaching themselves to the module because of the TodoApp variable (which in-turn is angular.module('TodoApp').

It looks like you call the module directly each time:

angular.module('TodoApp.controllers', []).
    controller('listCtrl', /* etc etc */ );

Each way, you are simply adding more things (in typical dot notation) to your overall Module, and angular understand it's TodoApp since you are starting it with that.

But sometimes you'll see people inject other modules, in a way inheriting the modules controllers / directives / services / etc.

var HelperModule = angular.module('HelperModule', /*...*/);
HelperModule.directive('headerLinks', /*...*/);
HelperModule.factory('BaseFactory', /*...*/);
// etc etc

var TodoApp = angular.module("TodoApp", ["HelperModule"]); // <-- Module injected

// TodoApp now contains all the directives/etc from that module!

Hope that helps!

Collectives™ on Stack Overflow

AngularJS - Why are dependencies with modules necessary?

app.js

Update

controller.js

services.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js

Update

controller.js

services.js

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related