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.
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.
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.Read more
Why your best tech talent quits
Your best developers and IT pros receive recruiting offers in their InMail and inboxes daily. Because the competition for the top tech talent is so fierce, how do you keep your best employees in house?Read more
Technology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.Read more