How angular is polluting the global space?

Question

I am new in angularJS, I was practising on angularJS from http://curran.github.io/screencasts/introToAngular/exampleViewer/

In the following example it was say that we are polluting the global space, But I didn't understand how we are polluting the global space in Example 1 but in Example 2 not.

Example 1

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
    <script>
      function NameCtrl($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Smith';
      }
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

Example 2

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Smith';
      });
    </script>
  </head>
  <body ng-controller="NameCtrl">
    First name:<input ng-model="firstName" type="text"/>
    <br>
    Last name:<input ng-model="lastName" type="text"/>
    <br>
    Hello {{firstName}} {{lastName}}
  </body>
</html>

I just want to now How we are polluting the global space in Example 1 with example.

Everything is being encapsulated inside the module (Angular) in example 2. In example 1 the function is directly stored in the global space. — Mike Cheel, Jun 14 '15 at 04:58
Actually, both examples are adding `angular` to the global namespace. Where did you here that one was polluting the global namespace and the other one wasn't? — Alvin Thompson, Jun 14 '15 at 05:08

score 3 · Answer 1 · answered Jun 14 '15 at 04:58

In example 1, you are declaring the function in such a way as that it could be accessed anywhere in your js code - but in the second example, you are declaring it in such a way that it can't be called anywhere except through angular - as you are passing the controller function in as a function argument itself, thus keeping it limited to the scope of that angular.module().controller() function.

Declarations of functions and variables are limited to the smallest scope they are declared in generally - and if you name a function in the scope of <script> tags then you are declaring it in the scope of the window object` which is the main global, thus "polluting the global scope". Hope this helps.

The problem is, in example 2 he unnecessarily added the module (`nameApp`) to the global namespace, so they both pollute equally. — Alvin Thompson, Jun 14 '15 at 05:25
@tophallen, thanks for reply, Why This is not working http://plnkr.co/edit/YP55RB6Mgjrgx3cPrmoV?p=catalogue — geeks, Jun 14 '15 at 05:29

Alvin Thompson · Accepted Answer · 2015-06-14T05:22:13.480

3

Both examples add angular to the global namespace. Example 1 also adds the function NameCtrl to the global namespace, which qualifies as polluting it. However, example 2 also adds nameApp to the global namespace so you could argue that they both pollute the global namespace equally. However, with example 2 at least the controller is not added to the global namespace so it's considered better form. In other words, if you're going to add anything to the global namespace, it's better to add a module and use that to add any controllers. In reality, you could avoid even adding the module to the namespace if you wanted to, so if you want to split hairs (and annoy people) you could argue that neither is 100% correct if the objective is to avoid polluting the global namespace.

edited Jun 14 '15 at 05:22

answered Jun 14 '15 at 05:16

Alvin Thompson

5,388
3
26
39

I am trying to run This http://plnkr.co/edit/YP55RB6Mgjrgx3cPrmoV?p=catalogue but not working. I have taken this example from http://stackoverflow.com/questions/25111831/controller-not-a-function-got-undefined-while-defining-controllers-globally – geeks Jun 14 '15 at 05:33
@NeelabhSingh: the ability to declare a controller in that form was deprecated as of angular 1.3. Revert back to 1.2 or earlier if you want to use that form. – Alvin Thompson Jun 14 '15 at 05:37

How angular is polluting the global space?

2 Answers2