Merge pull request Urigo#1059 from barbatus/master

Angular 2 Tutorial Updates: fixes outdated syntax in multiple steps.

Author: Urigo

docs/angular-meteor/client/content/angular-2/angular-2.html

@@ -5,7 +5,7 @@
         <h1 class="title">A Clear Migration Path to Angular 2.0</h1>
         <img src="/images/angular-2-shield-large.png"/>
         <p>Together with our community members, we have been working on getting Angular-Meteor working with Angular 2.</p>
-        <p>We think we created a good solution for working with Angular 2.0 and migrating to it.</p>
+        <p>We think we've created a good solution to work with Angular 2.0 and to migrate to it.</p>
       </div>
       <div class="row">
         <div class="col-sm-6 angular-2-now">
@@ -170,10 +170,10 @@ <h4 class="sample-code">
         </div>
         <div class="col-sm-6 angular-2-alpha">
           <div class="angular-2-option">
-            <h2>Angular 2.0.0-alpha</h2>
+            <h2>Angular 2.0.0-beta</h2>
             <p>
-              An angular2-meteor package with all the dependencies (TypeScript, System.js, etc...) so you can start writing Angular 2.0 code right away.
-              written by - <a href="https://github.com/barbatus"><i class="fa fa-github"></i> @barbatus</a>, <a href="https://github.com/netanelgilad"><i class="fa fa-github"></i> @netanelgilad</a> and <a href="https://github.com/ShMcK"><i class="fa fa-github"></i> @ShMcK</a>.
+              An angular2-meteor package with all the dependencies (TypeScript, System.js, etc...), so you can start writing Angular 2.0 code right away.
+              Written by -- <a href="https://github.com/barbatus"><i class="fa fa-github"></i> @barbatus</a>, <a href="https://github.com/netanelgilad"><i class="fa fa-github"></i> @netanelgilad</a> and <a href="https://github.com/ShMcK"><i class="fa fa-github"></i> @ShMcK</a>.
             </p>
           </div>
           <div class="ctas">
