rangle / angular-training-slides

Slides for the Angular 2 training

Angular Training Materials

This repository contains slides and other materials used in Rangle.io's Angular training course. The slides are written in Markdown and use Reveal.js for display. Instructors are strongly encouraged to file issues and submit pull requests with suggestions, corrections, extensions, and other improvements.

The Vision Thing

Our teaching relies on live coding. Instead of presenting slides to learners, instructors write code as they go along, using whatever tools they would use in real life. Live coding's advantages are:

1. Watching a program being written is more compelling than watching someone page through slides that present bits and pieces of the same code.

2. It enables instructors to be more responsive to "what if?" questions. Where a slide deck is like a railway track, live coding allows instructors to go off road and follow their learners' interests.

3. People learn more than we realize we are teaching by watching how instructors do things.

4. It slows the instructor down: if she has to type in the program as she goes along, she can only go twice as fast as her learners, rather than ten times faster as she could with slides.

5. Learners get to see instructors' mistakes and how to diagnose and correct them. Novices are going to spend most of their time doing this, but it's left out of most textbooks.

6. Watching instructors make mistakes shows learners that it's all right to make mistakes of their own. Most people model the behavior of their teachers: if the instructor isn't embarrassed about making and talking about mistakes, learners will be more comfortable doing so too.

Live coding doesn't make slides irrelevant. Instead, they serve two purposes:

1. Instructors read them before the lesson to be sure they have a clear picture of the lesson's flow.

2. Learners read them after the lesson for review and reference. They can also be given a printed copy of the slides to mark up during the lesson so that they don't have to take notes from scratch.

The first point is essential for supporting collaboration among instructors. In order for two or more people to teach together effectively, they must have a shared road map of what they are going to do. They may improvise on top of that like jazz musicians improvise on top of a score, but a quick review of a shared slide deck before a class can prevent a lot of crossed wires, dropped balls, and other metaphors.

These slides also help instructors share new and improved ideas with their peers. If one person comes up with a clever way to explain a complex idea, she can (and should) submit a pull request to add her discovery to the slides. Other people who are teaching this material can watch for incoming changes, or look at the differences between the slides as they were the last time they taught and the slides as they are today and see what we have collectively learned about how best to teach this topic.

How to View

These slides use Reveal.js. The first time you want to view them on your computer, you must:

1. Check out this repository from GitHub.

2. Run npm install to install the JavaScript packages needed by Reveal.js.

You only need to do these steps once. After that, you can view the slides at any time:

1. Run npm start to run a local server. This uses port 8081 by default, and will fail with an error if that port is in use.

2. Go to http://localhost:8081 in your browser.

If you edit the slides' source, the browser automatically redisplays within a second or two.

How to Edit

1. The overall directory structure of ./slides/ is fixed by Reveal.js. Please do not make wholesale changes without careful testing.

2. Slide content is stored in multiple Markdown files in ./slides/src/content. Each file contains the source for several slides, separated by triple dashes. More files can be added here as needed; the format of each file is described below.

3. Images used in the slides should be put in ./slides/src/content/images, and must be referred to in Markdown files using relative paths of the form content/images/filename.ext.

4. Instructors' biographies and photos are in ./slides/src/content/bios.

5. ./slides/src/index.html determines the order in which slide files are displayed. To include a new file, copy an existing inclusion and edit the filename.

Markdown slides are separated from each other by --- (three dashes). The first (title) slide of each file must be:

<!-- .slide: data-background="../content/images/title-slide.jpg" -->
<!-- .slide: id="SECTION_SLUG" -->
##  Building Applications with Angular

# SECTION_TITLE

