Merge branch 'pr/12' into gh-pages

Conflicts:
	index.html
	src/chapters/chapter3.md

Author: tjvantoll

index.html

@@ -353,6 +353,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 <em>not</em> use self-closing declarations like <code>&lt;Button text=&quot;Sign in&quot; /&gt;</code>. The limitation is related to the <a href="https://github.com/inikulin/parse5">parse5 library</a> Angular 2 uses to parse templates, and you can read <a href="https://github.com/NativeScript/nativescript-angular#known-issues">details about the issue on GitHub</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>
@@ -634,7 +635,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>
@@ -667,7 +668,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 taps 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 taps 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 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>
@@ -772,7 +773,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;;
 
@@ -828,7 +829,15 @@ <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’s 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>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’s docs for a <a href="https://angular.io/docs/ts/latest/guide/dependency-injection.html">thorough discussion of the benefits of dependency injection</a>.</p>
+<blockquote>
+<p><strong>NOTE</strong>: If you’re looking to learn more about Angular 2’s <code>providers</code> array and dependency injection implementation, the <a href="http://blog.thoughtram.io/">thoughtram blog</a> has a great 3-part series that covers the topic in more detail than this guide.</p>
+<ul>
+<li><a href="http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html">Part 1—Dependency Injection</a></li>
+<li><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></li>
+<li><a href="http://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html">Part 3—Multi Providers</a>.</li>
+</ul>
+</blockquote>
 <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
@@ -848,7 +857,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(
@@ -941,7 +950,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>
@@ -996,10 +1005,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(
@@ -1022,7 +1031,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>
@@ -1226,15 +1235,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));
       });
@@ -1412,7 +1421,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)
@@ -1434,7 +1443,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;);
 
@@ -1522,7 +1531,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
@@ -1663,11 +1672,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>
@@ -1708,7 +1717,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]
   );
@@ -1723,14 +1732,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 });
 }
@@ -1743,7 +1752,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]
 );
@@ -1784,7 +1793,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]
     );
@@ -1843,7 +1852,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" />`. The limitation is related to the [parse5 library](https://github.com/inikulin/parse5) Angular 2 uses to parse templates, and you can read [details about the issue on GitHub](https://github.com/NativeScript/nativescript-angular#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>`