Learn how to build efficient Angular 2 components (component-based directives) with this fast quick-start guide.
In October 2014, Google announced the development of Angular 2, a total rewrite of the popular framework, with the target of aligning it with the current web standards and to make it even more productive and modern. Throughout this course we will demonstrate the various concepts behind creating Angular 2 directives and components, we do this in a full interactive way developing a dashboard application for a potential home automation system. But before we get into the guts of the framework, we will learn how to set up our development environment. We will also take a look at Typescript and some of the ES2015 language features that might turn out to be quite useful throughout our course.
Finally we will be writing our first Angular 2 component and even learn how to upgrade your existing Angular 1.X application if you should have to do so. We will decompose a static UI design taken from the Google Material Design Lite website, into proper Angular 2 components, that build a foundation of our Angular application. We will also see how to have those components communicate with each other. In section four and five we will learn creating reusable components. We're going to explore some of the new concepts of Angular 2 by creating a reusable model data component, where over, we will also see how to integrate an external library like D3, this library will be used for creating a nice chart.
Then, we will learn how create a proper setup for bungling mini-fying our Angular 2 code, so that it can be deployed to a production environment. Afterwards, we will explore how to keep our components clean and maintainable, by looking at uni-testing and interim testing strategies. We'll also discover some good debugging tricks. Finally, in section seven, we are getting a glance about what is possible with Angular 2, we are going to explore Angular 2 on a mobile, with Ionic, by building a small Android and IOS app that renders one of our built Angular 2 components.
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