Learning Angular

Course details

Frameworks can help you get things done quickly by providing a model for development that yields special functionality. This course helps to acquaint you with Angular, the widely used JavaScript framework for building single-page web applications. Join instructor Maaike van Putten as she shows you how to build basic front-end applications using Angular, including how to display data from an API and post data with the use of forms. An ideal fit for new Angular developers who already know HTML and TypeScript, this course equips you with the skills you need to manage essential Angular components, services, models, modules, and routing.

Learning objectives
Understand Angular’s core concepts, such as components, services, models, modules, and routing.
Create dynamic web pages with Angular.
Integrate REST APIs, manage data with RxJS, and handle async operations.
Learn advanced techniques such as state management.

Concepts

0. Introduction

01 - Learning Angular
02 - What you should know

1. Getting to Know Angular

03 - Angular - What and why
04 - Setting up the Angular environment
05 - Creating your first Angular app
06 - Angular CLI
07 - Structure of Angular applications
08 - Challenge - Clear the HTML
09 - Solution - Clear the HTML

2. Working with Components, Templates, and Styling

10 - Working with components
11 - Understanding data binding
12 - Understanding property binding
13 - Adding event binding to the mix
14 - Styling components
15 - Understanding lifecycle hooks
16 - Using code blocks to create dynamic views
17 - Transforming data with pipes
18 - Challenge - Check if a course is on sale
19 - Solution - Check if a course is on sale

3. Sending Data across Components

20 - Parent-child communication
21 - The @Input decorator
22 - The @Output decorator and event emitters
23 - Challenge - Add a wish list feature
24 - Solution - Add a wish list feature

4. Creating and Using Models

25 - Create data models
26 - Use models within components and services
27 - Challenge - Add a model
28 - Solution - Add a model

5. Working with Services and HTTP Requests

29 - Creating and using a basic service
30 - Making HTTP requests with HttpClient
31 - Using RxJS to handle async data
32 - Using services in components
33 - Dependency injection explained
34 - Using services for cross-component communication
35 - Challenge - Get course and display it in a custom component
36 - Solution - Get course and display it in a custom component

6. Routing and Navigation

37 - Setting up routing
38 - Navigating between routes
39 - Route parameters and query parameters
40 - Challenge - Add a new route and component
41 - Solution - Add a new route and component

7. Handling Forms

42 - Angular forms - Template-driven and reactive forms
43 - Building reactive forms
44 - Implementing form validation
45 - Submitting form data and error handling
46 - Challenge - Create a form
47 - Solution - Create a form

8. Structuring Code in Modules

48 - Understanding Angular modules
49 - Creating feature modules
50 - Shared and core modules
51 - Challenge - Create an admin dashboard
52 - Solution - Create an admin dashboard

Conclusion

53 - Next steps