CODEWITHSUNDEEP
javascriptangularjscontrollerdependencies
Abradolf Lincler
Abradolf Lincler

Reputation: 93

Passing dependencies to a module angular

So I am somewhat new to angular, but not javascript. I am working with an app someone else wrote and am trying to create a new controller in an existing module. The controllers are almost identical to each other as far as dependencies go. The question I have is how do I pass the same dependencies to both controllers? It seems like you would be able to pass them in like this:

`angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])`

When I do that for both modules, the controller returns undefined for whatever reason. Thats where I get stuck. How do you pass in dependencies such as the above code? Any advice would be great.

Upvotes: 2

Views: 927

Answers (4)

Abradolf Lincler
Abradolf Lincler

Reputation: 93

Thanks to everyone for the help! All of it was very useful in learning the structure of angular and how to properly use the framework. @Yosvel Quintero was able to explain how the module works and why I was getting the error. When dependencies are passed into the module, not the controller, they are available to all controllers as it the module it's self is now aware of the dependencies, which is why I kept getting errors trying to pass them again. Hopefully the answers given in response to the question can help someone learn angular as well. Thanks guys!

Upvotes: 0

Yosvel Quintero
Yosvel Quintero

Reputation: 19070

AngularJS Controllers and Dependency Injection:

angular
    .module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap'])
    .controller('FormController', ['$scope', '$http', function($scope, $http) { 
        // FormController code...
    }])
    .controller('WebinarController', ['$scope', '$http', function($scope, $http) {
        // WebinarController code...
    }]);

Upvotes: 0

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

angular.module('ApertureForm', ['dialogs.main','dialogs.default-translations','ui.bootstrap']) tells AngularJS to initialize an Angular module named ApertureForm and also load other Angular modules as dependencies for the module.

To add dependencies to a controller, you do something like the following:

angular.module('ApertureForm').controller('ControllerName', function($scope, $location, $timeout) {...});

angular.module('ApertureForm') = Get the module named ApertureForm.

Then create a controller called ControllerName. The closure is where you inject dependencies.

To prevent a controller's dependencies from getting renamed on minification, you can do:

angular
    .module('ApertureForm')
    .controller('ControllerName', ControllerName);


    ControllerName.$inject = ['$scope', '$location', '$timeout'];

    function ControllerName($scope, $location, $timeout) {...}

Docs: https://docs.angularjs.org/guide/di

Upvotes: 1

E. Abrakov
E. Abrakov

Reputation: 463

In angular.module('ApertureForm',[ you list the modules you want to inject to your module. You list in once for each module you have. If You want to create a controller in one of your modules, then your can use:

var myApp = angular.module('ApertureForm');

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

$scope here is a dependency for controller

You can read more about it here

Upvotes: 0

Related Questions