Inject an external dependency into a component and render its data using the Angular template syntax.
- [Voiceover] Hi and welcome to the video…on Scanning for New Sensors.…In the previous video, we looked at how to decompose…our application layout into different components…and how to organize them.…In this video, we are going to implement our first feature,…namely the scanning for new sensors.…We will learn new things about template syntax,…how to extract a template into its own file…and about Angular services and providers.…As a first step, let's create a new folder…to host our new component.…I'd also create a scaffold of it.…
I use here a snippet for quickly creating our service…and note that we are now using the template URL…for externalizing our template into a separate HTML file.…Let's name our component.…And we are done.…Now, obviously, we also need to add our template here.…Great.…So to quickly test this, let's jump over…to our app component and reference…our new component from inside there.…
And then we have to add it to our routing configuration.…Now, since our video focus is mainly on components…we won't go into the details here…
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