Build Web Apps with Angular 2
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
The Angular 2 Big Picture
IntroductionLukas 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 ApplicationLukas 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 1Lukas 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 2Lukas continues explaining the various building blocks inside the Angular 2 framework. He talks about Data Bindings, Services, Directives and Dependency injection.
Change Detection & TestingLukas 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 1In 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 SolutionLukas walks through the solution to challenge 1.
Prerequisite Primer in Tooling
Module Loading & WebpackScott 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.
TypingsTypings 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 SystemScott 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 SystemWith 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.jsScott 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 TypingsScott 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.
CIDERLukas 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 ClassesEvery 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 DemonstrationLukas 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 HooksLifecycle 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 SpecLukas 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 2In 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 SolutionLukas walks through the solution to challenge 2.
InterpolationInterpolation 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 BindingsScott 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 OperatorsScott 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 StylesScott 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: OperatorsScott 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 3In 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 1Scott walks through the solution to challenge 3.
Challenge 3 Solution Part 2Scott continues his walk through the challenge 3 solution.
Creating ServicesJust 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 4In 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 SolutionLukas walks through the solution to challenge 4.
Services Q&ALukas answers a few audience questions about the @Injectable metadata decorator and injecting multiple services.
Router OverviewAs 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 ApplicationBefore 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 5In this challenge, you will create the file structure for a widget feature in the new application.
Challenge 5 SolutionLukas walks through the solution to challenge 5.
Component Router, Navigating Routes & Query ParametersConfiguration 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 RoutesScott 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 1Scott 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 2Scott 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 6In 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 SolutionScott walks through the solution to challenge 6.
Component System ArchitectureRather 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 ContractsComponent contracts represent an agreement between software suppliers and consumers. Inputs and outputs are defined and enforce how the component will be consumed.
@Input & @OutputLukas 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 DemonstrationLukas 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 ComponentsSmart 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 EncapsulationLukas 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 7In this challenge, you will create “dumb” widgets-list and widget-details components using @Input and @Output.
Challenge 7 Solution Part 1Lukas walks through the solution to challenge 7. In this first part, he creates the widgets-list component.
Challenge 7 Solution Part 2Lukas continues demonstrating the solution to challenge 7 by creating the widget-details component.
Attribute DirectivesScott 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 PropertyScott 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 DirectivesScott 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 8In 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 1Scott begins walking through the solution to challenge 8.
Challenge 8 Solution Part 2Scott finishes the walk through of the challenge 8 solution.
Form BuilderForm 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 FormsLukas 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 9In 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 1Lukas begins walking through the solution to challenge 9. He starts with adding the form controls, bindings, and event handlers.
Challenge 9 Solution Part 2Lukas 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.
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. Scott takes a look at number of 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, Scott compares them to Promises. Then he talks briefly about the Headers object.
HTTP Demonstration Part 1Scott 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 2Scott 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 10In this challenge, you will create a method inside the service that uses HTTP to get widgets.json.
Challenge 10 Solution Part 1Scott 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 2Scott finishes his walk through the challenge 10 solution by adding the ability to POST to the widgets.json file.
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 DemonstrationLukas 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.