Lukas Ruebbelke -- Google developer expert and author -- unpacks the powerful Angular framework, breaking it down into small, easy to follow pieces. You'll learn how to get up and running quickly with the Angular CLI, build out a real-world, production-ready application with Components, Services, Routes and Subcomponents. You'll also learn how to handle and validate form data, lazy load modules and test your application. A deep dive into Angular, this course is a must for JavaScript engineers who want to understand this powerful front-end web application platform!
This course and others like it are available as part of our Frontend Masters video subscription.
Published: February 7, 2018
Table of Contents
Building Awesomer Apps with Angular
Course Introduction
Lukas Ruebbelke introduces his course, Building Awesomer Apps with Angular.Course Agenda
Lukas sets the course agenda first part of the course focused on constructing a single feature in AngularJS.Review of Demo Application
Reviewing a demo application for the course, Lukas explains the importance of master-detail interface for learning coding as well as its importance for learning a new framework.Demo Application Q&A
Lukas answers questions about integrating with a backend with the demo application and how it relates to using npm-start over ngStart.
Angular Big Picture
Benefits of Angular
Lukas covers the features and benefits of using Angular.Angular Building Blocks
Breaking down Angular, Lukas reviews Module, Routes, Components, and Service.Angular Building Blocks, Part 2
Continuing to explain the various building blocks inside the Angular framework, Lukas discusses Directives, Data Binding, and Metadata. Lukas takes questions from students.Angular & TypeScript
Lukas discusses using TypeScript within Angular. Lukas takes questions from students.Challenge 1: Angular Pieces
In this challenge, students identify the major Angular pieces in the sample application. Then create a new property to the Items component binding it to the view as well as another property to the ItemsService to be consumed by a component.Challenge 1: Solution
Lukas walks through the solution to Challenge 1.
The Angular CLI
Angular CLI
Discussing the problems associated with moving pieces involved in building JavaScript applications, Lukas covers how Angular CLI can streamline app development.Setting Up Angular CLI
Lukas demonstrates how to get up and running in Angular.Challenge 2: Angular CLI
In this challenge, students use Angular CLI to build the application.Course Q&A: Electron
Lukas answers a student question about setting build environments, especially Electron, within Angular.Challenge 2: Solution
Lukas reviews the solution to Challenge 2.
Component Fundamentals
Component Classes
Lukas demonstrates his approach to create component classes: Create, Import, Decorate, Enhance, and Repeat (CIDER).Lifecycle Hooks
Lifecycle hooks allow custom logic to be added at various component stages and are implemented as class methods. Lukas shows lifecycle hooks on ngOnInit and ngOnDestroy, when a component is created and destroyed respectively.Component Demonstration
Lukas showcases how to create an Angular Component. After creating the class definition, he imports the component base class and adds metadata to specify the component’s template.Challenge 3: Widgets Feature
In this challenge, students create a Widgets feature. Using an ES6 class for the widgets component, import any necessary modules, decorate the component to use the widget's template, and display the widgets component in the home component.Challenge 3: Solution
Lukas reviews the solution to Challenge 3.
Templates
Binding
Introducing interpolation, which is the process of binding to component properties both inside and outside of a template, Lukas discusses and demonstrates the different ways data can flow between components and templates: Property, Event, and Two-Way Bindings.Hashtag, Asterisk, & Safe Navigation Operator
Lukas reviews the local variable inside a template, which is available to sibling and child elements. Lukas then examines the Asterisk, which indicates a directive that modifies the HTML. Lukas covers Safe Navigation Operator that be used to guard against exceptions being thrown when a variable that does not exist is being referenced. Lukas takes questions from students.Challenge 4: Templates
In this challenge, students create a "widgets" template that contains a template expression via interpolation, a property binding, an event binding, and a two-way binding.Challenge 4: Solution
Lukas walks through the solution to Challenge 4. Lukas takes questions from students.
Services
Defining a Service
Just like with components, services are just a class. The API for a service is defined by creating methods on the class. Services are made available by adding the @Injectable decorator. After they are properly decorated, they can be imported and consumed in any other component class. Lukas takes questions from students.Services Demonstration
Lukas codes a service demonstration step-by-step while taking questions from students.Challenge 5: Services
In this challenge, you will create a widgets service class and a widgets collection.Challenge 5: Solution
Lukas walks through the solution to Challenge 5. Lukas takes questions from students.
Wrapping Up, Part 1
Building Awesomer Apps with Angular, Part 2
Course Introduction, Part 2
Lukas covers the agenda for the next part of the course.Review of Angular
Reviewing first part's topics and taking questions from students, Lukas covers modules, routes, components, and services in Angular.Challenge 6: Review Feature
In this challenge, students code a review feature including file structure, component class, and template, students will create a project that covers concepts covered in the first part of the course's material.Challenge 6: Solution
Lukas walks through the solution for Challenge 6 and takes questions from students.
Forms
Template Driven Forms
Lukas introduces the FormsModule, controls and validates styles to create and manage forms in Angular.ngModel
Lukas introduces ngModel, which enables two-way data binding within a form.Form Controls
Lukas demonstrates how to group and validate FormControls within a FormGroup.Validation Styles
Adding custom CSS rules, Lukas shows how to modify the visual appearance of form controls when they are valid or not. Lukas takes questions from students.Challenge 7: Forms
In this challenge, students make a form for the widget component and, by using ngForm, add validation for editing the widget component.Challenge 7: Solution
Lukas walks through the solution for Challenge 7.
Component Composition
Component-Driven Architecture
Going over a brief history of Angular, Lukas compares the architecture styles through the history of Angular. Rather than build ever larger view/controller modules in previous versions of Angular, the recommended approach was to either break the application into named routes or separate directives. As Angular has evolved to a component-based approach. Lukas also describes many of the features and benefits of a component system architecture.Component Contracts
Component contracts represent an agreement between software suppliers and consumers. Inputs and outputs are defined and enforce how the Component will be consumed.@Input and @Output Decorators
Lukas covers on @Input and @Output decorators. These decorators are defined in a component class and bound within the component’s template. The @Output decorator also exposes an EventEmitter property that will dispatch an event to the parent component.Container and Presentational Components
Lukas reviews container and presentational components. Container components are connected to services and know how to load their own data and persist changes. Presentational components are defined by their bindings. Lukas takes questions from students.Container and Presentational Components Demonstration
Lukas reviews code demonstration the container and presentational components.Challenge 8: @Input and @Output
In this challenge, students create widgets-list and widget-details components using @Input and @Output. Lukas takes questions from students.Challenge 8: Solution
Lukas walks through the solution for Challenge 8.
Server Communication
The HTTP Module
The HTTP Module in Angular simplifies the use of the XHR and JSONP APIs by using RESTful verbs and returning an observable object. Lucas takes a look at some the methods available in the API.Observables & Headers
An Observable is a lazy event stream which can emit events. A subject performs some logic and notifies the observer at the appropriate times. After introducing Observables, Lukas compares them to Promises. Then he talks briefly about the Headers object.HTTP Demonstration
Lukas creates a service that loads JSON. He then demonstrates that observables do not load any data from their endpoint until the subscribe method has been called. He also compares the behavior of observables to the promise-based fetch API.Challenge 9: Server Communication
In this challenge, students create a method inside the service that uses HTTP to get JSON. Lukas takes questions from students.Challenge 9: Solution
Lukas walks through the solution for Challenge 9. Lukas takes questions from students.
Observable Fundamentals
Introducing Observables
An observable is a lazy event stream which can emit events. A subject performs some logic and notifies the observer at the appropriate times. After introducing Observables, Lukas compares them to Promises.Challenge & Solution 10: ItemsSearch
In this challenge, students create an ItemsSearch component and then add it to the HomeComponent template. Lukas immediately walks through the solution.Observable Sequence
Lukas reviews the observable as the combination of two classic design patterns: iterator and observer, which were designed to create state and communication respectively. Working together, the iterator and observer patterns can be used to communicate state over time.Basic Sequence
Lukas illustrates the basic sequence of an observable stream and breaks down the structure of observables by examining a code example.Observable Demonstration
Lukas demonstrates how to code using observables with the course project. Lukas takes questions from students.Challenge 11: Observable Demo
In this challenge, students on their own attempt to re-implement the observable demonstration that Lukas has done.
Building Awesomer Apps with Angular, Part 3
Course Introduction, Part 3
Lukas reviews the agenda for Part 3 of the course, which is focusedReview of Angular, Part 2
Reviewing second part of the course's topics and taking questions from students, Lukas takes questions from students.Challenge 12: Review Challenge
In this challenge, students create a status component and place it in a home component. Then students add the necessary UI elements to facilitate communications between the home component and status component.Challenge 12: Solution
Lukas walks through the solution for Challenge 10. Lukas takes questions from students.
Application Complexity
Introducing Application Complexity
Lukas examines developing Angular applications at a high-level view as large applications are often ill-defined programs and are hard to implement. The major pieces that add to complexity in applications are handling of state, code volume, and flow control.Complexity and Purgatory
After stating complexity can lead to ambiguity or complex code, Lukas goes through some code examples that demonstrate complexity.
Immutable Operations
Introducing Immutable Operations
Lukas introduces immutable operations, which are JavaScript methods that can be used to avoid Object and Array mutations. Lukas takes questions from students.Immutable Operations Demonstration
Lukas reviews code examples of immutable operations. Lukas takes questions from students.
Reactive Forms
Challenge 13: Login
In this challenge, students create a Login component and add it to the HomeComponent template.Challenge 13: Solution
Lukas walks through the solution for Challenge 13.Introducing Reactive Forms
After stating that the two critical roles of a form are to keeping track of the data and ensuring the validity of the data, Lukas introduces reactive forms, which is an Angular technique for creating forms in a reactive style.Reactive Forms Demonstration
Lukas goes through the code of a reactive forms example.Challenge 14: Forms
In this challenge, students implement a reactive forms solution.Course Q&A: Form Nesting
Lukas takes a question from a student about nesting form groups.Challenge 14: Solutions
Lukas walks through the solution for Challenge 14.Course Q&A: Wireframes
After receiving application wireframes from a student, Lukas reviews and discusses how to develop components efficiently to build out the application.
Event Communication
Introducing Event Communication
After stating he wants to show the standard issues when dealing with large-scale applications, Lukas discusses communicating changes or information across an application.Event Communication Demonstration
Lukas goes through the code to demonstrate how information is passed through states of an application.
Route Parameters
Introducing Route Parameters
When an application has a collection of routes for specific containers or widgets, Lukas reviews how to go directly to a specific widget.Route Parameters Demonstration
Lukas works through a code demonstration of route parameters. Lukas takes questions from students.
Make It Work
Introducing Make It Work
Lukas sets the agenda for the remaining course: Testing and Debugging, Static Analysis, Angular Performance, and Deploying.Testing and Debugging
Lukas talks about testing strategies with Angular and how to code a component test.Testing with Karma
Lukas introduces how to set up and use Karma, a test runner used to execute Angular unit tests.Basic Component Test
Lukas discusses how Angular testing utilities work to test components.Component Testing Demonstration
Lukas walks through a coding demonstration illustrating how to test a component.Static Analysis
After introducing static analysis as feedback loops to catch errors in code, Lukas demonstrates how to use lint, code coverage, and source map explorer in Angular applications.Performance with Change Detection
Lukas examines how to create more performant Angular applications by reviewing change detection. Usually, when there is a performance problem, Lukas notes the problem is associated with a less than optimal UX experience.Course Q&A: Change Detection
Lukas takes a question from a student about on push change detection.Lazy Loaded Modules
To help with creating better performance in Angular applications, Lukas shows how to load modules only when it is needed.Deploying Applications
Lukas reviews the ways of deploying applications. Lukas also discusses the Ahead-of-Time (AOT) compiler, which converts Angular HTML and TypeScript code into efficient JavaScript code during the build phase.
Make It Realtime
Angular and Firebase
Lukas demonstrates real-time updates to an application.Real-time Observable Stream
With the use of Firebase database, Lukas goes through the code to demonstrate how to setup realtime updates in an Angular application.