What namespace do the following angularJS declarations belong to?

Question

I am new to angularJS.

When I declare a var or a function inside an angularJS directive, what namespace do aFunction() and aVar belong to?

Is it correct to declare them in this way or should I prefix them with, say, $scope?

Here is a code snippet:

define(['aName'], function () {'use strict';       
   angular.module('aName').directive('aName', ['$compile', 'serviceName',  
     '$parse', '$window', '$document', function ($compile, serviceName, $parse, 
        myWindow, $document) { return {

           ...

           function aFunction() { ... } //or should it be $scope.aFunction?

           var aVar = function anotherFunction() { ... } //or should it be $scope.aVar?

           ...

        };
   }]);
});

Answer 1

Namespacing in angularjs isn't the strongest part. Things eventually go to an object called angular. There are several functions defined there that you can use to create your objects, like module. This is specially problematic with service names(we rely on dependency injection using the name of the service) or global function controllers. A module is a logical group of, for example, directives or controllers but (not really sure about this) it is not a way to isolate components. try having a directive with the same name in two modules. In the tutorial they define controllers as global functions:

function MainCtrl() {...}

instead of using modules to, at least, not pollute the global namespace.

app.controller('MainCtrl', function ($scope) {

angular.directive() returns a DDO (directive definition object), like:

app.directive('person', function () {
return {
    restrict: 'E',
    replace: true,
    template: '<div class="person">Person name: {{ name }}</div>',
    scope: {
        name: '@'
    }
};
});

There is a limited set of properties that you should be using (restrict, replace, template, templateUrl...).

having function aFunction() { ... } there doesn't make much sense. it's not even key:value. If it's a function that encapsualtes some logic in your directive but doesn't have to be exposed to the view, you can have it as follows:

app.directive('person', function () {
var f = function() {...};
return {
    restrict: 'E',
    replace: true,
    template: '<div class="person">Person name: {{ name }}</div>',
    link: function(...) { 
        /* and it becomes available */
        f()
     }
};
});

if you don't use var , it'll try to resolve it as a global object following the javascript scope rules.

Your second example var aVar = function anotherFunction() { ... } is a function only available in the current [javascript] scope, that is, in whatever function you had it. for example:

link: function(...) { 
   /* and it becomes available */
   f();
   var g = function () {...};
   g(); // only works in the scope of link();
}

If what you want is to expose this function to the view, for something like <div ng-click="fireFn()"> you should probably have it in the scope. A good place to define this function in the scope would be a controller or the link function: in a controller,

app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
    $scope.fireFn = function() {...}; // scope is the injected service. use the $
});

in the linker:

link: function(scope) { 
   /* and it becomes available */
   f();
   var g = function () {...};
   g(); // only works in the javascript scope (not the parameter!) of link();
   scope.fireFn = function() {...}; // scope is the first parameter
}

As regarding to isolating modules, putting them in closures can't cause any harm:

(function () {
    "use strict";
    var mymodule = angular.module('mymodule', []);
}());