Finishing edits of section 3.2.

Author: tjvantoll

index.html

@@ -653,7 +653,7 @@ <h4 class="exercise-start">
 <h3 id="structuring-your-app">Structuring your app</h3>
 <p>There are many reasons to segment any application into modular units, and you can <a href="https://en.wikipedia.org/wiki/Modular_programming">read about the various benefits on Wikipedia</a>. Modularizing NativeScript apps, in addition, has one unique benefit: the ability to share the code you write between Angular-2-built web apps, and Angular-2-built native apps.</p>
 <p>Even if you have no plans to create an Angular 2 web app, separating out your code is still advantageous for a number of other reasons—testability, ease of maintenance, and so forth—but if you <em>do</em> have plans to build an Angular 2 web app, having a chunk of functionality that you can reuse in your native and web apps can be an invaluable time saver.</p>
-<p>To see how this works in action, let’s edit some files in the <code>/shared</code> folder and set them up to be imported.</p>
+<p>To see how this works in action, let’s edit some files in the <code>shared</code> folder and set them up to be imported.</p>
 <h4 class="exercise-start">
     <b>Exercise</b>: Add a model object
 </h4>
@@ -665,12 +665,11 @@ <h4 class="exercise-start">
 }
 </code></pre>
 <p>This code defines a simple <a href="http://www.typescriptlang.org/Handbook#classes">TypeScript class</a> that does nothing more than define two properties—<code>email</code> and <code>password</code>. Note the use of <a href="http://www.typescriptlang.org/Handbook#modules-going-external">TypeScript’s <code>export</code> keyword</a>, as we’ll see why that’s important momentarily.</p>
-<p>Next, open <code>app/app.component.ts</code>, and first add the following <code>import</code> to the top of the file:</p>
+<p>Next, open <code>app/app.component.ts</code>, and add the following <code>import</code> to the top of the file:</p>
 <pre><code class="lang-JavaScript">import {User} from &quot;./shared/user/user&quot;;
 </code></pre>
 <p>Here you import the <code>User</code> class that you just defined. Note the parallel between the <code>export</code> command used in the previous example and the <code>import</code> command used here. The reason the <code>User</code> class is available to import is because it was explicitly exported. You’ll see other examples of <code>import</code> and <code>export</code> as you go through this guide.</p>
 <p>Next, replace the existing <code>AppComponent</code> definition with the one below, which uses the <code>User</code> class you just imported.</p>
-<!-- Todo, explain the isLoggingIn piece - from the exercise above I think. The button XML needs to be edited -->
 <pre><code class="lang-JavaScript">export class AppComponent {
   user: User;
   isLoggingIn = true;
@@ -687,14 +686,28 @@ <h4 class="exercise-start">
 }
 </code></pre>
 <p>Instead of storing data on the <code>AppComponent</code> directly, you’re now using the <code>User</code> model object, which is reusable outside of this page and even outside of this application. You instantiate an instance of the <code>User</code> class in a new <code>constructor</code> function, which Angular 2 invokes when it bootstraps your application.</p>
-<p>Your final step is to use this new model object in your template. To do that, replace the two existing <code>&lt;TextField&gt;</code>s with the code shown below, which updates the <code>[(ngModel)]</code> bindings to point at the new <code>User</code> object:</p>
+<p>Your next step is to use this new model object in your template. To do that, replace the two existing <code>&lt;TextField&gt;</code>s with the code shown below, which updates the <code>[(ngModel)]</code> bindings to point at the new <code>User</code> object:</p>
 <pre><code class="lang-XML">&lt;TextField hint=&quot;Email Address&quot; id=&quot;email&quot; keyboardType=&quot;email&quot; [(ngModel)]=&quot;user.email&quot;
   autocorrect=&quot;false&quot; autocapitalizationType=&quot;none&quot;&gt;&lt;/TextField&gt;
 &lt;TextField hint=&quot;Password&quot; id=&quot;password&quot; secure=&quot;true&quot; [(ngModel)]=&quot;user.password&quot;&gt;&lt;/TextField&gt;
 </code></pre>
