New in Angular 2: Angular Modules

in Development

Before Angular 2’s final release this past September, writing Angular 2 apps was a wild ride since breaking changes were often introduced upon each beta and release candidate release. With its final release, though, the Angular team introduced some new features that make Angular 2 a bit easier to work with, including the use of semantic versioning and Angular Modules (or NgModules), both of which we recently added to our Angular 2 course. So today, we’re going to talk about the latter.

Angular Modules

Per Angular’s documentation, Angular Modules help organize an application into cohesive blocks of functionality. What this means is that if there is any individual or group of components and services that operate together, they should all belong to the same module.

For example, let’s pretend we’re building an Angular 2 version of Bootstrap’s tabs functionality:

Clicking tabs to toggle content

When other developers use this tabs component we wrote, the code they write will look like the following:

<tabset>
  <tab title="Fruits">
    <p>I am a big fan of apples, grapes and bananas!</p>
  </tab>
  <tab title="Juices">
    <p>I like to drink orange juice in the morning.</p>
  </tab>
</tabset>

As you can see above, to implement this feature, we created two components: Tabset and Tab. Since these two components work together, it would be a good idea for both of them to belong to the same module called TabsModule. In case we needed to introduce an additional service to make our tabs component work better, this service would also live in our TabsModule.

Then, if other users want to take advantage of the components we created, they would be able to include the TabsModule in their projects and add its reference to the imports array of their module.

@NgModule({
  imports: [ BrowserModule, TabsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

And that’s not all: Under the hood, Angular Modules includes functionality to allow the lazy-loading of Angular Modules, so the initial load of our app stays fast and lightweight, and modules get included on a per-need basis as routes are changed, etc.

Get started today

If you had been looking for a reason to learn Angular 2, look no further! Start learning today with our newly updated Angular 2 course, Accelerating Through Angular 2. Accelerating Through Angular 2 course. And after taking the course, watch us build an Angular 2 app as we explore some of the framework’s features, such as the router, Angular CLI, the Augury Browser Extension, and more!

Code School

Code School teaches web technologies in the comfort of your browser with video lessons, coding challenges, and screencasts. We strive to help you learn by doing.

Visit codeschool.com

About the Author

Sergio Cruz

Sergio is an application developer who is passionate about learning and sharing knowledge. When he is not typing code at Code School, you may find him speaking at different events about topics he’s learned recently.

Might We Suggest