JavaScript in Plain Language (2015)
PART V: DEFEATING THE DRAGON
5.3 Going a step further into modularity
Assigning a module name to ng-app
Modular programming is a design technique that emphasizes splitting the functionality of a program into independent modules and in such a way that each module contains everything necessary to execute only one aspect of the desired outcome.
A module is a container for the different parts of an app including related controllers, services, filters and directives.
Your web page app is a module.
In our web page when we declared ng-app on the HTML tag, we are actually creating a module (ours has been an unnamed module). The reason why we have not given a name to our test web page (or module) is because, once named, it stops working until we configured the module interface, which means to officially register this module with AngularJS by writing a declaration inside of a <script></script> block.
That’s why we kept our AngularJS declaration as simple as possible by only declaring:
<html ng-app>
However, it is a common best practice to name the web page by giving it a module name like for example:
<html ng-app="nameOfTheModule">
nameOfTheModule is the identity of this web page in reference to AngularJS and you use any name you want.
Besides being a best practice to name a module, it is actually mandatory if you make your page more complex beyond what we have done so far. Of course, for quick testing purposes we can just create an unnamed ng-app like this:
<html ng-app="">
Be careful here, if you use quotes but no name, make sure there is no space between quotes because that space will confuse AngularJS to think the module is named and you will get an error because there is no such name on file.
My favorite test syntax is still ng-app (or data-ng-app for HTML5 validation compatibilities). I only use the extension when I really have a Module name to include, which is what we are going to do next.
Configuring a Module interface
Once we assign a name to our ng-app we have to configure the Module.
Take for example the last exercise we did, (Part B: Initializing variables and outputting a calculation). This exercise is simple enough to help us understand how to configure the app name module:
Fig 27 (no app module name yet)
In the picture above, the ng-app has no name and it works just fine.
If however we insert a name to the <html ng-app> such as for example
<html ng-app="myFirstAppModule">
the page will stop working until we configure the Module interface.
One way to configure the app module is to open a new <script></script> container just below the link to AngularJS at the bottom of the BODY of your HTML page.
In the script container we then assign a function call to some variable (like for example x). This particular function or method comes from the Angular library and its name is module. Example:
var x = angular.module();
An image of this assignment can be seen below but first let me just finish the explanation of this assignment.
After we assign the module() to variable x we then include the name of the app as the first argument of the method module(). The second argument is an empty array and it should look as follows:
var x = angular.module("myFirstAppModule",[]);
Traditionally the x variable is named after the module and we would have two myFirstAppModule words in this declaration (a repetition of these terms would not conflict since they are on different areas of the code but it would help knowing what the variable x was used for). However, since the name match is not mandatory I have called it x in order to purposely illustrate where the module name goes and the fact that it has nothing to do with the variable.
This declaration is good enough to bring our ng-app back to life for now.
Please study the following image carefully.
Fig 28 (after giving ng-app a name we then register the name as a module)
Try it yourself. Get your original file (original raw file), add a name to your ng-app and register the module with Angular by writing the declaration at the bottom of the BODY. Notice how the name of the module is introduced on the function module() within quotes. It is passed in as a string.
If you need help please look at my own file here:
final raw file.
Further explanation:
Look at the variable x declaration. x gets assigned to a function that belongs to object angular. This function which is called module() takes two arguments. The first argument is a string containing the name of the module we are declaring. Then, separated by a comma, we have an empty array. They both need to be declared.
The purpose of the array is to include future dependencies for the module being created. Sometimes we want to use other sub modules in order to enhance this particular module. Since using other related modules is very common, the second argument was hardwired and it needs to be included when we declare a new module. In our case we just write the array as an empty array and that will work for us. If however you skip the [ ], the module will not work. We must place those two brackets in there.