Angular Essential Training (2019)

Course details

Angular was designed by Google to address challenges programmers face building complex, single-page applications. This JavaScript platform provides a solid core of web functionality, letting you take care of the design and implementation details. In this course, Justin Schwartzenberger introduces you to the essentials of this "superheroic" platform, including powerful features such as two-way data binding, comprehensive routing, and dependency injection. Justin steps through the platform one feature at a time, focusing on the component-based architecture of Angular. Learn what Angular is and what it can do, as Justin builds a full-featured web app from start to finish. After mastering the essentials, you can tackle the other project-based courses in our library and create your own Angular app.

Learning objectives
What is Angular?
Working with components
Binding events and properties
Getting data to components
Using directives and pipes
Creating Angular forms
Validating form data
How Angular does dependency injection
Making HTTP calls
Routing
Styling components

Concepts

Introduction

Why use Angular
What you should know
Using the exercise files
Basics of TypeScript
Course overview

Architecture Overview

Components, Bootstrap, and the DOM
Directives and pipes
Data binding
Dependency injection
Services and other business logic
Data persistence
Routing

Components

NgModule and the root module
Component metadata
Bootstrapping the module for the browser
The component selector
The component template
Styling a component
Using other components in a component
Interpolation and the expression context
Property binding
Event binding
Getting data to the component with @Input
Subscribing to component events with @Output

Directives and Pipes

Structural directives - ngIf
Structural directives - ngFor
Attribute directives - Built-in
Attribute directives - Custom
Using directive values
Working with events in directives
Angular pipes - Built-in
Angular pipes - Custom

Forms

Angular forms
Template-driven forms
Model-driven forms
Validation - Built-in
Validation - Custom
Error handling

Dependency Injection and Services

How Angular does dependency injection
Services in Angular
Class constructor injection
Building and providing a service
Providing services in the root
Using the service in components
The @Inject decorator
Injection token

HTTP

The Angular HttpClient
Using a mock backend for HTTP calls
Using the HttpClient for GET calls
Using search params in GET calls
Use HttpClient for POST, PUT, and DELETE calls
Handling HTTP errors

Routing

Setting the base href and configuring routes
Registering routing in the app module
Router outlets
Router links
Working with route parameters
Using the Router class to navigate
Using a feature NgModule for routes
Lazy loading a route module

Styling Components

The view encapsulation modes
How Angular scopes styles to components
Using common CSS selectors
Special CSS selectors Angular supports
Working with global styles

Conclusion

Next steps