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