Skip to content

Commit edd5f52

Browse files
tjvantolltjvantoll
committed
Finishing up a first pass of chapter 3
1 parent 2373f7c commit edd5f52

File tree

2 files changed

+225
-6
lines changed

2 files changed

+225
-6
lines changed

‎index.html‎

Lines changed: 95 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -779,7 +779,7 @@ <h4 class="exercise-start">
779779
this._userService.register(this.user)
780780
.subscribe(
781781
() =&gt; {
782-
alert(&quot;Your account was successfully created.&quot;)
782+
alert(&quot;Your account was successfully created.&quot;);
783783
this.toggleDisplay();
784784
},
785785
() =&gt; alert(&quot;Unfortunately we were unable to create your account.&quot;)
@@ -828,7 +828,7 @@ <h4 class="exercise-start">
828828
this._userService.register(this.user)
829829
.subscribe(
830830
() =&gt; {
831-
alert(&quot;Your account was successfully created.&quot;)
831+
alert(&quot;Your account was successfully created.&quot;);
832832
this.toggleDisplay();
833833
},
834834
() =&gt; alert(&quot;Unfortunately we were unable to create your account.&quot;)
@@ -841,8 +841,100 @@ <h4 class="exercise-start">
841841
</code></pre>
842842
<div class="exercise-end"></div>
843843

844-
<p>Show that user account creation now works and transition to routing.</p>
844+
<p>TODO: Show that user account creation now works and transition to routing.</p>
845845
<h3 id="routing">Routing</h3>
846+
<p>TODO: Intro</p>
847+
<h4 class="exercise-start">
848+
<b>Exercise</b>: ???
849+
</h4>
850+
851+
<p>Copy app/app.component.ts into app/pages/login/login.component.ts, change the name of the class from “AppComponent” to “LoginPage, and update the two paths below accordingly:</p>
852+
<pre><code class="lang-TypeScript">import {User} from &quot;../../shared/user/user&quot;;
853+
import {UserService} from &quot;../../shared/user/user.service&quot;;
854+
</code></pre>
855+
<p>Open app/app.component.ts back up and paste in the following code:</p>
856+
<pre><code class="lang-TypeScript">import {Component} from &quot;angular2/core&quot;;
857+
import {HTTP_PROVIDERS} from &quot;angular2/http&quot;;
858+
import {RouteConfig} from &quot;angular2/router&quot;;
859+
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from &quot;nativescript-angular/router&quot;;
860+
import {LoginPage} from &quot;./pages/login/login.component&quot;;
861+
862+
@Component({
863+
selector: &quot;main&quot;,
864+
directives: [NS_ROUTER_DIRECTIVES],
865+
providers: [NS_ROUTER_PROVIDERS],
866+
template: &quot;&lt;page-router-outlet&gt;&lt;/page-router-outlet&gt;&quot;
867+
})
868+
@RouteConfig([
869+
{ path: &quot;/Login&quot;, component: LoginPage, as: &quot;Login&quot;, useAsDefault: true },
870+
])
871+
export class AppComponent {}
872+
</code></pre>
873+
<p>Explain what’s going on here.</p>
874+
<div class="exercise-end"></div>
875+
876+
<p>Let’s actually log the user in then, shall we?</p>
877+
<h4 class="exercise-start">
878+
<b>Exercise</b>: ???
879+
</h4>
880+
881+
<p>Open pages/list/list.component.ts and paste in this:</p>
882+
<pre><code class="lang-TypeScript">import {Component} from &quot;angular2/core&quot;;
883+
884+
@Component({
885+
selector: &quot;list&quot;,
886+
templateUrl: &quot;pages/list/list.html&quot;,
887+
styleUrls: [&quot;pages/list/list-common.css&quot;, &quot;pages/list/list.css&quot;]
888+
})
889+
export class ListPage {}
890+
</code></pre>
891+
<p>Next, open pages/list/list.html and paste in this:</p>
892+
<pre><code class="lang-XML">&lt;Label text=&quot;Hello world&quot;&gt;&lt;/Label&gt;
893+
</code></pre>
894+
<p>Now, go back to app/app.component.ts and paste in this at the top of the file:</p>
895+
<pre><code class="lang-TypeScript">import {ListPage} from &quot;./pages/list/list.component&quot;;
896+
</code></pre>
897+
<p>And this in the <code>@RouteConfig</code>:</p>
898+
<pre><code class="lang-TypeScript">{ path: &quot;/List&quot;, component: ListPage, as: &quot;List&quot; }
899+
</code></pre>
900+
<p>Now go to app/shared/user/user.service.ts and add this function:</p>
901+
<pre><code class="lang-TypeScript">login(user: User) {
902+
var headers = new Headers();
903+
headers.append(&quot;Content-Type&quot;, &quot;application/json&quot;);
904+
905+
return this._http.post(
906+
Config.apiUrl + &quot;oauth/token&quot;,
907+
JSON.stringify({
908+
username: user.email,
909+
password: user.password,
910+
grant_type: &quot;password&quot;
911+
}),
912+
{ headers: headers }
913+
)
914+
.map(response =&gt; response.json())
915+
.do(data =&gt; {
916+
Config.token = data.Result.access_token;
917+
})
918+
.catch(this.handleErrors);
919+
}
920+
</code></pre>
921+
<p>Finally, go to <code>app/login/login.component.ts</code> and change the login function to do this:</p>
922+
<pre><code class="lang-TypeScript">this._userService.login(this.user)
923+
.subscribe(
924+
() =&gt; this._router.navigate([&quot;List&quot;]),
925+
(error) =&gt; alert(&quot;Unfortunately we could not find your account.&quot;)
926+
);
927+
</code></pre>
928+
<p>To make this work, in the same file, add this to the top:</p>
929+
<pre><code class="lang-TypeScript">import {Router} from &quot;angular2/router&quot;;
930+
</code></pre>
931+
<p>And this to the constructor:</p>
932+
<pre><code class="lang-TypeScript">constructor(private _router: Router, private _userService: UserService) {
933+
</code></pre>
934+
<div class="exercise-end"></div>
935+
936+
<p>You can login now! And navigate! Show a gif of the navigation. Talk about how in NativeScript you get native behavior automatically—aka a back button on iOS and a hardware back button on Android.</p>
937+
<p>Then transition to modules.</p>
846938

847939
</div>
848940
<div class="chapter">

‎src/chapters/chapter3.md‎

Lines changed: 130 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -332,7 +332,7 @@ signUp() {
332332
this._userService.register(this.user)
333333
.subscribe(
334334
() => {
335-
alert("Your account was successfully created.")
335+
alert("Your account was successfully created.");
336336
this.toggleDisplay();
337337
},
338338
() => alert("Unfortunately we were unable to create your account.")
@@ -387,7 +387,7 @@ export class AppComponent {
387387
this._userService.register(this.user)
388388
.subscribe(
389389
() => {
390-
alert("Your account was successfully created.")
390+
alert("Your account was successfully created.");
391391
this.toggleDisplay();
392392
},
393393
() => alert("Unfortunately we were unable to create your account.")
@@ -401,6 +401,133 @@ export class AppComponent {
401401

402402
<div class="exercise-end"></div>
403403

404-
Show that user account creation now works and transition to routing.
404+
TODO: Show that user account creation now works and transition to routing.
405405

406406
### Routing
407+
408+
TODO: Intro
409+
410+
<h4 class="exercise-start">
411+
<b>Exercise</b>: ???
412+
</h4>
413+
414+
Copy app/app.component.ts into app/pages/login/login.component.ts, change the name of the class from “AppComponent” to “LoginPage, and update the two paths below accordingly:
415+
416+
``` TypeScript
417+
import {User} from "../../shared/user/user";
418+
import {UserService} from "../../shared/user/user.service";
419+
```
420+
421+
Open app/app.component.ts back up and paste in the following code:
422+
423+
``` TypeScript
424+
import {Component} from "angular2/core";
425+
import {HTTP_PROVIDERS} from "angular2/http";
426+
import {RouteConfig} from "angular2/router";
427+
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
428+
import {LoginPage} from "./pages/login/login.component";
429+
430+
@Component({
431+
selector: "main",
432+
directives: [NS_ROUTER_DIRECTIVES],
433+
providers: [NS_ROUTER_PROVIDERS],
434+
template: "<page-router-outlet></page-router-outlet>"
435+
})
436+
@RouteConfig([
437+
{ path: "/Login", component: LoginPage, as: "Login", useAsDefault: true },
438+
])
439+
export class AppComponent {}
440+
```
441+
442+
Explain what’s going on here.
443+
444+
<div class="exercise-end"></div>
445+
446+
Let’s actually log the user in then, shall we?
447+
448+
<h4 class="exercise-start">
449+
<b>Exercise</b>: ???
450+
</h4>
451+
452+
Open pages/list/list.component.ts and paste in this:
453+
454+
``` TypeScript
455+
import {Component} from "angular2/core";
456+
457+
@Component({
458+
selector: "list",
459+
templateUrl: "pages/list/list.html",
460+
styleUrls: ["pages/list/list-common.css", "pages/list/list.css"]
461+
})
462+
export class ListPage {}
463+
```
464+
465+
Next, open pages/list/list.html and paste in this:
466+
467+
``` XML
468+
<Label text="Hello world"></Label>
469+
```
470+
471+
Now, go back to app/app.component.ts and paste in this at the top of the file:
472+
473+
``` TypeScript
474+
import {ListPage} from "./pages/list/list.component";
475+
```
476+
477+
And this in the `@RouteConfig`:
478+
479+
``` TypeScript
480+
{ path: "/List", component: ListPage, as: "List" }
481+
```
482+
483+
Now go to app/shared/user/user.service.ts and add this function:
484+
485+
``` TypeScript
486+
login(user: User) {
487+
var headers = new Headers();
488+
headers.append("Content-Type", "application/json");
489+
490+
return this._http.post(
491+
Config.apiUrl + "oauth/token",
492+
JSON.stringify({
493+
username: user.email,
494+
password: user.password,
495+
grant_type: "password"
496+
}),
497+
{ headers: headers }
498+
)
499+
.map(response => response.json())
500+
.do(data => {
501+
Config.token = data.Result.access_token;
502+
})
503+
.catch(this.handleErrors);
504+
}
505+
```
506+
507+
Finally, go to `app/login/login.component.ts` and change the login function to do this:
508+
509+
``` TypeScript
510+
this._userService.login(this.user)
511+
.subscribe(
512+
() => this._router.navigate(["List"]),
513+
(error) => alert("Unfortunately we could not find your account.")
514+
);
515+
```
516+
517+
To make this work, in the same file, add this to the top:
518+
519+
``` TypeScript
520+
import {Router} from "angular2/router";
521+
```
522+
523+
And this to the constructor:
524+
525+
``` TypeScript
526+
constructor(private _router: Router, private _userService: UserService) {
527+
```
528+
529+
<div class="exercise-end"></div>
530+
531+
You can login now! And navigate! Show a gif of the navigation. Talk about how in NativeScript you get native behavior automatically—aka a back button on iOS and a hardware back button on Android.
532+
533+
Then transition to modules.

0 commit comments

Comments
 (0)