Filling out the files and structure

Author: tjvantoll

index.html

@@ -559,6 +559,69 @@ <h3 id="structuring-your-app">Structuring your app</h3>
 <p>There are many reasons to segment your application into modular units, and you can <a href="https://en.wikipedia.org/wiki/Modular_programming">read about the various benefits on Wikipedia</a>. However, keeping NativeScript apps modular has one unique benefit: the ability to share the code you write between Angular-2-built web apps, and Angular-2-build 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 for your native and web apps can be an invaluable time saver.</p>
 <p>To see how this works in action let’s create a few files.</p>
+<h4 class="exercise-start">
+    <b>Exercise</b>: Add a model object
+</h4>
+
+<p>The first thing we’ll do is add a model object to store user data. Open <code>app/user/user.service.ts</code> and paste in the following code:</p>
+<pre><code class="lang-JavaScript">export class User {
+  email: string;
+  password: string;
+}
+</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>
+<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 in the previous example. 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>
+<pre><code class="lang-JavaScript">export class AppComponent {
+  user: User;
+  constructor() {
+    this.user = new User();
+  }
+  signIn() {
+    alert(&quot;You’re using: &quot; + this.user.email);
+  }
+}
+</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 also provide a TypeScript constructor, which is a function invoked when an instance of the <code>AppComponent</code> class is instantiated. In this app, Angular 2 instantiates an <code>AppComponent</code> for you with the call to <code>nativeScriptBootstrap(AppComponent)</code> done in <code>main.ts</code>. </p>
+<p>Your final step is to use this new model object in your template. To do that, replace the existing two <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; 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; secure=&quot;true&quot; [(ngModel)]=&quot;user.password&quot;&gt;&lt;/TextField&gt;
+</code></pre>
+<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;;
+import {User} from &quot;./shared/user/user&quot;;
+
+@Component({
+  selector: &quot;my-app&quot;,
+  template: `
+    &lt;StackLayout&gt;
+      &lt;Image src=&quot;res://logo&quot; stretch=&quot;none&quot; horizontalAlignment=&quot;center&quot;&gt;&lt;/Image&gt;
+
+      &lt;TextField hint=&quot;Email Address&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; secure=&quot;true&quot; [(ngModel)]=&quot;user.password&quot;&gt;&lt;/TextField&gt;
+
+      &lt;Button text=&quot;Sign in&quot; (tap)=&quot;signIn()&quot;&gt;&lt;/Button&gt;
+      &lt;Button text=&quot;Sign up for Groceries&quot; class=&quot;link&quot;&gt;&lt;/Button&gt;
+    &lt;/StackLayout&gt;
+  `
+})
+export class AppComponent {
+  user: User;
+  constructor() {
+    this.user = new User();
+  }
+  signIn() {
+    alert(&quot;You’re using: &quot; + this.user.email);
+  }
+}
+</code></pre>
+<div class="exercise-end"></div>
+
 <h3 id="services">Services</h3>
 <h3 id="routing">Routing</h3>
 

src/chapters/chapter3.md

@@ -116,7 +116,86 @@ Even if you have no plans to create an Angular 2 web app, separating out your co
 
 To see how this works in action let’s create a few files.
 
+<h4 class="exercise-start">
+    <b>Exercise</b>: Add a model object
+</h4>
+
+The first thing we’ll do is add a model object to store user data. Open `app/user/user.service.ts` and paste in the following code:
+
+``` JavaScript
+export class User {
+  email: string;
+  password: string;
+}
+```
+
+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:
+
+``` JavaScript
+import {User} from "./shared/user/user";
+```
+
+Here you import the `User` class that you just defined. Note the parallel between the `export` command used in the previous example and the `import` command used in the previous example. The reason the `User` class is available to import is because it was explicitly exported. You’ll see other examples of `import` and `export` as you go through this guide.
+
+Next, replace the existing `AppComponent` definition with the one below, which uses the `User` class you just imported.
+
+``` JavaScript
+export class AppComponent {
+  user: User;
+  constructor() {
+    this.user = new User();
+  }
+  signIn() {
+    alert("You’re using: " + this.user.email);
+  }
+}
+```
+
+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 also provide a TypeScript constructor, which is a function invoked when an instance of the `AppComponent` class is instantiated. In this app, Angular 2 instantiates an `AppComponent` for you with the call to `nativeScriptBootstrap(AppComponent)` done in `main.ts`. 
+
+Your final step is to use this new model object in your template. To do that, replace the existing two `<TextField>`s with the code shown below, which updates the `[(ngModel)]` bindings to point at the new `User` object:
+
+``` XML
+<TextField hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
+  autocorrect="false" autocapitalizationType="none"></TextField>
+<TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
+```
+
+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:
 
+``` JavaScript
+import {Component} from "angular2/core";
+import {User} from "./shared/user/user";
+
+@Component({
+  selector: "my-app",
+  template: `
+    <StackLayout>
+      <Image src="res://logo" stretch="none" horizontalAlignment="center"></Image>
+
+      <TextField hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
+        autocorrect="false" autocapitalizationType="none"></TextField>
+      <TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>
+
+      <Button text="Sign in" (tap)="signIn()"></Button>
+      <Button text="Sign up for Groceries" class="link"></Button>
+    </StackLayout>
+  `
+})
+export class AppComponent {
+  user: User;
+  constructor() {
+    this.user = new User();
+  }
+  signIn() {
+    alert("You’re using: " + this.user.email);
+  }
+}
+```
+
+<div class="exercise-end"></div>
 
 ### Services