Add some notes to the 12th, 14th steps, minor corrections to the 15th step.

barbatus · barbatus · commit 9966c993863f · 2016-01-01T20:41:00.000+07:00
Fixes Urigo/angular2-meteor#52, Urigo/meteor-angular2.0-socially#23.
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_01.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_01.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_01.md"}}
-{{> downloadPreviousStep stepName="step_0"}}
+{{> downloadPreviousStep stepName="step_00"}}
 
 Let's create a purely static HTML page and then examine how we can turn this HTML code into a template that Angular will use to dynamically display the same result with any set of data.
 
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_02.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_02.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_02.md"}}
-{{> downloadPreviousStep stepName="step_1"}}
+{{> downloadPreviousStep stepName="step_01"}}
     
 Now it's time to make the web page dynamic — with Angular 2.
 
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_03.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_03.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_03.md"}}
-{{> downloadPreviousStep stepName="step_2"}}
+{{> downloadPreviousStep stepName="step_02"}}
 
 OK, so we have a nice client side application that creates and renders it's own data.
 
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_04.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_04.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_04.md"}}  
-{{> downloadPreviousStep stepName="step_3"}}
+{{> downloadPreviousStep stepName="step_03"}}
 
 Now that we have full data binding from server to client, let's interact with the data and see the updates in action.
 
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_05.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_05.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_05.md"}}
-{{> downloadPreviousStep stepName="step_4"}}
+{{> downloadPreviousStep stepName="step_04"}}
 
 In this step, you will learn how to create a layout template and how to build an app that has multiple views by adding routing, using the new Angular router.
 
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_06.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_06.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_06.md"}}
-{{> downloadPreviousStep stepName="step_5"}}  
+{{> downloadPreviousStep stepName="step_05"}}  
 
 In this step we are going to add a form to the party details view and 
 bind a party object to it, so that we'll be able to change party details and
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_07.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_07.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_07.md"}}
-{{> downloadPreviousStep stepName="step_6"}}  
+{{> downloadPreviousStep stepName="step_06"}}  
 
 In this step we will review briefly files structure our Socially app has so far,
 also we’ll look closely into TypeScript features since knowing better primary programming language of this package would be surely beneficial.
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_08.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_08.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_08.md"}}
-{{> downloadPreviousStep stepName="step_7"}} 
+{{> downloadPreviousStep stepName="step_07"}} 
 
 In this section we'll look at how to implement security for an app
 using Meteor and Angular 2 API together.
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_09.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_09.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_09.md"}}
-{{> downloadPreviousStep stepName="step_8"}} 
+{{> downloadPreviousStep stepName="step_08"}} 
   
 You may have noticed that all available parties were always shown on the page
 at the time, independently had they been added by a logged-in user or
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_12.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_12.md
@@ -74,6 +74,17 @@ Run the following line to add this package:
 
     meteor add barbatus:ng2-pagination
 
