Form the docs

Sets up two-way data binding. Equivalent to: <my-cmp [title]="name" (titleChange)="name=$event">

title vs titleChange is not spelled out (to my knowledge) in our docs.

File 01-features.md line 556 this.toppings = toppings'; should be this.toppings = 'toppings';
File 01-features.md line 937 let set = [2, 3, 5, 7, 11]; (it was suggested that 'set' could be a different word).
File 05-di.md line 151 Hambuerger should be Hamburger.

Acceptance Criteria:

• An outline for presenter notes.
• Enough detail so that the presenter can estimate the effort to complete the content.
• Live Coding Examples picked

The webinar will be 2 hours in duration:
45 minutes presentation
45 minutes live coding
15 minutes Q&A

Here is a draft outline for presenter notes from April 11 meeting:
Writing Angular 2 templates====
Passing Data in and out of components
Pipes - improved filters
Components have style
Dependency injection and components
Building trees with components
Component life cycle
Structural directive
Template variables ===

exercises/features/typescript/5.0-block-scope_solution/app/exercise.js outputs the wrong value.

It should display 'true', but instead it displays 'false'.

the meaning of #foo in templates has changed

AC:

• course developers can write slides in Markdown
• the slides should be theme-able enough for marketing

Module names and some semantics have changed.

• update pipe section
• update structural directives section
• update code samples
• update Plunkers
• Update examples folder

Will still be a bit of time until the next release of ng2-redux is ready, but should eventually update the Redux section to include the new .select API

Acceptance Criteria:

• An outline for presenter notes.
• Enough detail so that the presenter can estimate the effort to complete the content.
• Live Coding Examples picked

The webinar will be 2 hours in duration:

• 45 minutes presentation
• 45 minutes live coding
• 15 minutes Q&A

Draft outline from April 11 Online Training Discussion
Stateful vs stateless components
Component architecture
Flux style architecture and taming state
Change detection strategies
Building a maintainable service layer

https://docs.google.com/document/d/19o5H_yOB5_08r4bbT67Y3S-u4hVz6U0l6_boaUSqzmA/edit

Pick and validate a markdown solution for slides for the Angular 2 Webinar Series.

AC: (Thanks Seth!)

• course developers can write slides in Markdown
• the slides should be theme-able enough for marketing

Shouldn't involve much more than stying webinars/index.html

This is more of a best practices issue than anything else. It seems like we're recommending FormBuilder over templates, which makes sense. There are still two syntaxes to FormBuilder and some of our trainees are wondering why we use the "short hand" syntax instead of explicitly defining Controls.

To get around this we ended up doing two different versions on the fly.

We also had a request for a template version of the exercise. That also got done on the fly and it was really easy except for custom validation. To make a custom validator that worked in template only I ended up copying code from the Angular 2 source and producing a (mostly) functional validator that looks like:

import {Directive, Provider, forwardRef} from 'angular2/core';
import {NG_VALIDATORS} from 'angular2/common';
import {CONST_EXPR} from 'angular2/src/facade/lang';

const VALID_TOPPINGS = CONST_EXPR(
    new Provider(NG_VALIDATORS,
      {useExisting: forwardRef(() => ToppingValidator), multi: true}));

@Directive({
  selector: '[validTopping][ngControl],[validTopping][ngFormControl],[validTopping][ngModel]',
  providers: [VALID_TOPPINGS]
})
export class ToppingValidator implements Validator {
  validate(c: AbstractControl): {[key: string]: any} {
    const value = c.value ? c.value.toLowerCase() : '';
    const isValid = ['basil', 'tomato', 'fungi'].indexOf(value) !== -1;
    if (isValid) {
      return null;
    }
    return { 'invalidTopping': true };
  }
}

There's a lot of boilerplate here and there's probably a better way but quickly searching reveals little info on how to do custom validators on templates. This one works okay, but it does not correctly apply all of the modifiers like dirty/touched/pristine etc...

Set up participant polls.
Do a dry run with marketing.
Tune content.

Draft of Outline for Webinar Signup from April 11 Online Training Discussion
"Rolling your Routes - Participants can expect to master the “location bar” with Angular 2 routes.”

Acceptance Criteria:

• Overview, Objective, Target Audience, Assumed Audience Knowledge, What the Audience Member will learn:
• A description of this webinar to which marketing can apply their marketing touch.
• This is not the same as the outline for the presenter notes.
• Detailed enough that participants will want to sign up for the webinar.
• General enough that we can adjust the content as needed when we're writing it.
• Here is an example of what we have posted in the past for ad-hoc webinars: http://go.rangle.io/webinar-intro-to-angular2-components http://go.rangle.io/webinar-intro-to-react-native

running npm install
results in

