List of Figures

Chapter 1. Introducing Angular 2

Figure 1.1. Sample architecture of an AngularJS app

Figure 1.2. Two-way binding

Figure 1.3. Sample architecture of an Angular app

Figure 1.4. Component internals

Figure 1.5. Using tools

Figure 1.6. The online auction workflow

Figure 1.7. The online auction home page with highlighted components

Figure 1.8. The online auction home page on a smartphone

Figure 1.9. The initial project structure for the online auction app

Chapter 2. Getting started with Angular

Figure 2.1. Running Hello World

Figure 2.2. Running the app from the npm-managed project

Figure 2.3. The online auction home page

Figure 2.4. The online auction home page with highlighted components

Figure 2.5. Stars component

Figure 2.6. The Augury panel

Chapter 3. Navigation with the Angular router

Figure 3.1. Allocating the area for changing views

Figure 3.2. Dissecting the URL

Figure 3.3. The Home route of the basic_routing sample

Figure 3.4. The Product Details route of the basic_routing sample

Figure 3.5. The Product Details route received the product ID 1234.

Figure 3.6. The Product Details anchor tag is ready.

Figure 3.7. The Product Description route

Figure 3.8. The child route renders SellerInfo.

Figure 3.9. The routes hierarchy in the basic_routing app

Figure 3.10. Clicking the Product Details link is guarded.

Figure 3.11. Rendering a chat view with an auxiliary route

Figure 3.12. Rendering LuxuryModule

Figure 3.13. Navigating the Product Details route

Chapter 4. Dependency injection