New in Angular 2: Angular Modules

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 tabsfunctionality:

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

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.

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. 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!

To learn more about the pros and cons of Angular, as well as other features, tips, and tricks, check out our Angular 101 post.