+> This package's pagination mark-up follows the structure of
+> the Bootstrap's [one](http://www.w3schools.com/bootstrap/bootstrap_pagination.asp),
+> so you can change its look simply by using proper CSS styles.
+> It's worth to note, though, that this package has been created
+> with the idea to be used in this tutorial only.
+> It misses a lot of features that would be quite useful
+> in the real world, for example, custom templates.
+> In the future, this package will be replaced by the
+> pagination [library](https://github.com/michaelbromley/ng2-pagination) from the author of the Angular 1 pagination [angularutils:pagination](https://github.com/michaelbromley/angularUtils-pagination/) when
+> it gets martured enough.
+
 It consists of three main parts: pagination controls, a pagination service
 and a pagination pipe. Pagination controls will simply render what is mentioned above —
 a list of page links to switch between.
@@ -155,12 +166,21 @@ Let's add it:
     meteor add tmeasday:publish-counts
 
 This package exports `Counts` object with all API methods we are going
-to use. Let's publish total number of parties as follows:
+to use. 
+
+> Notice that you'll see a TypeScript warning in the terminal
+> saying that "Counts" is not defined, when you start using the API.
+> That's because "tmeasday:publish-counts" is a regular meteor package,
+> which doesn't know anything about TypeScript and it doesn't add any definition files.
+> If you want to get rid of this message, you are welcome to create own definition file,
+> which is quite easy if you read the 7th step. 
+
+Let's publish total number of parties as follows:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="12.9"}}
 
 > Notice that we are passing `{ noReady: true }` in the last argument so
-> that the publication will be ready only after our main cursor is ready - readiness.
+> that the publication will be ready only after our main cursor is ready — readiness.
 
 We've just created new _numberOfParties_ publication.
 Let's get it reactively on the client side using `Counts` object, and, at the same time,
@@ -218,7 +238,7 @@ to a new value when user clicks on the search button:
 {{> DiffBox tutorialName="meteor-angular2-socially" step="12.15"}}
 
 > Notice that we don't know what size of the search to expect
-> that's why we are re-setting current page to 0.
+> that's why we are re-setting current page to 1.
 
 That's it! We are done with all features we wanted to implement.
 Let's check it out now that everything works properly altogether: pagination, search, sorting,
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_13.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_13.md
@@ -1,5 +1,5 @@
 {{#template name="tutorials.socially.angular2.step_13.md"}}
-{{> downloadPreviousStep stepName="step_012"}}
+{{> downloadPreviousStep stepName="step_12"}}
 
 In this and next steps we are going to implement
 party invitations feature, which is essential for the social apps like ours.
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_14.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_14.md
@@ -1,13 +1,16 @@
 {{#template name="tutorials.socially.angular2.step_14.md"}}
-{{> downloadPreviousStep stepName="step_013"}}
+{{> downloadPreviousStep stepName="step_13"}}
 
 In this step we will learn how to use Meteor methods.
 We'll implement server side logic of the party invitation feature
 using them.
 
 Meteor methods are more secure and reliable way to 
 implement complex logic on the server side in comparison to the direct
-manipulations of Mongo collections.
+manipulations of Mongo collections. Also, we'll touch briefly 
+Meteor's UI latency compensation mechanism that comes with methods.
+This is one of the great Meteor concepts that allows to make
+UI as smooth as possible to the target users.
 
 # Invitation Method
 
@@ -21,6 +24,16 @@ in the server's `main` module to have methods defined properly:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="14.2"}}
 
+One of the features that makes Meteor stand out of most other Web frameworks, thanks again to the isomorphic enviromnent,
+is a concept of the UI latency compensation, realized as part of the Meteor methods.
+In short, it's when visual changes are applied immediately as a response to some user action, 
+even before the server responds anything. If you want to read up some more about this, 
+proceed to [Intoduction to Latency Compensation](https://meteorhacks.com/introduction-to-latency-compensation) written by Arunoda.
+But to make it happen, we need to define methods on the client side as well.
+Let's add importing line to the `client/app.ts`:
+
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.3"}}
+
 As you can see, we've also done a lot of checks to verify that
 all arguments passed down to the method are valid.
 It includes, first of all, checking of the validity of the arguments' types, and then 
@@ -38,11 +51,11 @@ At this point, we are ready to add calling of the new method from the client.
 Let's add a new button right after each user name or email in that 
 list of users to invite in the `PartyDetails`'s template:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.3"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.4"}}
 
 And then, change component to handle the click event and invite an user:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.4"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.5"}}
 
 One more thing before we are done with the party owner's invitation
 logic. We, of course, would like to make this list of users
@@ -55,14 +68,14 @@ in the local Mongo storage. It means if we wrap the line where
 we get the new party into the `autorun` method, this code should
 re-run reactively:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.5"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.6"}}
 
 Here comes an idea how we can update our users list.
 We'll move the line that gets the users list into a 
 separated method, provided with the list of IDs of already invited users;
 and call it whenever we need: right in the above `autorun` method after the party assigment and in the subscription, like that:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.6"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.7"}}
 
 Here comes test time. Let's add a couple of new users.
 Then log in as an old user and add a new party.
@@ -79,29 +92,29 @@ First of all, let's make parties list a bit more secure,
 which means two things: showing private parties to those who have been invited
 or to owners, and elaborate routing activation defence for the party details view:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.7"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.8"}}
 
 The next thing is a party invitee response to the invitation itself. Here as usual, 
 we'll need to update the server side and UI. For the server,
 let's add a new `reply` Meteor method along with already added `invite`:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.8"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.9"}}
 
 As you can see, a new property, called "rsvp", were added
 above to collect user responses of this particular party.
 One more thing. Let's update the party declaration file to
 make TypeScript resolve and compile with no warnings:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.9"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.10"}}
 
 For the UI, let's add three new buttons onto the party details view.
 These will be "yes", "no", "may be" buttons and users responses accordingly:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.10"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.11"}}
 
 Then, handle that click events in the PartyDetails component:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.11"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.12"}}
 
 The last, but not the least, thing is to show statistics of the invitation responses,
 which is really important for the party owner. Let's imagine that any party owner
