Get a high-level overview of the major pieces of Angular 2 and learn how they fit together to create a powerful framework for building out applications. Learn the differences between Angular 1 vs Angular 2. Use the Angular CLI to get started quickly. And compose large Angular 2 applications using services, routes, and subcomponents. Plus, harness the awesome power of observables in your applications.
This course and others like it are available as part of our Frontend Masters video subscription.
Published: March 15, 2017
Table of Contents
Build Awesome Apps with Angular
Getting Started
Course Agenda
Lukas sets the course's first-day agenda to construct a single feature in AngularJS.Review of Demo Application
Reviewing 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. - https://github.com/onehungrymind/ng2-rest-app
The Angular 2 Big Picture
The Benefits of Angular 2
Lukas covers the features and benefits that are in Angular 2 over its previous version.Angular 2 Building Blocks 1
Breaking down the makeup of Angular 2, Lukas reviews Module, Routes, Component, and Service.Angular 2 Building Blocks 2
Continuing to explain the various building blocks inside the Angular 2 framework, Lukas discusses Directives, Data Bindings, and Metadata.Services
Lukas covers Services, specific tasks that can be used in Angular 2 components.Challenge 1
In 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: Solution
Lukas explores Angular 2 sample application, walking through the solution to Challenge 1.
The Angular CLI
Angular CLI
Discussing the problems associated with the moving pieces involved in building JavaScript applications, Lukas covers how Angular CLI can streamline development.AOT Support
Lukas reviews Ahead-of-time (AOT) compilation and its benefits within Angular 2.Extensible Blueprints
Talking about future updates, Lukas discusses extensible blueprints.Angular CLI Installation
Lukas demonstrates building a project with Angular CLI, showing how to generate a Component, a Service, a Build, and linting.Challenge 2
In this challenge, students use the Angular CLI to build the application.Challenge 2: Solution
Taking questions from students, Lukas walks through the solution to Challenge 2.
Component Fundamentals
Component Classes
Lukas demonstrates his approach for creating component classes: Create, Import, Decorate, Enhance, and Repeat (CIDER).Lifecycle Hooks
Lifecycle 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 Demonstration
Lukas 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
In 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: Solution
Lukas walks through solution for Challenge 3.
Templates
Binding
Introducing 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) Operators
Lukas 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 4
In 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. - http://bit.ly/workshop-snippetsChallenge 4: Solution
Lukas walks through solution for Challenge 3 and takes questions from students.
Services
Defining a Service
Just 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 5
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 5: Solution
Lukas walks through the solution for Challenge 4 and takes questions from students.
Routing
Wrapping Up Day 1
Build Awesome Apps with Angular Day 2
Course Introduction: Second Half
Lukas covers the agenda for the second day of the workshop.Review of Angular 2
Reviewing first day's topics and taking questions from students, Lukas covers modules, routes, components, and services in Angular 2.Challenge 6
By 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: Solution
Lukas walks through the solution for Challenge 5 and takes questions from students.
Component Composition
Component Driven Architecture
Going 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 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 and @Output Decorators
Lukas 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 Contractorts
While reviewing @Input and @Output decorators, Lukas takes questions from students.EventEmitter Demonstration
Lukas codes an example using an @Output decorator and a custom EventEmitter.Challenge 7: Input & Output
In this challenge, students create widgets-list and widget-details components using @Input and @Output.Challenge 7: Solution, Part I
Lukas breaks down the solution into two parts. In this first part, he creates the widgets-list component.Challenge 7: Solution, Part II
Abstracting the templates, Lukas continues demonstrating the solution to Challenge 6 by creating the widget-details component.
Forms
Data Binding and Component Review
Before moving onto integrating forms, Lukas reviews data binding and component and answers students questions.Template Driven Forms
Lukas introduces the FormsModule, controls and validate styles in order to create and manage forms in Angular 2.Form Controls
Lukas demonstrates how to group and validate FormControls within a FormGroup.Validation Styles
Adding custom CSS rules, Lukas shows how to modify the visual appearance of form controls when they are valid or not.State Mutations
To 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 8
In 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: Solution
Lukas covers the solution for Challenge 7 as well as demonstrates a couple of debugging techniques.
Server Communiction
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. Lucas takes a look at some 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, Lukas compares them to Promises. Then he talks briefly about the Headers object.HTTP Demonstration
Lukas 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
In this homework challenge, students create a method inside the service that uses HTTP to get JSON.
Wrapping Up
Questions: Observable vs Promise, etc
Wrapping 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 Course
Concluding the workshop, Lukas thanks his students.