Learn how to debug the current state of our application to gain better insight.
- [Narrator] Hi and welcome to the video…on debugging with Batarangle.…Previously, we looked at writing unit tests…for Angular 2 components.…In this video, we are going to learn how to debug…our Angular 2 components as they run in the browser.…We will see how to do that…with the default Chrome Developer Tools…and we will also take a look at in a Chrome extension…which looks quite promising namely Batarangle.…From now and then, you definitely want to inspect your…application as it is running in your browser…like inspect its variables, the current state, et cetera.…Angular 2 is still in its childhood…regarding the tooling support,…but the important thing is that it has been developed…by the Angular 2 team with tooling in mind.…
One way to debug our components is by using the…Developer Tools provided by our browser.…For instance, the Chrome DevTools allow us to set…break points or simply log some content to the console…from within our Angular code.…Also, if we have source maps enabled which we can do…in the settings of the Chrome Developer Tools,…
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