Difference between angular as global variable and parameter?

Question

I wrote a factory of Angular. There was a critical error for me. I wandered to fix it. Finally, I cleared this problem... without reason. So I need clear description of below code problem.

Here is my code A:

    angular
    .module('BinD', ['ngSails'])
    .factory('UserService', function ($sails) {
        ...
    });

And another B is:

(function (angular) {
    'use strict';

    angular
    .module('BinD', ['ngSails'])
    .factory('UserService', function ($sails) {
        ...
    });
})(angular);

And the error part is:

(function (angular) {
'use strict';

angular
    .module('BinD', ['ngSails'])
    .controller('SignUpCtrl', function ($scope, $window, UserService) {

code B works well. code A made error message "UserServiceProvider is unknown(may?)". I really don't know why aforemetioned two same code works differently. Let me know about it.

Answer 1

Wrapping the .factory call in a function shouldn't make any difference. I think you must have made a different change as-well.

In your third code snippet, when you call .module with two parameters you create a new module. This would overwrite the module you created in either "Code A" or "Code B".

You are not reusing the same module, but creating a new one. Therefore it makes sense that your UserService does not exist on the new module.

Your last snippet should call .module('BinD') with only one parameter. Just the name of the module you want to use.

angular
    .module('BinD')
    .controller('SignUpCtrl', function ($scope, $window, UserService) {

 

---

Another option is that you only call .module once, and save it.

var app = angular.module('BinD', ['ngSails']);

Then later you can call app.controller or app.factory without having to worry about the syntax.

Answer 2

In your Code A or Code B in both part you had created one module BinD with the dependency of ngSails and then you are registering factory with that module, but Code A will declare a variable globally if you are using it & Code B will do the coding using IIFE pattern which will make your variable available inside the declared function only. But that doesn't related your error which you are getting.

Inside your controller you want utilize that factory, but while you are creating controller you shouldn't create a new module like by doing angular.module('BinD', ['ngSails']), which will flush the previously registered factory(or other components) with the BinD module and will create a new module with name BinD. That's why after injecting UserService inside your controller is throwing an $injector error, because the UserService is not available inside that module.

Controller

(function (angular) {
'use strict';

angular
    .module('BinD') //<- utilizing already created module
    .controller('SignUpCtrl', function ($scope, $window, UserService) {