Angular Fundamentals

By Jim Cooper and Joe Eames
This course will teach you the fundamentals of working with the latest version of Angular. You will learn everything you need to know to create complete applications including: components, services, directives, pipes, routing, HTTP, and even testing.
Start FREE course
Play course overview
Course info
Rating
(1066)
Level
Intermediate
Updated
Mar 29, 2021
Duration
9h 46m
Table of contents
Course Overview
Course Overview 2m
Getting Started with Angular
Introduction 3m Practice Exercises 2m Introduction to TypeScript 7m Comparing Angular to AngularJS 2m A Conceptual Overview of Angular 3m Here's What We'll Be Building 1m Installing Git and Node 2m Getting Started with the Angular CLI 5m Bootstrapping an Angular App 5m A Brief Look at the App Module 2m Accessing Static Files 6m Summary 1m
Creating and Communicating Between Angular Components
Introduction 1m Creating Your First Data-bound Component 6m Using External Templates 1m Communicating with Child Components Using @Input 7m Communicating with Parent Components Using @Output 5m Using Template Variables to Interact with Child Components 3m Styling Components 2m Exploring Angular's CSS Encapsulation 5m Adding a Site Header 3m Summary 0m
Exploring the Angular Template Syntax
Introduction 1m Interpolation, Property Bindings, and Expressions 3m Event Bindings and Statements 2m Repeating Data with ngFor 6m Handling Null Values with the Safe-Navigation Operator 4m Hiding and Showing Content with ngIf 2m Hiding Content with the [Hidden] Binding 2m Hiding and Showing Content with ngSwitch 3m Styling Components with ngClass 5m Styling Components with ngStyle 3m Summary 1m
Creating Reusable Angular Services
Introduction 1m Why We Need Services and Dependency Injection 4m Creating Your First Service 6m Wrapping Third Party Services 5m Summary 1m
Routing and Navigating Pages
Introduction 2m Adding Multiple Pages to Your App 5m Adding Your First Route 7m Accessing Route Parameters 3m Linking to Routes 2m Navigating from Code 3m Guarding Against Route Activation 6m Guarding Against Route De-activation 4m Pre-loading Data for Components 7m Styling Active Links 2m Lazily Loading Feature Modules 6m Organizing Your Exports with Barrels 2m Summary 1m
Collecting Data with Angular Forms and Validation
Introduction 1m Using Models for Type Safety 6m Creating Your First Template-based Form 7m Using the Data from Your Template-based Form 6m Validating Template-based Forms 7m Creating Your First Reactive Form 8m Validating Reactive Forms 6m Using Multiple Validators in Reactive Forms 3m Diving Deeper into Template-based Forms 9m Editing Data with Two-way Bindings 3m Diving Deeper into Reactive Forms 10m Creating Custom Validators 8m Summary 0m
Communicating Between Components
Introduction 0m Passing Data into a Child Component 3m Passing Data out of a Child Component 8m Summary 0m
Reusing Components with Content Projection
Introduction 1m Content Projection 5m Multiple Slot Content Projection 7m Summary 0m
Displaying Data with Pipes
Introduction 2m Using Built-in Pipes 4m Creating a Custom Pipe 3m Sorting and Filtering Overview 7m Creating a Filtering Display 4m Filtering Data 7m Sorting Data 6m Summary 1m
Understanding Angular's Dependency Injection
Introduction 1m Using Third Party Global Services - The Problem 3m Angular Dependency Injection Lookup 5m Using Angular's InjectionToken 7m Using Angular's @Inject Decorator 3m The useClass Provider 2m The useExisting and useFactory Providers 3m Summary 1m
Creating Directives and Advanced Components in Angular
Introduction 1m Implementing the Session Search 8m Adding jQuery 3m Creating a Modal Component 7m Fixing Template Parse Errors 1m Creating Directives - The Trigger Directive 8m Binding an ID 4m Routing to the Same Component 7m Using the @ViewChild Decorator 5m Creating Settings on Components 2m Summary 0m
More Components and Custom Validators
Introduction 1m Creating a Voting Component 6m Adding Voting Functionality 7m Hiding Functionality Before Authentication 2m Using @Input Setters 3m Creating a Custom Validator 8m Adding a Validator to Angular's Validators 3m Implementing a Multi-field Validator 6m Summary 0m
Communicating with the Server Using HTTP, Observables, and Rx
Introduction 6m Preparing to Store Data on the Server 6m Moving Data Storage to the Server 8m Listening to Resolved Data Changes 9m Using POST and PUT 6m Using QueryString Parameters 2m Using DELETE 6m Integrating Authentication with the Server 9m Persisting Authentication Status Across Page Refreshes 5m Saving User Data to the Server 3m Implementing Logout 5m Summary 0m
Unit Testing Your Angular Code
Introduction 11m Installing Karma 6m Unit Testing Services 8m Testing Mock Calls 6m Testing Components with Isolated Tests 6m Summary 0m
Testing Angular Components with Integrated Tests
Introduction 2m Setting up for Integrated Tests 8m Testing Components with Deep Integrated Tests 7m Creating Mock Services 10m Using DebugElement 5m Testing Components with Shallow Integrated Tests 7m Summary 1m
Taking an Angular App to Production
Introduction 1m Linting Overview 4m Installing TSLint in VSCode 3m Using TSLint with VSCode 3m Linting from the Command Line 4m Going to Production - Overview 5m Angular's Ahead of Time Compiler 2m Creating your First Build 3m Basic Deployment 1m Demo: Serving up a Build 4m Build Flags 1m The Effects of Prod Mode 2m Optimistic Bundle Downloading 3m Summary 1m
Description
Course info
Rating
(1066)
Level
Intermediate
Updated
Mar 29, 2021
Duration
9h 46m
Description