@@ -200,7 +200,7 @@ <h4 class="sample-code">
 ```
 /// <reference path="../typings/angular2-meteor.d.ts" />
 
-import {Component, View, NgFor} from 'angular2/angular2';
+import {Component, View} from 'angular2/core';
 
 import {Parties} from 'collections/parties';
 
@@ -210,8 +210,7 @@ <h4 class="sample-code">
   selector: 'app'
 })
 @View({
-  templateUrl: 'client/app.html',
-  directives: [NgFor]
+  templateUrl: 'client/app.html'
 })
 class Socially {
   parties: Mongo.Cursor<Object>;

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_02.md

@@ -18,16 +18,12 @@ We replaced the hard-coded party list with the [NgFor](https://angular.io/docs/j
 * The `*ngFor="#party of parties"` attribute in the `li` tag is an Angular repeater directive. The repeater tells Angular to create a `li` element for each party in the list using the `li` tag as the template.
 * The expressions wrapped in the double curly braces ( `{{dstache}}party.name}}` and `{{dstache}}party.description}}` ) will be replaced by the value of the expressions.
 
-To get this to work, we'll have to import NgFor and tell Angular 2 we are using it in the template.
-
-{{> DiffBox tutorialName="meteor-angular2-socially" step="2.2"}}
-
-Just to be clear, make sure you:
-
-- added `NgFor` to the `import` statement.
-- added `NgFor` as a directive in the view
-
-Why so much work setting up a new dependency? Angular 2 is trying to avoid namespace collisions, so dependencies are always imported and specified.
+It's worth to mentione that `ngFor` is a core attribute in Angular 2, and along with some other 
+directives, like `ngIf`, `ngClass` etc, including as well _form_ directives (which will be heavily used on the 4th step), like `ngForm`, it constitutes so called _common_ attributes.
+You can check out them [here](https://angular.io/docs/js/latest/api/common/COMMON_DIRECTIVES-let.html).
+The main point about them is that they are globally available in every component template, which means you don't need
+to import them manually into the component's view, in comparison to a custom directive or routing directives.
+We'll be creating own components, as well as use routing in the next steps, so you'll have hands on everything you need. 
 
 # Component as a Controller
 
@@ -42,7 +38,7 @@ This code will go inside of our Socially class [`constructor`](https://developer
 
 We can attach data with the context "this", referring to the Socially class.
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="2.3"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="2.2"}}
 
 Run the app again.
 
@@ -57,7 +53,7 @@ Thanks to TypeScript, we can use this compilation diagnostics to create less bug
 This comes as a great benefit of choosing TypeScript as a primary language
 for our app. So lets define our `parties` property:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="2.4"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="2.3"}}
 
 You'll see the data model, parties, is now instantiated within the Socially component.
 

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_03.md

@@ -102,8 +102,6 @@ __`client/app.ts`:__
 
     import {NgZone, Component, View} from 'angular2/core';
 
-    import {NgFor} from 'angular2/common';
-
     import {bootstrap} from 'angular2/bootstrap';
 
     import {Parties} from 'collections/parties';
@@ -113,8 +111,7 @@ __`client/app.ts`:__
     })
 
     @View({
-      templateUrl: "client/app.html",
-      directives: [NgFor]
+      templateUrl: "client/app.html"
     })
 
     class Socially {

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_04.md

@@ -48,7 +48,13 @@ done by adding `PartiesForm` class to the View annotation of the `Socially`, lik
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="4.4"}}
 
-Again, first we import the class, then we add it to the list of used directives in the View.
+Here's a good example how to import and link custom components together:
+
+- the component class we want to use is imported
+- we add it to the list of directives to use in the `View` annotation
+
+As soon as it's done, imported component's directive becomes available in the
+template.
 
 # Angular 2 Forms
 
@@ -75,14 +81,12 @@ Let's call this way _Model-Driven Forms_.
 
 ## Model-Driven Forms
 
-First up, let's import the necessary dependencies and provide the View annotation with the form directives.
+Let's construct our form model. There is a special class for this called `FormBuilder`.
+First things first, importing necessary dependencies should be done first.
+Then we are building the model and its future fields with help of the `FormBuilder` instance:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="4.5"}}
 
-Next, we can construct our form model. We are going to use the help of special class called `FormBuilder`.
-
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.6"}}
-
 Each element of the form model is actually going to be an instance of `Control` type.
 It's a special type, which binds to a form input element and can provide data validation
 in the model on demand.
@@ -122,7 +126,7 @@ Now, since `name` and `location` are required fields in our model, let's set up
 
 In Angular2, it's less then easy, just add `Validators.required` as a second parameter to a required control:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.7"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.6"}}
 
 We can check `partiesForm.valid` property to determine if the form is valid:  
 
@@ -131,9 +135,10 @@ We can check `partiesForm.valid` property to determine if the form is valid:
 
 Now let's bind form model to the form and its input elements. Here we use special 
 from directives: `ngFormModel` and `ngControl`, that do all the magic by binding properies, that we
-just defined, to the DOM elements.
+just defined, to the DOM elements. As was mentioned in the earlier steps, these form directives are
+available right away in each template — no need to import them into the component itself:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.8"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.7"}}
 
 Now each time the user types inside these inputs, the value of the `partiesForm` and its controls will be automatically updated.
 Conversely, if `partiesForm` is changed outside of the HTML, the input values will be updated accordingly.
@@ -168,11 +173,11 @@ which is exactly what we need — the form model object.
 Now let's bind a submit event to the add button.
 This event will trigger if the button is clicked, or if the user presses enter on the final field.
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.9"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.8"}}
 
 In Angular 2, events are indicated by the round bracket () syntax. Here we are telling Angular to call a method `addParty` on submit and pass in the value of the form, `f`. Let's add the addParty method to our PartiesForm class.
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.10"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.9"}}
 
 > Note: TypeScript doesn't know that controls properties are of Control type.
 > That's why we are casting them to the Control type.
@@ -185,7 +190,7 @@ Now, let's add the ability to delete parties.
 
 Let's add an X button to each party:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.11"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.10"}}
 
 
 Here again, we are binding an event to the class context and passing in the party as a parameter.
@@ -194,7 +199,7 @@ Let's go into the class and add that method.
 
 Add the method inside the Socially class in `app.ts`:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="4.12"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="4.11"}}
 
 The Mongo Collection Parties has a method called "remove". We search for the relevant party by its identifier, `_id`, and delete it.
 

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_05.md

@@ -14,12 +14,17 @@ Routing functionality in Angular traditionally goes in a separate library.
 In Angular 2, there is a separate module for this called `angular2/router` (read about routing API [here](https://angular.io/docs/js/latest/api/router/)).
 
 Angular2-Meteor package contains `angular2/router` along with the code, so you can start importing it right out of the box.
-Angular 2 routing turns out to be a small fraction of all Angular 2 source code (less than 100k uncompressed);
-it made sense to include it by default into the package.
+Angular 2 routing turns out to be a rather small module in comparison to other major Angular 2 modules, besides,
+it's expected that Angular 2 NPM will be used directly in the future versions of Meteor (1.3).
+These were two main reason to make routing a part of this package.
 
 Let's import routing dependencies into our app. We'll need router providers,
 router directives and router configuration.
 The reason why we need all of them you'll know about a bit later.
+There are two special arrays that contain all available routing directives and
+providers correspondly: `ROUTER_DIRECTIVES` and `ROUTER_PROVIDERS`.
+We also add `ROUTER_DIRECTIVES` to the View decorator itself to import all
+directive dependencies into the template:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="5.1"}}
 
@@ -167,7 +172,7 @@ parameters of the current URL. Right after that moment if a `PartyDetails` insta
 it's created with `RouteParams` injected and equalled to the current URL inside the constructor.
 
 If you want to read more about dependency injection in Angular 2, you can find excessive overview in this [article](http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html).
-If you are interested what class metadata is, proceed [here](http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html)
+If you are interested what class metadata is, proceed [here](http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html).
 
 Let's now load a party instance using received ID parameter:
 

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_06.md

@@ -23,19 +23,13 @@ Since we have a routerLink button on the page that redirects back to the list (t
 
 ## ngModel
 
-[ngModel](https://angular.io/docs/js/latest/api/common/NgModel-directive.html) binds a view form to the component's model, which can be an object of any type, in comparison to
-Model-Driven binding where `ControlGroup` is used. Let's setup the dependencies and look at an example.
+[ngModel](https://angular.io/docs/js/latest/api/common/NgModel-directive.html) binds a HTML form to the component's model, which can be an object of any type, in comparison to
+the Model-Driven binding where `ControlGroup` instance is used.
 
-The `NgModel` directive can be found in the `FORM_DIRECTIVES`. First, import it and add it to your list of View directives.
+The syntax looks a bit different: `[(ngModel)]`. `ngModel` binds to the party properties and fill out the inputs, and vice versa:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="6.2"}}
 
-Now that Angular knows about NgModel, we can use it in our template.
-
-The syntax looks a bit different: `[(ngModel)]`. NgModel binds to `this.party` and the data should fill out the inputs.
-
-{{> DiffBox tutorialName="meteor-angular2-socially" step="6.3"}}
-
 Let's do a little test to see how form controls and events work in Angular 2. Bind to `party.name` below the input, then change the input text.
 
     <label for="name">Name</label>
@@ -70,7 +64,7 @@ But let's keep party details view simple for now, without using form Controls.
 
 Lastly, let's add a submit event handler that saves the current party:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="6.4"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="6.3"}}
 
 # Summary
 

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_08.md

@@ -117,7 +117,7 @@ __`client/parties-form/parties-form.ts`__:
     })
     @View({
       templateUrl: 'client/parties-form/parties-form.html',
-      directives: [FORM_DIRECTIVES, AccountsUI]
+      directives: [AccountsUI]
     })
     @InjectUser()
     export class PartiesForm extends MeteorComponent {
@@ -210,7 +210,7 @@ And then pass it in `@CanActivate` attribute:
     })
     @View({
         templateUrl: 'client/party-details/party-details.html',
-        directives: [RouterLink, FORM_DIRECTIVES]
+        directives: [RouterLink]
     })
     @CanActivate(checkPermissions)
     export class PartyDetails {

docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_09.md

@@ -139,6 +139,12 @@ Let's subscribe to the new publication in the PartyDetails to load one specific
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="9.9"}}
 
+As you can see above, the `party` property is undefined initially, which 
+means at the moment when template is being rendered it's undefined too.
+Angular 2 rendering engine doesn't check availability of the template variables while rendering, which differs
+from how Blaze works. We are supposed to do it themselves, that's what
+`ngIf` directive exists for, which is a core directive and available globally:
+
 {{> DiffBox tutorialName="meteor-angular2-socially" step="9.10"}}
 
 Run the app and click on one of the party links. You'll see that party details page loads with full data as before.