where SECTION_TITLE is the title of this section, and SECTION_SLUG is a unique stem for slide identifiers (typically the stem of the Markdown file's name). For example, the section on Augury uses Augury as the title and augury as the slug.

Regular slides are formatted as:

<!-- .slide: id="SLIDE_SLUG" -->
## SLIDE_TITLE

- Bullet
- Bullet

#####_path/to/example/file_
```FILE_TYPE
code sample
```

SLIDE_SLUG must be a hyphenated unique identifier for this particular slide starting with the slug for the section. For example, the first content slide in the section on Augury has augury-installing as its ID. Reveal.js uses these IDs to create unique (bookmarkable) URLs for the slides, which in turn allows us to refer to particular slides when filing issues.

The slide's title should be brief (no more than 3-4 words) and Title Cased.

Every code sample should have an H5-level heading immediately in front of it with the path to the file containing the code in italics. The code block introduced by triple backquotes should specify a file type for syntax highlighting, such as ts (for TypeScript), js (for plain old JavaScript), or html (for HTML).

Slides with quiz questions should have the following header:

<!-- .slide: id="SECTION-quiz-NUMBER" -->
<!-- .slide: data-background="../content/images/question-slide.jpg" -->

## Quiz

The important differences between these slides and regular slides are the use of quiz and a sequence number in the ID, and the inclusion of the "question" slide background image.

Every quiz should also have answers on a sub-slide. To separate a sub-slide from a regular slide, use +++ instead of ---. The sub-slide should then look like this:

+++
<!-- .slide: data-background="../content/images/answer-slide.jpg" -->

## Answer

The first line after +++ includes the "answer" background image. The sub-slide's title should always be "Answer".

For Each Training Class

1. Create a branch in this repository named after the start date of the training, e.g., 2017-01-01 for a training class that starts on January 1, 2017. (We name branches this way so that client names do not appear in the repository, and to make it easier to track the evolution of material.)

2. Modify ./slides/src/content/introduction.md to include the biographies of the instructors, the class's schedule, and other specific information. Please do not include these changes in any PRs you submit to improve the core material.

3. If you have been asked to create a PDF handout, you can do so directly from the slides. After starting the server, go to http://localhost:8081/?print-pdf and using Google Chrome's print utility to create and save a PDF.

angular-training-slides's Issues

ES6 modules

A brief explanation of ES6 modules (import / export). No need to go into various types of imports/exports.

There is an existing example of this in the examples repo. However, I feel like we can make it simpler.

Create Training Exercises

This card is for tracking training exercises:

• Components in Angular 2 (Adam Winick)
• Directives (Abtin)
• Advanced Components (Adam Winick)
• Angular 2 Dependency Injection (Troy)
• Change Detection
• Pipes (Alan Thai)
• Forms (Alan Thai)
• Modules (Rajinder)
• Routing (Alan Thai)
• TDD Testing (Part 1)
• TDD Testing (Part 2) (Renee)
• TDD Testing (Part 3)

ES5 vs ES6

A brief explanation of what ES5 and ES6 are, what the differences are, and some notes on browser compatibility.

Create "Angular 2 Dependency Injection" Slides

Book sections:

• Angular 2's DI
• @Inject() and @Injectable (only introduce @Injectable, @Inject will be moved to another card as an intermediate topic)
• The Injector Tree

NPM

• Explain npm and how you add third-party dependencies to your application
• Explain how those dependencies are bundled alongside your code (there might be some overlap between this and packaging section)

Fix typos in the slides

Transpilation

An overview of transpilation:

• What is transpilation
  • JS examples: ES6, TS
  • CSS examples: Sass, PostCSS

Difference between prototype vs classical inheritance

Create "Change Detection" Slides

Book sections:

• Change Detection Strategies in Angular 1 vs Angular 2

Create "Components in Angular 2" Slides

Book sections:

• Passing Data into a Component
• Responding to Component Events
• Using Two-Way Data Binding
• Projection
• Structuring Applications with Components
• Using Other Components

Create a Rangle CSS Theme

We should have a CSS theme with Rangle colors and design to promote the brand.

Review the Forms Section

Forms are a very important topic in Angular 2 but we only have a few slides. When doing the online training I knew we were missing some details about forms because we currently have less than 10 slides to cover template driven forms, FormBuilder and validation. We should cover those sections with more detail.

Explain how functional programming styles can be used in JavaScript

• map
• reduce
• filter
• pure functions

An explanation of HTTP requests

• Differences between a web site and a web service
• How basic GET requests work
• Explain basic headers like Content-Type, Content-Length, Accept, and so forth
• Submitting data to an HTTP service – POST/PUT/DELETE requests

Create an exercise for "Components in Depth" section

Create an exercise for the "Components in Depth" section of the slides.

Additional information:

• Exercise Guidelines
• Example exercise

Dark theme is hard to read when projecting

There is a readability issue with the new rangle theme. For example the red

Event Queue

https://www.youtube.com/watch?v=8aGhZQkoFbQ

• An overview of how the browser event queue works
• What it means to post something to the event queue
• How user interactions are also processed through the event queue

Add slides for the `angular-cli`

This section should be the second module of the training right after the "Creating a Hello World Application"

Packaging

The goal here is to teach attendees about how applications are bundled and packaged for production use.

A high-level overview of :

• what is packaging
• why we need it
• a few words on webpack

Remove `inject` from Injecting Dependencies and DOM Changes example

The example for this section uses inject when it is not required. I've generally found that this is confusing for attendees since we introduce a lot of new ng2 specific constructs in this example (including inject). But then we don't actually end up injecting anything here.

We should update the slides and accompanying plunker to not use inject.

it('Should get quote', async(() => {
    fixture.componentInstance.getQuote();
    fixture.whenStable()
      .then(() => {
        fixture.detectChanges();
        return fixture.whenStable();
      })
      .then(() => {
        const compiled = fixture.debugElement.nativeElement;
        expect(compiled.querySelector('div').innerText).toEqual('Test quote');
      });
  }));

JS 101

• Function Chaining / Fluent interfaces
• function declaration
• function expression
• hoisting
• Variable Scope

You can probably reuse most of content from here: https://github.com/rangle/ngcourse/blob/master/handout/03-javascript.md

Add slides for ngrx/store

• We should use @Effects for side effects.
• We should show them how to install @ngrx/store-devtools to see the stream of actions

Move template variables section

Right now the Template Variables section comes right after Two-Way Data Binding Example and before Directives.

I find this flow a bit confusing since, we don't actually use template variables until forms and it is a bit more of an advanced topic. I would suggest moving this to just before the forms section.

Create Printable (PDF) Version

reveal.js supports the creation of a pdf from the slides but that feature is currently broken in this repository. We should create an npm command npm run build:print that creates a version suitable to be printed with the browser.

Add steps for the exercise "Template Driven Form with Validation"

The exercise exists here but we need to provide the steps to solve the exercise.

Remember to follow the guidelines for exercises

Browser render process

• A brief explanation of HTML and CSS
• The conceptual difference between HTML and the DOM
• Render Process
  • Parse HTML + CSS
  • The Render Tree is constructed
  • Layout
  • Paint
• a demo of Chrome Dev tools network panel

Create "Pipes" Slides

Book sections:

• Using Pipes

Add slides for just Redux

@danielfigueiredo did a first approach for the Redux section in #85 but that jumped too quickly to ng2-redux before covering the basics of Redux itself.

We need slides to answer the following questions:

What is Redux?
Why is Redux better than the "traditional" state management (services)?
Explain the Redux architecture (store, actions, reducers)
How can we avoid mutating the state without using a library like Immutable.js (how to use map, the spread operator, Object.assign, etc)?
How is Redux integrated in the Angular ecosystem (RxJS)?
Show a basic Redux implementation without a library, using just observables
What's the difference between ng2-redux and ngrx/store?

Create Slides for Misc. Sections

Book sections:

Advanced Components:

• Component Lifecycle

Change Detection:

• Change Detection Strategies in Angular 1 vs Angular 2

Pipes:

• Using Pipes

Modules:

• Creating a Feature Module

Create "Advanced Components" Slides

Book sections:

• Component Lifecycle

Add a slide for the `async` pipe

We end up using the async pipe quite a lot with observables and promises so it might be worth adding to the slides.

https://angular-2-training-book.rangle.io/handout/pipes/stateful_and_async_pipes.html

Just the example for using async pipe and not implementing stateful pipes.

Create "TDD Testing" Slides (Part 2)

Book Sections:

• Simple Test
• Testing Components
• Verifying Methods and Properties
• Injecting Dependencies and DOM Changes
• Testing Asynchronous Actions
• Refactoring Hard-to-Test Code

Transform the routing exercise into the new format

We have an exercise for the route section using the old format here. In my opinion this exercise is too complex to be able to finish in ~20 min. We should consider creating a simplified one or creating three independent exercises (basic, intermediate and advanced). Suggestions?

Remember to follow the exercise guidelines

Create "Forms" Slides

Book sections:

• Getting Started
• Template-Driven Forms
• Nesting Form Data
• Using Template Model Binding
• Validating Template-Driven Forms
• FormBuilder
• FormBuilder Basics
• Validating FormBuilder Forms
• Visual Cues for Users

Source Maps

• What are source maps and how do they work?
• Demo of debugging source code that the browser doesn’t know how to execute (ES6/TS)

REST

Explain what REST means and what a REST service looks like

Add a slide for the the Injector Tree

Use the image and example from here: https://angular-2-training-book.rangle.io/handout/di/angular2/the_injector_tree.html

Slide content being cut off

Some slides have content that is too long for the slide container. It ends up being cut off. For example slide#21

Once I zoom out you can see that the example link was hidden

Reveal JS allows us to create nested slides which flow ↕️ and then the top level slides flow ⬅️➡️ as usual. Or just break them into multiple top level slides.

Create "Modules" Slides

Book sections:

• Creating a Feature Module

Create "Routing" Slides

Book sections:

• Why Routing?
• Configuring Routes
• Redirecting the Router to Another Route
• Defining Links Between Routes
• Dynamically Adding Route Components
• Using Route Parameters
• Defining Child Routes
• Passing Optional Parameters to a Route

Create "Directives" Slides

Book sections:

• Structural Directives
• NgIf Directive
• NgFor Directive
• NgSwitch Directives
• Using Multiple Structural Directives

Add slides for `$http`

Generate a few slides using the content from gitbook: https://angular-2-training-book.rangle.io/handout/http/

Use the term "Angular" instead of "Angular 2" in the slides

Transform the pipe exercise into the new format

We have already have an exercise for how to create a custom pipe here we just need to adapt it to the new format following the guidelines

Add steps for the exercise "Unit Testing a Service"

The exercise exists here but we need to provide the steps to solve the exercise.

Remember to follow the guidelines for exercises

Add a slide for `<ng-content>` with `select`

There is an eaxmaple in the gitbook we can re-use: https://angular-2-training-book.rangle.io/handout/components/projection.html

Review the Dependency Injection (DI) Section

The current section for DI tries to explain in depth how an injector works. This is information is interesting but is well beyond the level required for an average person to start using Angular 2 DI system. Instead, the section should focus on how to create a service using a class and how to inject it in a module. As a bonus we could also show how to inject a configuration object using @Inject(). We should also discuss the DI tree.

Create "TDD Testing" Slides (Part 1)

Book sections:

• The Testing Toolchain
• Test Setup
• Filename Conventions
• Typings
• Executing Test Scripts

Add steps for the exercise "Unit Testing a Component"

The exercise exists here but we need to provide the steps to solve the exercise.

Remember to follow the guidelines for exercises

Create "TDD Testing" Slides (Part 3)

Book sections:

• Testing Services
• Testing Strategies for Services
• Testing HTTP Requests
• Alternative Mocking Strategy
• Executing Tests Asynchronously