Commonly, our components interact with the outside by having data flow in and out. This video demonstrates how to realize that data flow.
- [Narrator] Hi, and welcome back to our last video…of section two, upgrading from Angular 1.x.…We have previously seen the very basics of an…Angular 2 component.…In this video, we will look at some of the best practices…for preparing our codebase towards immigration…to Angular 2, and we will learn how to run…Angular 1 side-by-side with Angular 2.…I have prepared a very simple Angular 1 app,…which will serve us for doing the upgrade.…That basically consists of a simple people list,…and a detail view.…So the first app, if you have an Angular 1 app,…is that it follows the popular Angular 1…style guide by John Papa.…
This demo project already does so…to save us some time.…Now if your app follows that style guide,…I also assume you don't use the honor scope anymore.…This is very important,…as it won't be around in Angular 2 anymore,…so instead we use the so-called controller as syntax,…which has been introduced in Angular 1.3.…We also have a nice activate method…inside here, and this acts like…the controller's constructor,…
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