Chapter 4 ■ Filters and Modules
AngularJS Modules
So far, we have not looked at AngularJS modules. Instead, we have placed all of our code within a controller
embedded within our HTML file, using the script tag. This approach has its place, but it is usually confined to very
small applications and demos (such as the code listings found in books like this). It isn’t the recommended approach
to take for serious development.
What Is a Module?
A module is a collection of controllers, directives, filters, services, and other configuration information. The main
player in all this is angular.module, as it is the gateway into the Module API, the mechanism used to configure angular
modules. It is used to register, create, and retrieve previously created AngularJS modules.
This probably all sounds rather abstract, so let’s look at a practical example by walking through the process of
setting up a default module for our application. The default module is the module that AngularJS will use as the entry
point into your application. (It may even be the only module you use.) Don’t worry if all this doesn’t make a lot of
sense at the moment, as we will look at a complete listing and talk more about what is happening when we build our
custom filter.
Add the following code to a new JavaScript file, which you can name myAppModule.js.
// Create a new module
var myAppModule = angular.module('myAppModule', []);
You just created a module. Wasn’t that easy? The module method was used to create a module named myAppModule.
We also captured the returned object (a reference to the module just created) in a variable, also named myAppModule.
You will notice that we also passed an empty array to the module method. This can be used to pass a list of
dependencies; that is, other modules that this module depends upon. We don’t have any dependencies, so we simply
pass an empty array instead.
We now have a module and a reference to this module, so now we can configure it with a custom filter, by adding
the following code below the previous line of code:
// configure the module with a filter
myAppModule.filter('stripDashes', function() {
return function(txt) {
// filter code would go here
};
});
Don’t worry too much about the code within the filter method for now. This is something we will see more of
when we build a custom filter in the next section. The important part is that you attached a filter to the module. The
filter method lets you name your filter (we called this one stripDashes, because, as you will see in the next section, it
strips any dashes that might be contained within strings) via its first argument, and it lets you pass in a function as the
second argument. We will explore the purpose of this function shortly.
In a similar way, we can also add a controller to our module. In the preceding code, we used the filter method
to configure a filter. In the following code, we use the controller method to configure a controller.
// configure the module with a controller
myAppModule.controller('MyFilterDemoCtrl', function ($scope) {
// controller code would go here
}
);