Angular has become one of the most widely used web development frameworks. This course, Angular Fundamentals, will teach you the fundamentals of writing applications with Angular - whether or not you've had past experience with Angular 1. You will learn how to bootstrap an application and how to build pages and reusable elements using Angular Components and the new Angular syntax. You'll also learn the fundamentals of: routing, creating reusable services and dependency injection, building forms with validation, and communicating with the server using HTTP and observables. You'll even learn how to test all of this using unit tests and end-to-end UI tests. When you finish this course, you will have the fundamental knowledge necessary to create professional and personal websites using Angular.

About the author
Jim Cooper
About the author

Jim Cooper is a software developer at Pluralsight. With more than 20 years of software development experience, he has gained a passion for Agile software development -- especially Lean.

More from the author
State Management with Vuex
Intermediate
1h 49m
Nov 24, 2020
Vue.js Fundamentals
Intermediate
5h 4m
May 20, 2020
More courses by Jim Cooper
Joe Eames
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Angular: The Big Picture
Beginner
1h 8m
Feb 25, 2021
Testing Node.js with Mocha
Intermediate
2h 36m
Feb 1, 2021
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hey there. This is Jim Cooper. ‑And this is Joe Eames. ‑Welcome to our Pluralsight course, Angular 2 Fundamentals. Joe and I have been developers for a long time, and we've been building large‑scale Angular applications ever since Angular 1's official release. And we're excited to share with you what we've learned about Angular 2. This course will give you all the fundamental knowledge you need in order to start building your own Angular applications, whether for small, fun personal projects or for large enterprise applications. In this course, you'll gain a high‑level understanding of the architecture of Angular applications in addition to a detailed understanding of building applications with Angular. Once we introduce you to the high‑level concepts, we'll spend most of this course actually writing code for a demo application that models real‑world applications. This intermediate‑level course has been designed to help you learn Angular from the ground up. If you feel like things are moving a little too quickly, you can check out one of the beginner‑level courses, but we've tried to make this a course that will teach you the fundamentals, even if you've had no prior experience with Angular. In this course, you'll learn about the following: the architecture of an Angular application and how to bootstrap a new application, Angular components and template syntax, including pipes and directives, creating reusable services and how dependency injection works in Angular, working with forms and validation, making API calls with HTTP and observables, and how to unit test and end‑to‑end test your application, and finally, how to package it all together for production. When you have finished this course, you will know enough about Angular to start building real‑world applications using Angular best practices. The only real prerequisite for this course is that you have some knowledge of JavaScript and HTML, but you certainly don't need to be an expert. So join us as we explore the exciting world of Angular.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT