We identify components on a static HTML page representing our app layout.
- [Instructor] Hi, and welcome back to section three, HomeAuto First Screens. In this section, we will decompose our sample application into components and start to create some more advanced ones. We will learn about angular template syntax, about some native directives, and further concepts such as component providers and pipes. Our first video is about decomposing our application into components. So we will first identify them by looking at our application layout, then we will apply an iterative style of splitting our HTML into components and assemble them back together through our app.
Finally, we will also apply some guidelines on how to name our components through files, and folders. Okay, so, I started with our project setup which we created in section one. We have here again, the main.ts file which is the startup file, and I have an app component where I copied in a bunch of HTML code. I have taken this code from the Get Material Design Lite page, which is from Google. In particular, I've taken the dashboard template and I literally copied out the source file inside here and copied it back into our component's template property.
I also installed the Material Design Lite library over NPM, just as indicated on their page, and I added a bunch of assets which are needed for running our dashboard template. So right now, our page is simply a static HTML page with some stylings on top. Our task now is to split this static page into components. By looking at the layout, we can immediately spot some first potential candidates for components, like the header bar here on top, the sidebar here, which holds the menu, and finally, there is the central area here which is some kind of dashboard with some nice charts.
So let's apply what we learned in our previous section and split them out into separate components. The best strategy is to start iteratively until we reach a comfortably-sized component. For instance, we can start with our header HTML part here, we cut it out, we create a new header.ts file. Again, we have our usual scaffold for an angular two component, and we paste in the template. Finally, we export the header component, and then we obviously have to go back to our app.ts file to our app component.
We have to import our header component there and also remember to reference our component in the directive's property of our app component. This is something which gets easily forgotten. Finally, we can adjust the HTML code and reference our new app header component. If we refresh the application, nothing changes so it still runs. But if you inspect the HTML code, we can see that our app header component is now being rendered.
Great job! Also note that I left the original CSS classes directly on our component and I did not move them inside our component's template. This way we maintain the deepness of the DOM tree and eventually prevent breaks of our CSS rules that might depend on the exact order of elements. So we can repeat now the same process also for our sidebar. We again take the HTML part here, we cut it out, and we create a new sidebar.ts file, just as we did with the header component.
We can go over it quicker here as it is just the same process as we did before. Obviously we have to go back to our app component again. We have to import our newly created component and also reference it on the directive's property. Finally, again, we can swap out the HTML part here and reference our new app sidebar angular two component. Again, a quick check, it still renders so it seems to work properly.
So this is really an iterative process, like, if we open our sidebar, which was just created, we can clearly see that here there is another component, the profile for user and also a menu on the bottom here. So again, we can extract that into a new component that's called a profile and then reference it again on our sidebar component.
The very same step can also be done for the menu component below. I'm not going to show the entire process again, but I will show you the final result. Okay, so we nicely factored our sidebar. Again let's have a quick check, and it still seems to work. Finally, let's do the same for our last part, the dashboard. I simply cut this out here, let's create a dashboard.ts file, and I simply paste in the source code for the dashboard.
Again, same process, we import the dashboard component, and we reference it in our HTML code. As you can see, we get the final result where we have different components that get assembled together to make up an entire app. We could probably identify more components even, maybe even some that can be refactored out into general purpose libraries. So we now have some nice components. However, if I look at our app folder, it starts to get really messy. It's highly advisable to structure it into folders. These usually represent different responsibilities of our app, or modules if you like.
Right now, there is no official style guide yet. However, there exists some common rules that are considered best practice in the community. So let's quickly remove all of our generated js files to get a better overview. A first simple modification is to suffix our files with what they contain. So like, in our case, components. Let's quickly do that for all of our components, and then let's create the folder structure. I could create a dashboard, a user profile folder, and finally, a shell folder.
Then let's move in the files to their corresponding folders, and after that, we also have to address our ES6 module imports. Let's quickly do that. Let's start our application again. We'll quickly refresh it, and it still works. So what we get is a nice, clean structure.
To sum up, in this video we built the foundation for our sample app we are building in this video course. We learned about how to identify and componentize our application into a few set of components, we learned about naming convention, and how to organize our components into proper folders. In the next video, we're going to learn a new set of angular two components by implementing our first feature, scanning for new sensors. See you there!
Get up to speed with one of the most important building blocks of Angular 2: component-based directives, aka components. Components are reusable HTML widgets that replace the controller-based architecture in Angular. This course guides you through the various steps in migrating to Angular 2 and building real-world Angular components of your own.
Author Juri Strumpflohner starts by setting up a modern development environment with TypeScript and ES2015 support. Next, he explains what components are, how to build them, and how they differ from directives. He provides an opportunity to apply these new concepts while building a fictitious dashboard application for a home automation system.
Next, learn about HTML rendering templates, see how to establish a data flow between different components, and even find out how to integrate external libraries. Juri also shows how to make components production-ready and maintainable by applying automated unit and end-to-end testing techniques. As a bonus, discover how to bring your Angular 2 components to other environments such as the server side and mobile devices.
- Upgrading to Angular 2
- Feeding a component with data
- Building a foundation for your Angular app
- Building reusable models
- Comparing components and directives
- Integrating an external library
- Bundling and minification
- Maintaining components
- Testing and debugging Angular 2 components
- Building hybrid mobile apps with Angular 2 and Iconic 2