Building Awesome Web Apps with Angular 2
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
Build Awesome Apps with Angular
Course AgendaLukas sets the course's first-day agenda to construct a single feature in AngularJS.
Review of Demo ApplicationReviewing 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.
The Angular 2 Big Picture
The Benefits of Angular 2Lukas covers the features and benefits that are in Angular 2 over its previous version.
Angular 2 Building Blocks 1Breaking down the makeup of Angular 2, Lukas reviews Module, Routes, Component, and Service.
Angular 2 Building Blocks 2Continuing to explain the various building blocks inside the Angular 2 framework, Lukas discusses Directives, Data Bindings, and Metadata.
ServicesLukas covers Services, specific tasks that can be used in Angular 2 components.
Challenge 1In this challenge, students identify the major Angular 2 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: SolutionLukas explores Angular 2 sample application, walking through the solution to Challenge 1.
The Angular CLI
AOT SupportLukas reviews Ahead-of-time (AOT) compilation and its benefits within Angular 2.
Extensible BlueprintsTalking about future updates, Lukas discusses extensible blueprints.
Angular CLI InstallationLukas demonstrates building a project with Angular CLI, showing how to generate a Component, a Service, a Build, and linting.
Challenge 2In this challenge, students use the Angular CLI to build the application.
Challenge 2: SolutionTaking questions from students, Lukas walks through the solution to Challenge 2.
Component ClassesLukas demonstrates his approach for creating component classes: Create, Import, Decorate, Enhance, and Repeat (CIDER).
Lifecycle HooksLifecycle 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 DemonstrationLukas 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 3In 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 widgets template, and display the widgets component in the home component.
Challenge 3: SolutionLukas walks through solution for Challenge 3.
BindingIntroducing 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, & Elvis (Safe Navigation) OperatorsLukas reviews the Hashtag Operator that defines a local variable inside a template which is available to sibling and child elements. He then reviews the Asterisk operator, which indicates a directive that modifies the HTML using the <template> tag. Lukas covers the Elvis (Safe Navigation) Operator that be used to guard against exceptions being thrown when a variable that does not exist is referenced.
Challenge 4In 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: SolutionLukas walks through solution for Challenge 3 and takes questions from students.
Defining a ServiceJust like with components, services in Angular 2 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.
Challenge 5In this challenge, you will create a widgets service class and a widgets collection. After introducing the challenge, Lukas spends a few minutes answering some audience questions.
Challenge 5: SolutionLukas walks through the solution for Challenge 4 and takes questions from students.
Router OverviewLukas discusses how Angular 2 handles routing covering the component router, navigating routes, query parameters, child routes, and named routes.
Wrapping Up Day 1
Build Awesome Apps with Angular Day 2
Course Introduction: Second HalfLukas covers the agenda for the second day of the workshop.
Review of Angular 2Reviewing first day's topics and taking questions from students, Lukas covers modules, routes, components, and services in Angular 2.
Challenge 6By making a review feature including file structure, component class, and template, students will create a project that covers concepts covered in the first day's material in this challenge.
Challenge 6: SolutionLukas walks through the solution for Challenge 5 and takes questions from students.
Component Driven ArchitectureGoing over a brief history of Angular, Lukas compares the architecture styles between Angular 1 and 2. Rather than build ever larger view/controller modules in Angular 1, the recommended approach was to either break the application into named routes or separate directives. Angular 2 has evolved to a component-based approach. He also describes many of the features and benefits of a component system architecture.
Component ContractsComponent 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 DecoratorsLukas 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.
Review of Component ContractortsWhile reviewing @Input and @Output decorators, Lukas takes questions from students.
EventEmitter DemonstrationLukas codes an example using an @Output decorator and a custom EventEmitter.
Challenge 7: Input & OutputIn this challenge, students create widgets-list and widget-details components using @Input and @Output.
Challenge 7: Solution, Part ILukas breaks down the solution into two parts. In this first part, he creates the widgets-list component.
Challenge 7: Solution, Part IIAbstracting the templates, Lukas continues demonstrating the solution to Challenge 6 by creating the widget-details component.
Data Binding and Component ReviewBefore moving onto integrating forms, Lukas reviews data binding and component and answers students questions.
Template Driven FormsLukas introduces the FormsModule, controls and validate styles in order to create and manage forms in Angular 2.
Form ControlsLukas demonstrates how to group and validate FormControls within a FormGroup.
Validation StylesAdding custom CSS rules, Lukas shows how to modify the visual appearance of form controls when they are valid or not.
State MutationsTo handle mutable operations, Lukas covers the concept of creating a local copy of an object that can update without letting the shared object be overwritten until the local copy is ready to be emitted.
Challenge 8In this challenge, students make a form for the widget-details component, bind the form to a widget object, and submit the details to the parent component.
Challenge 8: SolutionLukas covers the solution for Challenge 7 as well as demonstrates a couple of debugging techniques.
The HTTP ModuleThe HTTP Module in Angular 2 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 & HeadersAn 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 DemonstrationLukas 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 9In this homework challenge, students create a method inside the service that uses HTTP to get JSON.
Questions: Observable vs Promise, etcWrapping up the course, Lukas takes questions from students about his preference for Observable over Promise; how to keep a portion of a page from displaying until data comes from a service; potential memory concerns for Subscribe methods; and more.
Wrapping Up the CourseConcluding the workshop, Lukas thanks his students.