Modules are the top-level components for AngularJS applications. You can actually build simple AngularJS apps without needing to reference modules at all, but I don’t recommend doing so because simple applications become complex applications over time, and you’ll just end up having to rewrite the application when it becomes unmanageable. Working with modules is easy, and the handful of additional JavaScript statements that you need to set up and manage modules is a worthwhile investment. Modules have three main roles in an AngularJS app:
- To associate an AngularJS application with a region of an HTML document
- To act as a gateway to key AngularJS framework features
- To help organize the code and components in an AngularJS application
I explain each of these functions in the sections that follow.
1. Setting the Boundaries of an AngularJS Application
The first step when creating an AngularJS app is to define a module and associate it with a region of the HTML document. Modules are defined with the angular.module method. Listing 9-2 shows the statement from the example that creates the module for the example app.
Listing 9-2. Creating a Module
…
var myApp = angular.module(“exampleApp”, []);
…
The module method supports the three arguments described in Table 9-2, although it is common to use only the first two.
When creating a module that will be associated with an HTML document (as opposed to organizing code, which I describe shortly), the convention is to give the module a name with the suffix App. In the example, I used the name exampleApp for my module, and the benefit of this convention is that it makes it clear which module represents the top-level AngularJS application in your code structure—something that can be useful in complex apps that can contain multiple modules.
Defining a module in JavaScript is only part of the process; the module must also be applied to the HTML content using the ng-app attribute. When AngularJS is the only web framework being used, the convention is to apply the ng-app attribute to the html element, as illustrated by Listing 9-3, which shows the element from the example.html file to which the ng-app element has been applied.
Listing 9-3. Applying the ng-app Attribute in the example.html File
…
<html ng-app=”exampleApp”>
…
The ng-app attribute is used during the bootstrap phase of the AngularJS life cycle, which I describe later in this chapter (and which is not to be confused with the Bootstrap CSS framework that I described in Chapter 4).
AVOIDING THE MODULE CREATE/LOOKUP TRAP
When creating a module, you must specify the name and requires arguments, even if your module has no dependencies. I explain how dependencies work later in this chapter, but a common mistake is to omit the requires argument, like this:
…
var myApp = angular.module(“exampleApp”);
…
This has the effect of trying to locate a previously created module called exampleApp, rather than creating one, and will usually result in an error (unless there is already a module by that name, in which case you will usually get some unexpected behavior).
Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.