-<p>TODO: Better explanation. Move the full template into the login.html file and use <code>templateUrl</code>. </p>
-<p>If you got lost during this section, here’s a copy-and-paste friendly version of the full <code>app.component.ts</code> you should have at this point:</p>
-<pre><code class="lang-JavaScript">import {Component} from &quot;angular2/core&quot;;
+<p>As one final change, because this template is getting to be a bit complex, let’s move it into a separate file. Open <code>app/pages/login/login.html</code> and paste in the following code:</p>
+<pre><code class="lang-XML">&lt;StackLayout&gt;
+  &lt;Image src=&quot;res://logo_login&quot; stretch=&quot;none&quot; horizontalAlignment=&quot;center&quot;&gt;&lt;/Image&gt;
+
+  &lt;TextField hint=&quot;Email Address&quot; id=&quot;email&quot; keyboardType=&quot;email&quot; [(ngModel)]=&quot;user.email&quot;
+    autocorrect=&quot;false&quot; autocapitalizationType=&quot;none&quot;&gt;&lt;/TextField&gt;
+  &lt;TextField hint=&quot;Password&quot; id=&quot;password&quot; secure=&quot;true&quot; [(ngModel)]=&quot;user.password&quot;&gt;&lt;/TextField&gt;
+
+  &lt;Button [text]=&quot;isLoggingIn ? &#39;Sign in&#39; : &#39;Sign up&#39;&quot; id=&quot;submit-button&quot; (tap)=&quot;submit()&quot;&gt;&lt;/Button&gt;
+  &lt;Button [text]=&quot;isLoggingIn ? &#39;Sign up&#39; : &#39;Back to login&#39;&quot; (tap)=&quot;toggleDisplay()&quot;&gt;&lt;/Button&gt;
+&lt;/StackLayout&gt;
+</code></pre>
+<p>Finally, in <code>app/app.component.ts</code>, replace the existing <code>template</code> property with the new <code>templateUrl</code> property shown below:</p>
+<pre><code class="lang-TypeScript">templateUrl: &quot;pages/login/login.html&quot;
+</code></pre>
+<p>In case you got lost during this section, here’s a copy-and-paste friendly of the <code>app/app.component.ts</code> file you should have at this point:</p>
+<pre><code class="lang-TypeScript">import {Component} from &quot;angular2/core&quot;;
 import {User} from &quot;./shared/user/user&quot;;
 
 @Component({
@@ -719,6 +732,9 @@ <h4 class="exercise-start">
 </code></pre>
 <div class="exercise-end"></div>
 
+<blockquote>
+<p><strong>TIP</strong>: With Angular 2 components you have the ability to specify templates and CSS styling in two places—directly within the component, or in external files. For simple components feel free to choose either approach based on your personal preference, but once your templates/styles get to ~10 lines of code, consider using external files exclusively, as mixing non-trivial XML, CSS, and JavaScript code makes your component code less readable.</p>
+</blockquote>
 <p>With this setup you now have a <code>User</code> class that you can share across pages in your app and even across applications. But a model object that’s four simple lines of code isn’t all that exciting. Where this approach really pays off is when you’re able to share your business logic, and the code that hits your backend systems. In Angular 2 those classes are known as services. Let’s look at them next.</p>
 <h3 id="services">Services</h3>
 <p>A login screen isn’t all that useful if it doesn’t actually log users into anything. Therefore, our next task is to take the user’s email address and password, and send them to a backend endpoint to retrieve an authentication token we’ll use later in this guide. We’ll build this functionality as an Angular 2 service.</p>

src/chapters/chapter3.md

@@ -151,7 +151,7 @@ There are many reasons to segment any application into modular units, and you ca
 
 Even if you have no plans to create an Angular 2 web app, separating out your code is still advantageous for a number of other reasons—testability, ease of maintenance, and so forth—but if you _do_ have plans to build an Angular 2 web app, having a chunk of functionality that you can reuse in your native and web apps can be an invaluable time saver.
 
-To see how this works in action, let’s edit some files in the `/shared` folder and set them up to be imported.
+To see how this works in action, let’s edit some files in the `shared` folder and set them up to be imported.
 
 <h4 class="exercise-start">
     <b>Exercise</b>: Add a model object
@@ -168,7 +168,7 @@ export class User {
 
 This code defines a simple [TypeScript class](http://www.typescriptlang.org/Handbook#classes) that does nothing more than define two properties—`email` and `password`. Note the use of [TypeScript’s `export` keyword](http://www.typescriptlang.org/Handbook#modules-going-external), as we’ll see why that’s important momentarily.
 
-Next, open `app/app.component.ts`, and first add the following `import` to the top of the file:
+Next, open `app/app.component.ts`, and add the following `import` to the top of the file:
 
 ``` JavaScript
 import {User} from "./shared/user/user";
@@ -178,7 +178,6 @@ Here you import the `User` class that you just defined. Note the parallel betwee
 
 Next, replace the existing `AppComponent` definition with the one below, which uses the `User` class you just imported.
 
-<!-- Todo, explain the isLoggingIn piece - from the exercise above I think. The button XML needs to be edited -->
 ``` JavaScript
 export class AppComponent {
   user: User;
@@ -198,19 +197,38 @@ export class AppComponent {
 
 Instead of storing data on the `AppComponent` directly, you’re now using the `User` model object, which is reusable outside of this page and even outside of this application. You instantiate an instance of the `User` class in a new `constructor` function, which Angular 2 invokes when it bootstraps your application.
 
-Your final step is to use this new model object in your template. To do that, replace the two existing `<TextField>`s with the code shown below, which updates the `[(ngModel)]` bindings to point at the new `User` object:
+Your next step is to use this new model object in your template. To do that, replace the two existing `<TextField>`s with the code shown below, which updates the `[(ngModel)]` bindings to point at the new `User` object:
 
 ``` XML
 <TextField hint="Email Address" id="email" keyboardType="email" [(ngModel)]="user.email"
   autocorrect="false" autocapitalizationType="none"></TextField>
 <TextField hint="Password" id="password" secure="true" [(ngModel)]="user.password"></TextField>
 ```
 
-TODO: Better explanation. Move the full template into the login.html file and use `templateUrl`. 
+As one final change, because this template is getting to be a bit complex, let’s move it into a separate file. Open `app/pages/login/login.html` and paste in the following code:
 
-If you got lost during this section, here’s a copy-and-paste friendly version of the full `app.component.ts` you should have at this point:
+``` XML
+<StackLayout>
+  <Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>
 
-``` JavaScript
+  <TextField hint="Email Address" id="email" keyboardType="email" [(ngModel)]="user.email"
+    autocorrect="false" autocapitalizationType="none"></TextField>
+  <TextField hint="Password" id="password" secure="true" [(ngModel)]="user.password"></TextField>
+
+  <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" id="submit-button" (tap)="submit()"></Button>
+  <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
+</StackLayout>
+```
+
+Finally, in `app/app.component.ts`, replace the existing `template` property with the new `templateUrl` property shown below:
+
+``` TypeScript
+templateUrl: "pages/login/login.html"
+```
+
+In case you got lost during this section, here’s a copy-and-paste friendly of the `app/app.component.ts` file you should have at this point:
+
+``` TypeScript
 import {Component} from "angular2/core";
 import {User} from "./shared/user/user";
 
@@ -233,11 +251,12 @@ export class AppComponent {
     this.isLoggingIn = !this.isLoggingIn;
   }
 }
-
 ```
 
 <div class="exercise-end"></div>
 
+> **TIP**: With Angular 2 components you have the ability to specify templates and CSS styling in two places—directly within the component, or in external files. For simple components feel free to choose either approach based on your personal preference, but once your templates/styles get to ~10 lines of code, consider using external files exclusively, as mixing non-trivial XML, CSS, and JavaScript code makes your component code less readable.
+
 With this setup you now have a `User` class that you can share across pages in your app and even across applications. But a model object that’s four simple lines of code isn’t all that exciting. Where this approach really pays off is when you’re able to share your business logic, and the code that hits your backend systems. In Angular 2 those classes are known as services. Let’s look at them next.
 
 ### Services