@@ -111,7 +124,7 @@ an input a party and a one of the RSVP responses, and calculates the total numbe
 associated with this, provided as a parameter, response.
 Add a new pipe to the `lib/pipes.ts` as follows:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.12"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.13"}}
 
 Let's take a look at it closely. The pipe extends `MeteorComponent` and
 uses its `autorun` method to watch for the party's updates.
@@ -130,11 +143,11 @@ value in the list.
 
 Let's make use of this pipe in the `PartiesList` component:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.13"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.14"}}
 
 And then in the component itself:
 
-{{> DiffBox tutorialName="meteor-angular2-socially" step="14.14"}}
+{{> DiffBox tutorialName="meteor-angular2-socially" step="14.15"}}
 
 Now is the testing time! Our test plan will be to check that some invited user is able to reply to an
 invitation, and then we are going to verify that the party's statistics update properly and,
diff --git a/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_15.md b/docs/angular-meteor/client/content/tutorials/socially/angular2/tutorials.socially.angular2.step_15.md
@@ -30,12 +30,13 @@ There is one exception, though. Since the `hidden` is rather new, it's not suppo
 If you need support of the older browsers, you are forced to implement a new directive attribute similar to the `ng-hide` yourself or
 make use of already existed one if any (they, for sure, will appear in the future).
 
-There are at least two places on the main page where our app will benefit off if they are hidden in the anonymous mode: 
-the party addition form and "remove" button after each party in the parties list.
+There are at least two places on the main page that will improve user experience of the app
+if they are hidden in the anonymous mode: 
+the party addition form and "remove" button in the bottom of each party in the parties list.
 So, let's toggle on and off these components with the help of the `hidden` attribute, but first let's inject 
 the user property into the PartiesList component, since this is what our attribute
 binding will depend on. User injection was already mentioned on the step 8th,
-let's make use of it now for the practice:
+let's make practical use of it now:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="15.1"}}
 
@@ -51,18 +52,18 @@ Don't forget to add _barbatus:ng2-meteor-accounts_ package to make it work.
 Now run the app. Party addition form and "remove" buttons
 should disapper if you are not logged-in. Try to log in: everything should be back now.
 
-> Note that CSS style "display" property has priority over the `hidden`.
+> Note that CSS's "display" property has priority over the `hidden`.
 > So that if one of the CSS classes of any element has this property set,
 > _hidden_ won't work. In this case, you'll have to wrap the element into
-> some container element and assign CSS classes with the "display" there.
+> some container element and assign CSS classes with the "display" on that parent container.
 
 Now is the time of the PartyDetails component and `disabled` attribute.
 As now, everybody, who has access to the party details page,
 is able to change values of the inputs, but, at the same, is prohibited to save anything
 (remember the parties security added on the step 8th?).
 Let's disable these inputs for everybody except owners.
 
-We are adding a `isOwner` property similar to the `isOwner` method above:
+We are adding a `isOwner` property similar to the `isOwner` but method above:
 
 {{> DiffBox tutorialName="meteor-angular2-socially" step="15.3"}}
 
@@ -77,12 +78,13 @@ Then, adding new bindings in the template:
 One of the important things that are worth to be mentioned 
 is the difference between the `hidden` attribute and `ngIf` directive.
 While the `hidden` shows and hides a DOM element that is already rendered,
-`ngIf` adds new element each time or removes it. The latter seems
+`ngIf` adds new element each time or removes an existed one. The latter seems
 to be much more heavier, and, hence, should be slowly. That's why it makes sense to
-`ngIf` if the decision to show or hide some part is made on the page load.
-Regarding our party details page, it makes sense to show conditionally
-two parts: the invitation response buttons to those who are already invited
-and the invitation list to the party owners, and to everybody if the party is public.
+use `ngIf` if the decision to show or hide some part of the UI is made on the page load.
+
+Regarding our party details page, we'll show or hide with the help of `ngIf` two parts
+there: the invitation response buttons to those who are already invited,
+and the invitation list to the party owners and to everybody if the party is public.
 
 We've added already `isOwner` property. Let's add two more: `isPublic` and `isInvited`.
 
@@ -95,7 +97,7 @@ Then, make use of the properties in the template:
 # Summary
 
 In this step we've become familiar with the binding to the DOM attributes in Angular 2 and
-used two of them to make our app better: `hidden` and `disabled`.
+used two of the attributes to make our app better: `hidden` and `disabled`.
 
 The difference between `ngIf` and `hidden` was highlighted, and based on that, `ngIf` 
 was used to make the party details page securer and visually better.
diff --git a/docs/angular-meteor/client/content/tutorials/socially/patches/meteor-angular2-socially.multi.patch b/docs/angular-meteor/client/content/tutorials/socially/patches/meteor-angular2-socially.multi.patch
