Build Web Apps with Angular 2

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.

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. - http://bit.ly/fem-ng2-simple-app - http://angularexamples.io/

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.

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.

Lukas continues explaining the various building blocks inside the Angular 2 framework. He talks about Data Bindings, Services, Directives and Dependency injection.

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.

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.

Lukas walks through the solution to challenge 1.

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 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 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.

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.

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.

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.

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.

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.

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.

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 allow custom logic to be added at various component stages and are implemented as class methods. Example lifecycle hooks are ngOnInit, ngAfterViewInit, and ngOnDestroy.

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.

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.

Lukas walks through the solution to challenge 2.

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.

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.

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.

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.

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.

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.

Scott walks through the solution to challenge 3.

Scott continues his walk through the challenge 3 solution.

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.

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.

Lukas walks through the solution to challenge 4.

Lukas answers a few audience questions about the @Injectable metadata decorator and injecting multiple services.

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.

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.

In this challenge, you will create the file structure for a widget feature in the new application.

Lukas walks through the solution to challenge 5.

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.

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.

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.

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.

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.

Scott walks through the solution to challenge 6.

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 represent an agreement between software suppliers and consumers. Inputs and outputs are defined and enforce how the component will be consumed.

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.

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 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.

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.

In this challenge, you will create “dumb” widgets-list and widget-details components using @Input and @Output.

Lukas walks through the solution to challenge 7. In this first part, he creates the widgets-list component.

Lukas continues demonstrating the solution to challenge 7 by creating the widget-details component.

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.

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.

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.

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.

Scott begins walking through the solution to challenge 8.

Scott finishes the walk through of the challenge 8 solution.

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.

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.

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.

Lukas begins walking through the solution to challenge 9. He starts with adding the form controls, bindings, and event handlers.

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.

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.

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.

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.

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 .

In this challenge, you will create a method inside the service that uses HTTP to get widgets.json.

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.

Scott finishes his walk through the challenge 10 solution by adding the ability to POST to the widgets.json file.

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.

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.