22

In angularjs, we define our controllers into window. While this would not create name clashes with other js modules and plugins, it is still not a good practise: a single application should expose a single object to the global namespace.

This is the usual way, defined in window:

function UserController($scope) { ... }

HTML:

<div ng-controller="UserController">

This is what I think of:

myApp.UserController = function ($scope) { ... };

So in that case, I should be initiating controller from html like this

<div ng-controller="myApp.UserController">

What do you think?

3 Answers 3

22

One of the ways around it is to define it within Angular itself such as the way you described. In other words:

angular.module('YourApp').controller('ControllerName', function($scope) {})

I have confirmed the above method doesn't pollute the global namespace.

Edit: You also don't need to use <div ng-controller="myApp.UserController"> as you could define myApp in the attribute ng-app: <body ng-app="myApp"> That way you could call the ng-controller without prefixing myApp every time.

4
  • 1
    I didn't know that module object has controller function inside but makes a lot of sense =) Thanks. Aug 25, 2012 at 13:21
  • 1
    Angular needs better documentation. It's a great framework, but it has a steep learning curve Jan 16, 2013 at 5:56
  • Thank's for the edit on how to use the module with ng-app rather then with ng-controller
    – Alex
    Jan 21, 2013 at 16:53
  • Note that the above code assumes that the 'YourApp' module is already created and is retrieving it. If you are creating it for the first time it should read: angular.module('YourApp', [])... Note the [] in the second parameter.
    – BeaverProj
    Sep 17, 2013 at 16:33
1

The cleanest way of defining controllers is 1 per file. Each file should be wrapped with an immediately invoked function expression (IIFE) or closure that allows it to have its own local variables without polluting the global scope. This is the approach I take on my projects:

my-app.js - Primary Module Definition File - This file's main purpose is to define an application module and its dependencies, define routing (if routing is being used), and configure providers. In its simplest form it looks like this:

(function (angular) {
  angular.module('myApp', ['myApp.someFeature']);
}(angular));

some-feature/some-feature.js - feature module definition file - This file defines a module for a feature and any dependencies that this feature requires. This can be any logical grouping, not just a feature. This makes it very easy to bring the feature into another module or application if necessary.

(function (angular) {
  angular.module('myApp.someFeature', []);
}(angular));

some-feature/some-feature-controller.js - controller required for the feature - If the feature included multiple controllers, a more descriptive name would be needed, but lets assume this feature only needs 1 controller.

(function (angular) {
  function SomeFeatureController($scope) {
    ...
  }

  angular
    .module('myApp.someFeature')
    .controller('SomeFeatureController', SomeFeatureController);
}(angular));

index.html - Page html file - Pretty self explanatory

<html ng-app="myApp">
  <head>
    <title>My Angular App</title>
    <!-- Note: Angular and jQuery (if used) go in head so they delay view loading -->
    <script type="text/javascript" language="javascript" src="angular.js"></script>
  </head>
  <body ng-controller="SomeFeatureController">
    Content here....
    <!-- Note application files go at the end of the body so they do not delay view loading -->
    <script type="text/javascript language="javascript src="my-app.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature.js">
    <script type="text/javascript language="javascript src="some-feature/some-feature-controller.js">
  </body>
</html>
0

As suggested by btesser writing controllers in separate files and functions and defining its methods in the controller's function prototype is a best practice for AngularJS apps. You can use a closure or IIFE to prevent polluting the global namespace, it will expose your functions only to the current context.

(function(){
'use strict';

angular.module('myApp', [])
.controller('MyAppCtrl', MyAppCtrl)

;
  
function MyAppCtrl(){
  this.greeting = 'I\'m app ctrl';
}
  
MyAppCtrl.prototype.hello = function(){
  alert(this.greeting);
}

})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyAppCtrl as ctrl">
  <pre>{{ctrl | json}}</pre>
  <button ng-click="ctrl.hello()">Hello!</button>
</div>
  

	
</body>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.