Angular Fundamentals

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