Structure a Complex Angular Component using Subcomponents

InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

An Angular 2 cornerstone is component driven architecture and how we divide up our features into self-contained components and then fit them together. In this lesson, we will cover the basic structure of a component in an Angular 2 style as we build one from the ground up. Equally important, we will see how to integrate it into our application by adding it to our root component.

Andrew Miller
~ 8 years ago

What is the benefit of creating components in separate modules? It seems like just using the 'app' module would remove a big chunk of the boilerplate code you had to write here.

Lukas Ruebbelkeinstructor
~ 8 years ago

A huge reason for this is isolation. By separating a component into its own module, I can test it in isolation without having to worry about instantiating every dependency in the application. This also promotes portability by allowing me to cleaning extract out a component and make it available for reuse in other projects.

Brian
~ 8 years ago

at 1:40, you mentioned that we are using "./" to resolve the module from the current directory, instead of from the node_modules directory. Is resolving from node_modules the default behavior for imports? Where is this configured?

Lukas Ruebbelkeinstructor
~ 8 years ago

A Webpack expert can come in and correct me if I misspeak but that is a Webpack default. The presence of a . indicates a local dependency and without it, Webpack defaults to node_modules. This of course can be overridden in the config file but I have never had a need to do that.

utsav agrawal
~ 7 years ago

why are we adding dependency using angular.module('app',[componentModule.name])

can we use like this angular.module('app',[componentModule]) ..

what is the use of .name here.. Thanks in advance!