This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
The Angular 2 Big Picture
Introduction
Lukas Ruebbelke begins the course on Angular 2 with a brief overview of the course topics. He will be alternating with Scott Moss as they cover everything from components and templates to services and routing. The first part of the course will cover building a single basic feature. The second part will looking at combining features to create a more interesting application.The Demo Application
Lukas demonstrates the application that will be built throughout the course. He also shares links for installing the demo application, additional Angular examples, and a non-TypeScript version of the application. The addition Angular examples are all available as individual plunks.Why Angular 2?
Many of the best practices from Angular 1 have been distilled into Angular 2. Features like change detection has been dramatically improved and there has been a focus on speed and performance.Angular Building Blocks 1
Lukas diagrams some of the main elements inside the framework. Then he begins defining the individual building blocks and shares a brief code example of each. He covers Modules, Components, Metadata, and Templates.Angular Building Blocks 2
Lukas continues explaining the various building blocks inside the Angular 2 framework. He talks about Data Bindings, Services, Directives and Dependency injection.Change Detection & Testing
Lukas explains how change detection has been improved in Angular 2. He also demonstrates how to incorporate unit testing into an application. Before moving on to the first challenge, Lukas spends a few minutes answering audience questions and talks about why he prefers using TypeScript with Angular 2.Challenge 1
In this challenge, you will identify the major Angular 2 pieces in the sample application. You will add a new property to one of the feature components and to the StateService.Challenge 1 Solution
Lukas walks through the solution to challenge 1.
Prerequisite Primer in Tooling
Module Loading & Webpack
Scott takes over to talk about module loading and Webpack. While modular code is not required with Angular, it’s highly recommended. It eliminates collisions between libraries and the need to use <script> tags. Scott talks about the advantages of modules and how Webpack can be used to both bundle and load modules into the application.ES6 & TypeScript
ES6 or ES2015 is the latest standard for JavaScript and greatly enhances the development experience. Scott explains why understanding ES6 features like classes and modules will help the transition to TypeScript. He also demonstrates some of the features of TypeScript.Typings
Typings is an NPM package to handle the type definitions associated with third-party libraries. This way the tooling will be aware of the types used inside the application. After explaining the typings library, Scott summarizes the different coding syntax options with Angular 2.The Anatomy of a Build System
Scott spends some time walking through the anatomy of a build system. This application uses Webpack. Scott explains the options in the Webpack configuration file. He also introduces how Webpack handles TypeScript and linting.Using a Build System
With the build system in place, Scott runs the webpack-dev-server command to initiate the build process and start the development server. He then gives the audience a few minutes to write some TypeScript code and test their own build process.A Deeper Look at webpack.config.js
Scott dives a little deeper into the webpack.config.js file. He explains source-maps and some additional configuration properties like extensions. Scott also talks about some of the different loader options and introduces plugins.Installing Typings
Scott reviews how to install and use typings in Webpack. He looks at the typing files generated for both Node and lodash. Scott wraps up the tooling section with some notes about linters and answers a few audience questions.
Component Fundamentals
CIDER
Lukas shares mnemonic device (CIDER) he uses when creating component classes: Create, Import, Decorate, Enhance, and Repeat. He also talks a little about his process of learning and establishing a component development workflow.Creating, Importing, & Decorating Classes
Every component in Angular 2 is an ES6 class. Properties and methods will be available for binding in the class’s template. Once a class is created, dependencies from Angular and other 3rd party libraries can be imported.Component Demonstration
Lukas puts his CIDER mnemonic to work by creating a simple Users component. After creating the class definition, he imports the Angular Component base class and adds some metadata to specify the component’s template.Lifecycle Hooks
Lifecycle hooks allow custom logic to be added at various component stages and are implemented as class methods. Example lifecycle hooks are ngOnInit, ngAfterViewInit, and ngOnDestroy.Writing a Component Spec
Lukas demonstrates how to write a spec for his Users component. He creates a spec file in the component’s directory and adds a simple assertion. After the spec is written, he runs the “npm test” command to initiate the Karma test runner.Challenge 2
In this challenge you will create a Widgets feature. You will make 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 2 Solution
Lukas walks through the solution to challenge 2.
Templates
Interpolation
Interpolation is the process of binding to component properties both inside and outside of a template. Angular uses the double-curly-brace syntax to create an interpolated property. Scott introduces interpolation and talks briefly about the different ways data can flow between components and templates.Property, Event, & Two-Way Bindings
Scott compares property bindings to event bindings. Property bindings flow data from the component to an HTML element. They are created by placing square brackets around the targeted attribute. Event bindings flow data in the opposite direction. The requested event is wrapped in parentheses and the statement to execute is provided as the event value. Two-Way bindings are a combination of both property and event bindings.Asterisk, Hashtag, & Elvis Operators
Scott reviews a number of operators available inside Angular templates. The asterisk operator indicates a directive that modifies the HTML using the <template> tag. The hashtag operator defines a local variable inside a template which is available to sibling and child elements. Finally, the Elvis operator can be used to guard against exceptions being thrown when a variable that does not exist is referenced.Template Demonstration: Bindings and Styles
Scott spends a few minutes coding a new component from scratch. He includes a template file for his component and reviews the binding techniques and operator usage covered earlier. Scott also demonstrates how to load styles with the Webpack raw loader.Template Demonstration: Operators
Scott continues his template code example by incorporating the asterisks and Elvis operators. He also shows a couple different ways to iterate over an array inside a template.Challenge 3
In this challenge, you will create a widgets template that contains a template expression via interpolation, a property binding, an event binding, and a two-way binding.Challenge 3 Solution Part 1
Scott walks through the solution to challenge 3.Challenge 3 Solution Part 2
Scott continues his walk through the challenge 3 solution.
Services
Creating Services
Just like with components, services in Angular 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 4
In 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 4 Solution
Lukas walks through the solution to challenge 4.Services Q&A
Lukas answers a few audience questions about the @Injectable metadata decorator and injecting multiple services.
Routing
Router Overview
As a precursor to what Scott will be covering later, Lukas quickly overviews how Angular 2 handles routing. He talks about the component router, navigating routes, query parameters and child routes.Day-Two Demo Application
Before getting back into the discussion about routing, Lukas spends a few minutes looking at the topics for the second day of the workshop and reviewing what was covered in day one. He also demonstrates the REST-ful master-detail application that will be built throughout the lessons.Challenge 5
In this challenge, you will create the file structure for a widget feature in the new application.Challenge 5 Solution
Lukas walks through the solution to challenge 5.Component Router, Navigating Routes & Query Parameters
Configuration of a component router is handled in a decorator function. The decorator function receives an array of route definition objects as well as any route parameters. The router-outlet directive is used to indicate where route template should be placed and navigation is triggered with either the routerLink attribute or the navigate() method.Child Routes
Scott introduces child routes and shares a few Plunks to demonstrate how they are configured. Child routes are ideal for creating reusable components since they are ignorant of their parents’ route implementation.Router Demonstration 1
Scott begins live coding a component that uses routes. In the first code example, he creates two basic routes in the App class. These routes access the Items component and the Demo component.Router Demonstration 2
Scott expands on his first route coding example. He first adds query parameters for an id and a user. Then he adds a child route and demonstrates what happens if a default child is not set.Challenge 6
In this challenge, you will create a route to the widgets feature and use the routeLink to navigate to that feature. You will also incorporate both route and query parameters into the widgets route.Challenge 6 Solution
Scott walks through the solution to challenge 6.
Component Composition
Component System Architecture
Rather than build large view/controller modules in Angular 1, the recommended approach was to either break the application into named routes or into separate directives. Angular 2 has evolved to a component-based approach. Lukas compares the architecture styles between Angular 1 and 2. He 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 & @Output
Lukas explains the @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.EventEmitter Demonstration
Lukas live codes one more example using the @Output decorator and a custom EventEmitter. Then both Lukas and Scott spend a few minutes sharing their thoughts on when to use Angular 2 versus React.Smart & Dumb Components
Smart components are connected to a service and know how to load data and persist changes. Dumb components, on the other hand, are fully defined by their bindings and flow data through their @Input and @Output decorators. Lukas recommends building as many dumb components as possible.View Encapsulation
Lukas introduces the three types of view encapsulation in Angular 2: None, Emulated, and Native. These view encapsulation types change the way styles are scoped within a component.Challenge 7
In this challenge, you will create “dumb” widgets-list and widget-details components using @Input and @Output.Challenge 7 Solution Part 1
Lukas walks through the solution to challenge 7. In this first part, he creates the widgets-list component.Challenge 7 Solution Part 2
Lukas continues demonstrating the solution to challenge 7 by creating the widget-details component.
Directives
Attribute Directives
Scott describes directives as components without a template. Generally speaking, they are responsible for modifying a dynamic template. After giving a brief overview of directives and how they access the DOM, Scott begins coding an attribute directive.Directive Host Property
Scott expands on his basic attribute directive by exploring the host property. The host property is a reference to the element where this attribute is added. It can be used to register callbacks for events from the host element.Built-in & Structural Directives
Scott runs through a few of the built-in attribute directives like ngClass and ngStyle. He also covers structural directives like ngFor, ngIf, and ngSwitch. After looking at these built-in Angular 2 directives, Scott shares one more attribute directive example before introducing the next challenge.Challenge 8
In this challenge, you will use ngIf to give feedback to the user whether or not a widget is selected. You will also create a custom directive to modify the style of a widgets component when a user interacts with it.Challenge 8 Solution Part 1
Scott begins walking through the solution to challenge 8.Challenge 8 Solution Part 2
Scott finishes the walk through of the challenge 8 solution.
Forms
Form Builder
Form Builder allows you to group individual form controls. These form controls will use the ngControl directive to bind to a model and utilize built-in features like validation. After demonstrating how to create and manage forms in Angular 2, Lukas looks at the many validation options available through the form builder API.Submitting Forms
Lukas spends some time answering audience questions about forms in Angular 2 and shares a few comparisons to how forms were handled in Angular 1. After the Q&A, Lukas demonstrates how to bind to the submit event and handle form errors if they are present.Challenge 9
In this challenge, you will create a form for the widget-details component. You will bind the form to a widget object and submit the details to the parent component.Challenge 9 Solution Part 1
Lukas begins walking through the solution to challenge 9. He starts with adding the form controls, bindings, and event handlers.Challenge 9 Solution Part 2
Lukas completes his walk through of the challenge 9 solution by adding a submit event to the form and emitting the results to the parent component.
Server Communication
The HTTP Module
The HTTP Module in Angular 2 simplifies the use of the XHR and JSONP APIs by using RESTful verbs and returning an observable object. Scott takes a look at number of 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, Scott compares them to Promises. Then he talks briefly about the Headers object.HTTP Demonstration Part 1
Scott creates a service that loads JSON from reddit.com . He 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.HTTP Demonstration Part 2
Scott continues his demonstration of the HTTP module. He transitions the code to a POST operation and shows how to add customized headers. Then he subscribes to the service and populates the items component with data from reddit.com .Challenge 10
In this challenge, you will create a method inside the service that uses HTTP to get widgets.json.Challenge 10 Solution Part 1
Scott walks through the solution to challenge 10. He starts by adding the ability you read the widgets.json file and load a list of widgets.Challenge 10 Solution Part 2
Scott finishes his walk through the challenge 10 solution by adding the ability to POST to the widgets.json file.
Pipes
What are Pipes?
A pipe takes in data as input and transforms it to a desired output. They are used inside templates, can have parameters, and are chain-able. After looking at a few of the built-in pipes, Lukas talks through how to create custom and asynchronous pipes.Pipe Demonstration
Lukas wraps up the course by sharing a few pipe code examples. He also sets the stage for the next course by talking about RXJS and sharing the rxmarbles.com website.