VisaSpark
Sign in
intermediate15 min

Modules and Controllers

Organizing AngularJS code with angular.module and connecting controllers to the DOM.

What you'll learn

  • Declare an AngularJS module with angular.module
  • Register a controller on a module and connect it to the DOM with ng-controller
  • Read an existing AngularJS file and identify its module/controller structure

Explanation

An AngularJS application is organized into modules, declared with angular.module("appName", [dependencies]) -- the array lists other modules this one depends on (empty [] for a module with no dependencies). This is how AngularJS composed larger applications from smaller, independently-testable pieces.

A controller is a JavaScript function registered on a module, responsible for setting up a section of $scope: app.controller("MainController", function($scope) { $scope.greeting = "Hello!"; }). It's connected to a specific part of the DOM with the ng-controller directive: <div ng-controller="MainController">{{greeting}}</div> -- everything inside that div has access to MainController's $scope.

When reading an existing AngularJS file, a reliable first step is identifying its module declaration (usually near the top of a file, or in a dedicated app.js) and then finding each .controller(...) (and later, .service(...)/.factory(...)) registration -- this quickly maps out the application's overall shape before you dig into any one piece's logic.

Guided lab

Fill in the blank: declaring vs. retrieving a module

AngularJSNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, fill in the missing piece, then reveal the completed code and its expected output.

Fill in the missing array argument that DECLARES a new module (vs. retrieving an existing one), then predict the output.

// This line must DECLARE a new module named "app" (not retrieve an existing one):
const app = angular.module("app", ____);

app.controller("MainController", function () {
  return { greeting: "Hello from MainController" };
});

const controllerFactory = app._controllers = app._controllers || {};
console.log(app.name);

Stuck? Get a hint.

Common mistakes

  • Confusing angular.module("name", [...]) (declaring a NEW module, note the array argument) with angular.module("name") (retrieving an EXISTING module, no array) -- using the wrong form in the wrong place is a common real bug when editing legacy AngularJS code.
  • Forgetting ng-controller scopes a controller to a specific DOM subtree -- code outside that subtree doesn't have access to its $scope.
  • Not checking a file's module/controller registrations first when getting oriented in an unfamiliar AngularJS codebase, and instead diving straight into unfamiliar logic.

Knowledge check

Knowledge check

1. What does the array argument in `angular.module("app", ["otherModule"])` represent?
2. What does ng-controller do?
3. What's a reliable first step when getting oriented in an unfamiliar AngularJS file?

Takeaway

angular.module declares/retrieves modules (array argument vs. none is the key distinction), and ng-controller scopes a controller's $scope to a DOM subtree.

Summary

Modules organize AngularJS apps; controllers set up $scope and connect to the DOM via ng-controller; mapping module/controller registrations is a reliable way to get oriented in legacy code.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Built-in Directives: ng-if, ng-repeat, ng-model →