npm WARN deprecated [email protected]: TSD is deprecated in favor of Typings (https://github.com/typings/typings) - see https://github.com/DefinitelyTyped/tsd/issues/269 for more information

raft of Outline for Webinar Signup from April 11 Online Training Discussion
"Amazing Angular 2 Architecture - ...."

https://docs.google.com/document/d/19o5H_yOB5_08r4bbT67Y3S-u4hVz6U0l6_boaUSqzmA/edit

Acceptance Criteria:

• Overview, Objective, Target Audience, Assumed Audience Knowledge, What the Audience Member will learn:
• A description of this webinar to which marketing can apply their marketing touch.
• This is not the same as the outline for the presenter notes.
• Detailed enough that participants will want to sign up for the webinar.
• General enough that we can adjust the content as needed when we're writing it.
• Here is an example of what we have posted in the past for ad-hoc webinars: http://go.rangle.io/webinar-intro-to-angular2-components
  http://go.rangle.io/webinar-intro-to-react-native

Notably the block scoped examples get transpiled incorrectly and don't work. The code works natively in chrome. It's also worth checking if wrapping in a function fixes that particular example. There's some issues with the "module" being treated as global scope, and let/const do not pollute the global scope

At the top level of programs and functions, let, unlike var, does not create a property on the global object. For example:

ngCourse2 talks about routeParams but there is also a notion of query params. These are fundamentally the same things wrt to usage but the Angular 2 docs do differentiate and we should too.

This could be demonstrated with the existing :message exercise by showing that removing :message turns the route param into a query param. Regardless the programmatic API is the same.

Draft from April 11 Online Training Discussion
"Participants can expect to master Angular 2.0 templates, give them style and structure them into a real world application.”

Acceptance Criteria:

• Overview, Objective, Target Audience, Assumed Audience Knowledge, What the Audience Member will learn:
• A description of this webinar to which marketing can apply their marketing touch. This is not the same as the outline for the presenter notes.
• Detailed enough that participants will want to sign up for the webinar.
• General enough that we can adjust the content as needed when we're writing it.
• Here is an example of what we have posted in the past for ad-hoc webinars:
  http://go.rangle.io/webinar-intro-to-angular2-components
  http://go.rangle.io/webinar-intro-to-react-native

Acceptance Criteria:

• An outline for presenter notes.
• Enough detail so that the presenter can estimate the effort to complete the content.
• Live Coding Examples picked

The webinar will be 2 hours in duration:

• 45 minutes presentation
• 45 minutes live coding
• 15 minutes Q&A

Draft Outline from April 11 Online Training Discussion
Basic Angular 1.x Style config
Lazy routes
Mountable / self contained child routes
Routing life cylce hooks
Routing parameters and state
Passing configured data in routes
Async routes?
Router outlets + multiple outlets
Containers vs. “stateless” components

https://docs.google.com/document/d/19o5H_yOB5_08r4bbT67Y3S-u4hVz6U0l6_boaUSqzmA/edit

http://ngcourse.rangle.io/handout/components/app_structure/passing_data_into_components.html

Our styleguide prefers @Input over inputs: [] because it clearer - the declaration and the type are kept together.

So instead of this:

import {Component} from 'angular2/core';

@Component({
  selector: 'ngc-hello-component',
  inputs: ['name'],
  template: '<p>Hello, {{name}}</p>'
})
export class HelloComponent {
  name: string;
}

We should do this:

import {Component} from 'angular2/core';

@Component({
  selector: 'ngc-hello-component',
  template: '<p>Hello, {{name}}</p>'
})
export class HelloComponent {
  @Input() name: string;
}

Acceptance Criteria:

• An outline for presenter notes.
• Enough detail so that the presenter can estimate the effort to complete the content.
• Live Coding Examples picked

The webinar will be 2 hours in duration:

• 45 minutes presentation
• 45 minutes live coding
• 15 minutes Q&A

Draft outline from April 11 Online Training Discussion
Template driven approach to forms
Programmatic forms, explicit and “list”
Validation, built-in, custom, async
Observables
Styling forms - pristine, valid, …
Http
Testing Forms

https://docs.google.com/document/d/19o5H_yOB5_08r4bbT67Y3S-u4hVz6U0l6_boaUSqzmA/edit

So far in one instance our Observer example was blocked by a firewall. We re-wrote the example on the fly to use GitHub's API instead. This is not a huge problem but it's worth mentioning since we might have other enterprise clients with restrictive firewalls. Since they need GitHub for npm installs etc it seems like it might be more consistent?

I have a rough draft of a GitHub version.

Line 75 causes this TS error: Overload signature is not compatible with function implementation.

Here's the code:

function accessor(db: Dictionary, key: string, callback: NodeCallback);
function accessor(db: Dictionary, key: string, value: any,
                  callback: NodeCallback) {
  // ...
}

The example filters results based on id > 5. The accompanying text talks about a non-existing filter based on age > 18.

It's not synchronous.... we even say as much below.

We're basically saying that it's somehow 'more synchronous' than subscribe, without actually being synchronous. This could use some clarification.

Also the last paragraph in that section about try/catch is incorrect - that can't work.

@sumitarora brought to my attention the concept of view bindings. The tl;dr is that it's possible to bind a dependency to a particular component and have that dependency only accessible by its bound component.

We need to update the DI section with an example to reflect this. Sumit has an example in the works.

Draft of Outline for Webinar Signup from April 11 Online Training Discussion
"Forms without Fears- Participants can expect to master capturing data with Angular 2 forms, validating and sending it to a server.”

Acceptance Criteria:

• Overview, Objective, Target Audience, Assumed Audience Knowledge, What the Audience Member will learn:
• A description of this webinar to which marketing can apply their marketing touch.
• This is not the same as the outline for the presenter notes.
• Detailed enough that participants will want to sign up for the webinar.
• General enough that we can adjust the content as needed when we're writing it.
• Here is an example of what we have posted in the past for ad-hoc webinars: http://go.rangle.io/webinar-intro-to-angular2-components http://go.rangle.io/webinar-intro-to-react-native

https://angular.io/docs/ts/latest/guide/attribute-directives.html

The Angular 2 team has updated their documentation on directives since our first iteration of the course. We should figure out where best to place information about directives in our course and include that information.

The first exercise in the features/typescript exercise section does not work - there is no correct solution.

The lazy loading example isn't completely fleshed out. This is likely due to Angular 2's current beta status. We could likely still make a simple example within our SystemJS exercise setup.

For sections that have an exercise, create a section with a list of exercises and expected results and how to get them running.