Modules

Angular uses modules as a method of tying various components, directives, pipes, and services together in a single, cohesive unit. The module lets you make some features public for component templates, as well as make services available at the application level.

Basic module options

To create a module, you need to define a class and decorate it with the @ngModule keyword. You will need to begin by importing two modules from Angular.

Code Listing 81

The NgModule provides the decorator for setting up the module. The BrowserModule provides important services that the entire application can use (such as NgFor and NgIf). Your module should always import these two, and you can import additional modules from Angular or third-party components as your application grows.

You will also need to import your application components.

Code Listing 82

declarations

The declarations section declares an array of all the components, directives, and custom pipes we want our module to include.

Code Listing 83

For your main application, you will typically declare the component that produces the menu and the components used to present various data views. These declarations are usable within the module, but are not visible outside the module unless they are explicitly exported.

imports

If you want to provide components or directives to the components that are referenced within the module, you will need to include them in the imports array. For example, the following listing allows the app component to use the standard directives (such as *NgIf) and provides access to the routing components (see the next chapter for details about routing).

Code Listing 84

providers

The providers keyword contains an array of services that will be made available to the entire application. For example, the following code sample makes the appRoutingProviders from Angular and our own internal SoccerService available throughout the entire application.

Code Listing 85

Any services in the main application module can be injected into any component. For example, if a component wanted to use our SoccerService, you would normally need to include a providers section in the component itself.

Code Listing 86

However, since the SoccerService is specified in the main module definition, you do not need to specify it in the component. Angular will know how to resolve the provider and inject it into the component. The component constructor will still request the service, and Angular will handle it.

Code Listing 87

exports

The exports keyword provides an array of components that the module exports, which allows importing modules to use them. Declarations within the module are private; you will need to specifically export components, directives, etc., that you want to share with other modules.

Code Listing 88

bootstrap

The bootstrap keyword provides an array of all components that can be bootstrapped. Typically, this is the app component only. If a component can be bootstrapped, it will have its own selector, template, etc., and allow Angular to add it to a website.

Code Listing 89

app.module.ts

When you create an Angular application, you should define the main application module, named app.module.ts. The simple module code (that exports the AppComponent) is shown in the following example.

Code Listing 90: app.module.ts

This module only provides AppComponent to the main application for the bootstrapping operation. You can skip this and directly bootstrap the AppComponent, but as your application grows, the module provides a convenient way to add more functionality in one location.

main.ts

If you use a module rather than a single component, you will need to adapt your main application to bootstrap the module, rather than the component. The code to bootstrap the module is shown in the following code.

Code Listing 91

Summary

As your application grows, the ability to bundle features into a module will help build cohesive units of functionality. Some of the many benefits that Angular offers are components and bundles—ways to build loosely coupled applications—which are easier to debug and maintain.