fix: minor editing points, also usage of let over var

Author: NathanWalker

index.html

@@ -341,6 +341,7 @@ <h4 class="exercise-start">
 
 <blockquote>
 <p><strong>NOTE</strong>: Notice the back-tick character (`) used with the <code>template</code> property. This character is used to define an <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">ES2015 template literal</a>, which TypeScript supports, and which allows you to write multi-line strings without using messy string concatenation.</p>
+<p><strong>WARNING</strong>: Take special care to properly close all your UI elements and <strong>not</strong> use self-closing declarations like <code>&lt;Button text=&quot;Sign in&quot; /&gt;</code>. This is related to the <code>Parse5DomAdapter</code> noted <a href="https://github.com/NativeScript/nativescript-angular/blob/master/README.md#known-issues&quot;">here</a>.</p>
 </blockquote>
 <p>This code adds two new NativeScript UI elements: a <a href="http://docs.nativescript.org/ApiReference/ui/text-field/how-to.html">text field</a> and a <a href="http://docs.nativescript.org/ApiReference/ui/button/how-to.html">button</a>. Much like HTML elements, NativeScript UI elements provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:</p>
 <ul>
@@ -618,7 +619,7 @@ <h4 class="exercise-start">
     <b>Exercise</b>: Two-way data binding with Angular 2
 </h4>
 
-<p>In <code>app/app.component.ts</code>, find the find the first <code>&lt;TextField&gt;</code>, and replace it with the <code>&lt;TextField&gt;</code> below, which introduces a new <code>[(ngModel)]</code> attribute:</p>
+<p>In <code>app/app.component.ts</code>, find the first <code>&lt;TextField&gt;</code>, and replace it with the <code>&lt;TextField&gt;</code> below, which introduces a new <code>[(ngModel)]</code> attribute:</p>
 <pre><code class="lang-XML">&lt;TextField hint=&quot;Email Address&quot; id=&quot;email&quot; keyboardType=&quot;email&quot; [(ngModel)]=&quot;email&quot;
   autocorrect=&quot;false&quot; autocapitalizationType=&quot;none&quot;&gt;&lt;/TextField&gt;
 </code></pre>
@@ -651,7 +652,7 @@ <h4 class="exercise-start">
 </code></pre>
 <div class="exercise-end"></div>
 
-<p>The previous examples switches each button’s’ <code>text</code> attribute from a simple string—e.g. <code>&lt;Button text=&quot;Sign Up&quot;&gt;</code>—to an attribute binding that is dependent on a value defined in the <code>AppComponent</code> class—e.g. <code>&lt;Button [text]=&quot;isLoggingIn ? &#39;Sign in&#39; : &#39;Sign up&#39;&quot;&gt;&quot;</code>. Now, when the value of the <code>isLoggingIn</code> attributes changes after the user clicks the bottom button, Angular is smart enough to update the text of the button automatically. The result looks like this:</p>
+<p>The previous examples switches each button’s <code>text</code> attribute from a simple string—e.g. <code>&lt;Button text=&quot;Sign Up&quot;&gt;</code>—to an attribute binding that is dependent on a value defined in the <code>AppComponent</code> class—e.g. <code>&lt;Button [text]=&quot;isLoggingIn ? &#39;Sign in&#39; : &#39;Sign up&#39;&quot;&gt;&quot;</code>. Now, when the value of the <code>isLoggingIn</code> attributes changes after the user clicks the bottom button, Angular is smart enough to update the text of the button automatically. The result looks like this:</p>
 <p><img src="images/chapter3/android/4.gif" alt="Text changing on Android">
 <img src="images/chapter3/ios/4.gif" alt="Text changing on iOS"></p>
 <p>At this point, you have a basic login screen setup with two-way data binding—which isn’t bad for 20 some lines of code of TypeScript. (Think about how much code you’d have to write in Android Studio <em>and</em> Xcode to accomplish the same task.) To this point though you’ve been placing all of your logic in a single TypeScript file, which doesn’t scale all that well for real-world applications.</p>
@@ -752,7 +753,7 @@ <h4 class="exercise-start">
     <b>Exercise</b>: Add an Angular 2 service
 </h4>
 
-<p>There’s are several new concepts to introduce with Angular services, so we’re going to start by stubbing out a new <code>register()</code> method, and then come back to the implementation later in this section. With that in mind, open <code>app/shared/user/user.service.ts</code> and paste in the following code:</p>
+<p>There are several new concepts to introduce with Angular services, so we’re going to start by stubbing out a new <code>register()</code> method, and then come back to the implementation later in this section. With that in mind, open <code>app/shared/user/user.service.ts</code> and paste in the following code:</p>
 <pre><code class="lang-TypeScript">import {Injectable} from &quot;angular2/core&quot;;
 import {User} from &quot;./user&quot;;
 
@@ -776,6 +777,9 @@ <h4 class="exercise-start">
 })
 </code></pre>
 <p>The <code>providers</code> array is a simple list of all the Angular 2 services that you need to use in your component. At the moment you only have one service, so your <code>providers</code> array only has one entry.</p>
+<blockquote>
+<p><strong>NOTE</strong>: To learn more about the <code>providers</code> array in addition to gaining an in-depth understanding of Angular 2&#39;s Dependency Injection system, The <a href="http://blog.thoughtram.io/">Thoughtram Blog</a> provides a great 3 parts series on the topic. <a href="http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html">Part 1</a>, <a href="http://blog.thoughtram.io/angular/2015/08/20/host-and-visibility-in-angular-2-dependency-injection.html">Part 2 - Host and Visibility</a>, <a href="http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html">Part 3 - Multi Providers</a>.</p>
+</blockquote>
 <p>Next, replace <code>AppComponent</code>’s existing <code>constructor</code> with the code below:</p>
 <pre><code class="lang-TypeScript">constructor(private _userService: UserService) {
   this.user = new User();
@@ -808,7 +812,7 @@ <h4 class="exercise-start">
 </code></pre>
 <p>This is Angular 2’s dependency injection implementation in action. Because you registered <code>UserService</code> as a provider in this component’s <code>providers</code> array, when Angular sees this syntax it creates an instance of the <code>UserService</code> class, and passes that instance into the component’s constructor.</p>
 <p>This begs a bigger question though: why bother with all of this? Why not run <code>this._userService = new UserService()</code> in the component’s constructor and forget the complexity of <code>@Injectable</code> and <code>providers</code>?</p>
-<p>The short answer is a dependency-injection-based approach to coding keeps your classes less coupled, and therefore more maintainable and testable as your application evolves over time. For a longer answer, head over to the Angular for a <a href="https://angular.io/docs/ts/latest/guide/dependency-injection.html">more thorough discussion of the benefits of dependency injection</a>.</p>
+<p>The short answer is a dependency-injection-based approach to coding keeps your classes less coupled, and therefore more maintainable and testable as your application evolves over time. For a longer answer, head over to the Angular Docs for a <a href="https://angular.io/docs/ts/latest/guide/dependency-injection.html">more thorough discussion of the benefits of dependency injection</a>.</p>
 <p>Let’s return to our example and make the registration process actually work.</p>
 <h4 class="exercise-start">
     <b>Exercise</b>: Use an Angular 2 service
@@ -828,7 +832,7 @@ <h4 class="exercise-start">
   constructor(private _http: Http) {}
 
   register(user: User) {
-    var headers = new Headers();
+    let headers = new Headers();
     headers.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
 
     return this._http.post(
@@ -921,7 +925,7 @@ <h4 class="exercise-start">
 
 <p>To this point you’ve been putting your login page code in <code>app.component.ts</code>. Let’s move that logic into the <code>pages/login</code> folder to make room for additional pages.</p>
 <p>First, open <code>app/app.component.ts</code> and copy its contents into <code>app/pages/login/login.component.ts</code>.</p>
-<p>Next, in <code>login.component.ts</code>, change the name of the class from “AppComponent” to “LoginPage, and update the two paths below accordingly:</p>
+<p>Next, in <code>login.component.ts</code>, change the name of the class from “AppComponent” to “LoginPage”, and update the two paths below accordingly:</p>
 <pre><code class="lang-TypeScript">import {User} from &quot;../../shared/user/user&quot;;
 import {UserService} from &quot;../../shared/user/user.service&quot;;
 </code></pre>
@@ -976,10 +980,10 @@ <h4 class="exercise-start">
   { path: &quot;/List&quot;, component: ListPage, name: &quot;List&quot; }
 ])
 </code></pre>
-<p>Angular 2 now knows about the list page, but we still need to navigate the user to that page at the appropriate time. Our next step is to allow users to log into their accounts, and to take navigate them to the new list page after they successfully authenticate.</p>
-<p>To do that, start by opening <code>app/shared/user/user.service.ts</code> and the <code>login()</code> function below to the existing <code>UserService</code> class:</p>
+<p>Angular 2 now knows about the list page, but we still need to navigate the user to that page at the appropriate time. Our next step is to allow users to log into their accounts, then navigate them to the new list page after they have successfully authenticated.</p>
+<p>To do that, start by opening <code>app/shared/user/user.service.ts</code> and add the <code>login()</code> function below to the existing <code>UserService</code> class:</p>
 <pre><code class="lang-TypeScript">login(user: User) {
-  var headers = new Headers();
+  let headers = new Headers();
   headers.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
 
   return this._http.post(
@@ -1002,7 +1006,7 @@ <h4 class="exercise-start">
 <p>To use this <code>login()</code> function, return to <code>app/login/login.component.ts</code>, and add the following import to the top of the file:</p>
 <pre><code class="lang-TypeScript">import {Router} from &quot;angular2/router&quot;;
 </code></pre>
-<p>Next, replace the current <code>constructor()</code> declaration with the code below, which adds Angular 2’s <code>Router</code> service:</p>
+<p>Next, replace the current <code>constructor()</code> declaration with the code below, which injects Angular 2’s <code>Router</code> service:</p>
 <pre><code class="lang-TypeScript">constructor(private _router: Router, private _userService: UserService) {
 </code></pre>
 <p>Finally, replace the <code>LoginPage</code>’s existing <code>login()</code> function with the code below:</p>
@@ -1206,15 +1210,15 @@ <h4 class="exercise-start">
   constructor(private _http: Http) {}
 
   load() {
-    var headers = new Headers();
+    let headers = new Headers();
     headers.append(&quot;Authorization&quot;, &quot;Bearer &quot; + Config.token);
 
     return this._http.get(Config.apiUrl + &quot;Groceries&quot;, {
       headers: headers
     })
     .map(res =&gt; res.json())
     .map(data =&gt; {
-      var groceryList = [];
+      let groceryList = [];
       data.Result.forEach((grocery) =&gt; {
         groceryList.push(new Grocery(grocery.Id, grocery.Name));
       });
@@ -1392,7 +1396,7 @@ <h4 class="exercise-start">
   }
 
   // Dismiss the keyboard
-  var groceryTextField = &lt;TextField&gt;topmost().currentPage.getViewById(&quot;grocery&quot;);
+  let groceryTextField = &lt;TextField&gt;topmost().currentPage.getViewById(&quot;grocery&quot;);
   groceryTextField.dismissSoftInput();
 
   this._groceryListService.add(this.grocery)
@@ -1414,7 +1418,7 @@ <h4 class="exercise-start">
 <p>In this function you first ensure the user didn’t submit without typing a grocery. If the user did type something, you dismiss the device’s keyboard with the TextField element’s <code>dismissSoftInput()</code> method, and then call a new <code>add()</code> method on the <code>GroceryListService</code>.</p>
 <p>To finish this example you have to define that new <code>add()</code> method. To do so, open <code>app/shared/grocery/grocery-list.service.ts</code> and paste the following function into the <code>GroceryService</code> class:</p>
 <pre><code class="lang-TypeScript">add(name: string) {
-  var headers = new Headers();
+  let headers = new Headers();
   headers.append(&quot;Authorization&quot;, &quot;Bearer &quot; + Config.token);
   headers.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
 
@@ -1502,7 +1506,7 @@ <h4 class="exercise-start">
         this.groceryList.unshift(groceryObject);
       });
       this.isLoading = false;
-      var groceryList = topmost().currentPage.getViewById(&quot;grocery-list&quot;);
+      let groceryList = topmost().currentPage.getViewById(&quot;grocery-list&quot;);
       groceryList.animate({
         opacity: 1,
         duration: 1000
@@ -1643,11 +1647,11 @@ <h4 class="exercise-start">
 </code></pre>
 <p>Finally, now that you’ve installed and required the plugin, and setup a UI to use it, your last step is implementing the <code>&lt;ActionItem&gt;</code>&#39;s <code>tap</code> handler. Open <code>app/pages/list/list.component.ts</code> again and add the following function to the <code>ListPage</code> class:</p>
 <pre><code class="lang-TypeScript">share() {
-  var list = [];
-  for (var i = 0, size = this.groceryList.length; i &lt; size ; i++) {
+  let list = [];
+  for (let i = 0, size = this.groceryList.length; i &lt; size ; i++) {
     list.push(this.groceryList[i].name);
   }
-  var listString = list.join(&quot;, &quot;).trim();
+  let listString = list.join(&quot;, &quot;).trim();
   socialShare.shareText(listString);
 }
 </code></pre>
@@ -1688,7 +1692,7 @@ <h4 class="exercise-start">
 declare var NSForegroundColorAttributeName: any;
 
 export function setHintColor(args: { view: TextField, color: Color }) {
-  var dictionary = new NSDictionary(
+  let dictionary = new NSDictionary(
     [args.color.ios],
     [NSForegroundColorAttributeName]
   );
@@ -1703,14 +1707,14 @@ <h4 class="exercise-start">
 </code></pre>
 <p>After that, add the following function to the file’s <code>LoginPage</code> class:</p>
 <pre><code class="lang-TypeScript">setTextFieldColors() {
-  var email = &lt;TextField&gt;this.page.getViewById(&quot;email&quot;);
-  var password = &lt;TextField&gt;this.page.getViewById(&quot;password&quot;);
+  let email = &lt;TextField&gt;this.page.getViewById(&quot;email&quot;);
+  let password = &lt;TextField&gt;this.page.getViewById(&quot;password&quot;);
 
-  var mainTextColor = new Color(this.isLoggingIn ? &quot;black&quot; : &quot;#C4AFB4&quot;);
+  let mainTextColor = new Color(this.isLoggingIn ? &quot;black&quot; : &quot;#C4AFB4&quot;);
   email.color = mainTextColor;
   password.color = mainTextColor;
 
-  var hintColor = new Color(this.isLoggingIn ? &quot;#ACA6A7&quot; : &quot;#C4AFB4&quot;);
+  let hintColor = new Color(this.isLoggingIn ? &quot;#ACA6A7&quot; : &quot;#C4AFB4&quot;);
   setHintColor({ view: email, color: hintColor });
   setHintColor({ view: password, color: hintColor });
 }
@@ -1723,7 +1727,7 @@ <h4 class="exercise-start">
 <p>After your app refreshes with this change, you should now see a far more readable hint color:</p>
 <p><img src="images/chapter6/ios/2.png" alt="Better contrast on iOS"></p>
 <p>Let’s back up to the contents of the <code>setHintColor()</code> function so we can discuss what’s going on here.</p>
-<pre><code class="lang-TypeScript">var dictionary = new NSDictionary(
+<pre><code class="lang-TypeScript">let dictionary = new NSDictionary(
   [args.color.ios],
   [NSForegroundColorAttributeName]
 );
@@ -1764,7 +1768,7 @@ <h4 class="exercise-start">
     args.view.android.setHintTextColor(args.color.android);
   }
   if (args.view.ios) {
-    var dictionary = new NSDictionary(
+    let dictionary = new NSDictionary(
       [args.color.ios],
       [NSForegroundColorAttributeName]
     );
@@ -1823,7 +1827,7 @@ <h4 class="exercise-start">
 <p>As cool as Groceries is, it’s currently missing one crucial feature for a grocery management app: the ability to delete groceries from the list.</p>
 <p>The Groceries backend already supports deleting, but it’s up to you to implement the feature in the app. You do get two hints though. First, this is a function you can use in the <code>GroceryListService</code> for performing the necessary HTTP call to delete a grocery:</p>
 <pre><code class="lang-TypeScript">delete(id: string) {
-  var headers = new Headers();
+  let headers = new Headers();
   headers.append(&quot;Authorization&quot;, &quot;Bearer &quot; + Config.token);
   headers.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
 

src/chapters/chapter2.md

@@ -154,6 +154,8 @@ Open `app/app.component.ts` and replace the existing `@Component` with the follo
 
 > **NOTE**: Notice the back-tick character (\`) used with the `template` property. This character is used to define an [ES2015 template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), which TypeScript supports, and which allows you to write multi-line strings without using messy string concatenation.
 
+> **WARNING**: Take special care to properly close all your UI elements and **not** use self-closing declarations like `<Button text="Sign in" />`. This is related to the `Parse5DomAdapter` noted [here](https://github.com/NativeScript/nativescript-angular/blob/master/README.md#known-issues">).
+
 This code adds two new NativeScript UI elements: a [text field](http://docs.nativescript.org/ApiReference/ui/text-field/how-to.html) and a [button](http://docs.nativescript.org/ApiReference/ui/button/how-to.html). Much like HTML elements, NativeScript UI elements provide attributes to let you configure their behavior and appearance. The code you just added uses the following attributes:
 
 - `<TextField>`