Building Awesomer Apps with Angular
This course has been updated! We now recommend you take the Angular Core course.
Table of Contents
Building Awesomer Apps with Angular
Course IntroductionLukas Ruebbelke introduces his course, Building Awesomer Apps with Angular.
Course AgendaLukas sets the course agenda first part of the course focused on constructing 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.
Demo Application Q&ALukas 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 AngularLukas covers the features and benefits of using Angular.
Angular Building BlocksBreaking down Angular, Lukas reviews Module, Routes, Components, and Service.
Angular Building Blocks, Part 2Continuing to explain the various building blocks inside the Angular framework, Lukas discusses Directives, Data Binding, and Metadata. Lukas takes questions from students.
Angular & TypeScriptLukas discusses using TypeScript within Angular. Lukas takes questions from students.
Challenge 1: Angular PiecesIn 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: SolutionLukas walks through the solution to Challenge 1.
The Angular CLI
Setting Up Angular CLILukas demonstrates how to get up and running in Angular.
Challenge 2: Angular CLIIn this challenge, students use Angular CLI to build the application.
Course Q&A: ElectronLukas answers a student question about setting build environments, especially Electron, within Angular.
Challenge 2: SolutionLukas reviews the solution to Challenge 2.
Component ClassesLukas demonstrates his approach to create 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 3: Widgets FeatureIn 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: SolutionLukas reviews the solution to 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, & Safe Navigation OperatorLukas 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: TemplatesIn 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 the solution to Challenge 4. Lukas takes questions from students.
Defining a ServiceJust 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 DemonstrationLukas codes a service demonstration step-by-step while taking questions from students.
Challenge 5: ServicesIn this challenge, you will create a widgets service class and a widgets collection.
Challenge 5: SolutionLukas walks through the solution to Challenge 5. Lukas takes questions from students.
Wrapping Up, Part 1
Wrapping UpAs a way to review the material so far, Lukas asks students what is the most amazing elements of the course so far.
Building Awesomer Apps with Angular, Part 2
Course Introduction, Part 2Lukas covers the agenda for the next part of the course.
Review of AngularReviewing first part's topics and taking questions from students, Lukas covers modules, routes, components, and services in Angular.
Challenge 6: Review FeatureIn 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: SolutionLukas walks through the solution for Challenge 6 and takes questions from students.
Template Driven FormsLukas introduces the FormsModule, controls and validates styles to create and manage forms in Angular.
ngModelLukas introduces ngModel, which enables two-way data binding within a form.
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. Lukas takes questions from students.
Challenge 7: FormsIn this challenge, students make a form for the widget component and, by using ngForm, add validation for editing the widget component.
Challenge 7: SolutionLukas walks through the solution for Challenge 7.
Component-Driven ArchitectureGoing 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 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.
Container and Presentational ComponentsLukas 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 DemonstrationLukas reviews code demonstration the container and presentational components.
Challenge 8: @Input and @OutputIn this challenge, students create widgets-list and widget-details components using @Input and @Output. Lukas takes questions from students.
Challenge 8: SolutionLukas walks through the solution for Challenge 8.
The HTTP ModuleThe 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 & 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 9: Server CommunicationIn this challenge, students create a method inside the service that uses HTTP to get JSON. Lukas takes questions from students.
Challenge 9: SolutionLukas walks through the solution for Challenge 9. Lukas takes questions from students.
Introducing ObservablesAn 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: ItemsSearchIn this challenge, students create an ItemsSearch component and then add it to the HomeComponent template. Lukas immediately walks through the solution.
Observable SequenceLukas 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 SequenceLukas illustrates the basic sequence of an observable stream and breaks down the structure of observables by examining a code example.
Observable DemonstrationLukas demonstrates how to code using observables with the course project. Lukas takes questions from students.
Challenge 11: Observable DemoIn 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 3Lukas reviews the agenda for Part 3 of the course, which is focused
Review of Angular, Part 2Reviewing second part of the course's topics and taking questions from students, Lukas takes questions from students.
Challenge 12: Review ChallengeIn 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: SolutionLukas walks through the solution for Challenge 10. Lukas takes questions from students.
Introducing Application ComplexityLukas 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 PurgatoryAfter stating complexity can lead to ambiguity or complex code, Lukas goes through some code examples that demonstrate complexity.
Immutable Operations DemonstrationLukas reviews code examples of immutable operations. Lukas takes questions from students.
Challenge 13: LoginIn this challenge, students create a Login component and add it to the HomeComponent template.
Challenge 13: SolutionLukas walks through the solution for Challenge 13.
Introducing Reactive FormsAfter 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 DemonstrationLukas goes through the code of a reactive forms example.
Challenge 14: FormsIn this challenge, students implement a reactive forms solution.
Course Q&A: Form NestingLukas takes a question from a student about nesting form groups.
Challenge 14: SolutionsLukas walks through the solution for Challenge 14.
Course Q&A: WireframesAfter receiving application wireframes from a student, Lukas reviews and discusses how to develop components efficiently to build out the application.
Introducing Event CommunicationAfter 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 DemonstrationLukas goes through the code to demonstrate how information is passed through states of an application.
Introducing Route ParametersWhen an application has a collection of routes for specific containers or widgets, Lukas reviews how to go directly to a specific widget.
Route Parameters DemonstrationLukas works through a code demonstration of route parameters. Lukas takes questions from students.
Make It Work
Introducing Make It WorkLukas sets the agenda for the remaining course: Testing and Debugging, Static Analysis, Angular Performance, and Deploying.
Testing and DebuggingLukas talks about testing strategies with Angular and how to code a component test.
Testing with KarmaLukas introduces how to set up and use Karma, a test runner used to execute Angular unit tests.
Basic Component TestLukas discusses how Angular testing utilities work to test components.
Component Testing DemonstrationLukas walks through a coding demonstration illustrating how to test a component.
Static AnalysisAfter 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 DetectionLukas 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 DetectionLukas takes a question from a student about on push change detection.
Lazy Loaded ModulesTo help with creating better performance in Angular applications, Lukas shows how to load modules only when it is needed.
Make It Realtime
Angular and FirebaseLukas demonstrates real-time updates to an application.
Real-time Observable StreamWith the use of Firebase database, Lukas goes through the code to demonstrate how to setup realtime updates in an Angular application.