chandermani · akashranjan1 · Dec 7, 2015 · Dec 8, 2015 · Dec 14, 2015 · Dec 14, 2015
diff --git a/README.md b/README.md
@@ -1,2 +1,19 @@
-# angular2byexample
-Source code repository for the book "Angular2 by Example"
+# Angular2 By Example
+
+[![Angular2 By Example Front Cover](https://d1ldz4te4covpm.cloudfront.net/sites/default/files/imagecache/ppv4_main_book_cover/B05079_MockupCover_Normal.jpg)](https://www.packtpub.com/web-development/angular-2-example)
+
+Source code repository for the book [Angular2 by Example](https://www.packtpub.com/web-development/angular-2-example)
+
+**Releasing soon!!**
+
+To setup code for Guess The Number see the README.md in **guessthenumber** folder.
+
+To setup code for Personal Trainer see the README.md in **trainer** folder.
+
+## Note
+
+The **master** branch contains the final outcome for both the samples we build throughout the book.
+
+Chapter progress is tracked using individual branches. Each **chapter has checkpoints** and each checkpoint code is **available on a seperate branch**.
+
+For example, branches *base*, *checkpoint2.1*, *checkpoint2.2*, *checkpoint2.3* and *checkpoint2.4* contain code checkpoints for **Chapter 2**.
diff --git a/guessthenumber/app.ts b/guessthenumber/app.ts
diff --git a/guessthenumber/app/app.module.ts b/guessthenumber/app/app.module.ts
@@ -0,0 +1,12 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { GuessTheNumberComponent }   from './guess-the-number.component';
+
+@NgModule({
+    imports:      [ BrowserModule ],
+    declarations: [ GuessTheNumberComponent ],
+    bootstrap:    [ GuessTheNumberComponent ]
+})
+
+export class AppModule { }
diff --git a/guessthenumber/app/guess-the-number.component.ts b/guessthenumber/app/guess-the-number.component.ts
@@ -0,0 +1,43 @@
+import { Component }from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  template: `
+    <div class="container">
+      <h2>Guess the Number !</h2>
+      <p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
+      <label>Your Guess: </label>
+      <input type="number" [value]="guess" (input)="guess = $event.target.value" />
+      <button (click)="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>
+      <button (click)="initializeGame()" class="btn btn-warning btn-sm">Restart</button>
+      <div>
+        <p *ngIf="deviation<0" class="alert alert-warning">Your guess is higher.</p>
+        <p *ngIf="deviation>0" class="alert alert-warning">Your guess is lower.</p>
+        <p *ngIf="deviation===0" class="alert alert-success">Yes! That's it.</p>
+      </div>
+      <p class="text-info">No of guesses :
+        <span class="badge">{{noOfTries}}</span>
+      </p>
+    </div>
+    `
+})
+export class GuessTheNumberComponent {
+  deviation: number;
+  noOfTries: number;
+  original: number;
+  guess: number;
+
+  constructor() {
+    this.initializeGame();
+  }
+  initializeGame() {
+    this.noOfTries = 0;
+    this.original = Math.floor((Math.random() * 1000) + 1);
+    this.guess = null;
+    this.deviation = null;
+  }
+  verifyGuess() {
+    this.deviation = this.original - this.guess;
+    this.noOfTries = this.noOfTries + 1;
+  }
+}
diff --git a/guessthenumber/app/main.ts b/guessthenumber/app/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);
diff --git a/guessthenumber/index.html b/guessthenumber/index.html
@@ -1,25 +1,19 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <title>Guess the Number!</title>
-  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
-  <script src="https://code.angularjs.org/tools/system.js"></script>
-  <script src="https://code.angularjs.org/tools/typescript.js"></script>
-  <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
-  <script>
-    System.config({
-      transpiler: 'typescript',
-      typescriptOptions: {
-        emitDecoratorMetadata: true
-      }
-    });
-    System.import('./app.ts');
-  </script>
-</head>
-
-<body>
-  <my-app>Loading...</my-app>  
-</body>
-
+  <head>
+    <title>Guess the Number!</title>
+    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <script src="https://unpkg.com/[email protected]?main=browser"></script>
+    <script src="https://unpkg.com/[email protected]/lib/typescript.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
 </html>
diff --git a/guessthenumber/systemjs.config.js b/guessthenumber/systemjs.config.js
@@ -0,0 +1,24 @@
+System.config({
+    map : {
+        'app': 'app',
+        'rxjs': 'https://unpkg.com/[email protected]',
+        '@angular/common': 'https://unpkg.com/@angular/[email protected]',
+        '@angular/compiler': 'https://unpkg.com/@angular/[email protected]',
+        '@angular/core': 'https://unpkg.com/@angular/[email protected]',
+        '@angular/platform-browser': 'https://unpkg.com/@angular/[email protected]',
+        '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/[email protected]'
+    },
+    packages:{
+        'app':  { main: 'main.ts',  defaultExtension: 'ts' },
+        '@angular/common': { main: 'bundles/common.umd.js', defaultExtension: 'js' },
+        '@angular/compiler': { main: 'bundles/compiler.umd.js', defaultExtension: 'js' },
+        '@angular/core': { main: 'bundles/core.umd.js', defaultExtension: 'js' },
+        '@angular/platform-browser': { main: 'bundles/platform-browser.umd.js', defaultExtension: 'js' },
+        '@angular/platform-browser-dynamic': { main: 'bundles/platform-browser-dynamic.umd.js', defaultExtension: 'js' },
+    },
+    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
+    transpiler: 'typescript',
+    typescriptOptions: {
+        emitDecoratorMetadata: true
+    }
+});
diff --git a/trainer/.gitignore b/trainer/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+typings/**
diff --git a/trainer/README.md b/trainer/README.md
@@ -1,3 +1,23 @@
 # Personal Trainer
 
 Personal Trainer built using Angular2 and TypeScript
+
+## Install
+
+Clone this repo and execute in your favourite shell:
+
+* `npm i -g gulp` to install gulp globally (if you don't have it installed already)
+* `npm install` to install local npm dependencies
+
+## Play
+
+After completing installation type in your favourite shell:
+
+* `gulp play` to start the app in a new browser window. App files are observed and will be re-transpiled on each change.
+
+> ~~If you see a bunch of **TypeScript** compilation errors while running `gulp play`, the required **typings** did not get installed.  While `npm install` should also install the typings, at times this does not happen. 
+> If the typing installation throws error try to upgrade the typing global installation with command `npm install typings -g` and then run the command `npm run typings install` again.~~
+
+> The old approach of using the `typings` tool to install typings has been abandoned in favour of **npm** based typing supported by new versions of **TypeScript** compiler. Take latest of the code and upgrade to latest version of TypeScript compiler. `npm install` should now install all typings. 
+
+> **Note**: The book content still show use of `typings`, you can disregard it.
diff --git a/trainer/gulpfile.js b/trainer/gulpfile.js
@@ -1,45 +1,56 @@
 var gulp = require('gulp');
+var connect = require('gulp-connect');
 var PATHS = {
-    src: 'src/**/*.ts'
+  src: 'src/**/*.ts',
+  html: 'src/**/*.html',
+  css: 'src/**/*.css'
 };
 
-gulp.task('clean', function (done) {
-    var del = require('del');
-    del(['dist'], done);
+gulp.task('clean', function(done) {
+  var del = require('del');
+  del(['dist'], done);
 });
 
-gulp.task('ts2js', function () {
-    var typescript = require('gulp-typescript');
-    var sourcemaps = require('gulp-sourcemaps');
-
-    var tsResult = gulp.src(PATHS.src)
-        .pipe(sourcemaps.init())
-        .pipe(typescript({
-            noImplicitAny: true,
-            module: 'system',
-            target: 'ES5',
-            moduleResolution: 'node',
-            emitDecoratorMetadata: true,
-            experimentalDecorators: true
-        }));
-
-    return tsResult.js
-          .pipe(sourcemaps.write())
-          .pipe(gulp.dest('dist'));
+gulp.task('ts2js', function() {
+  var typescript = require('gulp-typescript');
+  var sourcemaps = require('gulp-sourcemaps');
+
+  var tsResult = gulp.src(PATHS.src)
+    .pipe(sourcemaps.init())
+    .pipe(typescript({
+      noImplicitAny: true,
+      module: 'system',
+      target: 'ES5',
+      moduleResolution: 'node',
+      emitDecoratorMetadata: true,
+      experimentalDecorators: true
+    }));
+
+  return tsResult.js
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest('dist'))
+    .pipe(connect.reload());
 });
 
-gulp.task('play', ['ts2js'], function () {
-    var http = require('http');
-    var connect = require('connect');
-    var serveStatic = require('serve-static');
-    var open = require('open');
+gulp.task('play', ['ts2js'], function() {
+  var http = require('http');
+  var open = require('open');
+  var watch = require('gulp-watch');
 
-    var port = 9000, app;
 
-    gulp.watch(PATHS.src, ['ts2js']);
 
-    app = connect().use(serveStatic(__dirname));
-    http.createServer(app).listen(port, function () {
-        open('http://localhost:' + port);
-    });
+  var port = 9000,
+    app;
+
+  connect.server({
+    root: __dirname,
+    port: port,
+    livereload: true,
+    fallback: 'index.html'
+  });
+  open('http://localhost:' + port + '/index.html');
+
+  gulp.watch(PATHS.src, ['ts2js']);
+  watch(PATHS.html).pipe(connect.reload());
+  watch(PATHS.css).pipe(connect.reload());
 });
diff --git a/trainer/index.html b/trainer/index.html
@@ -8,24 +8,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
     <link href="//fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="static/css/app.css" />
+    <link rel="stylesheet" href="/static/css/app.css" />
+    <base href="/">
 </head>
 
 <body>
-    <trainer-app>Loading...</trainer-app>
+  <trainer-app>Loading...</trainer-app>
 </body>
 
-<!-- ES6-related imports -->
-<script src="/node_modules/systemjs/dist/system.js"></script>
+<!-- Libraries imports -->
+<script src="node_modules/core-js/client/shim.min.js"></script>
+<script src="node_modules/zone.js/dist/zone.js"></script>
+<script src="node_modules/reflect-metadata/Reflect.js"></script>
+<script src="node_modules/systemjs/dist/system.src.js"></script>
+
+ <!-- Configure SystemJS -->
+<script src="systemjs.config.js"></script>
 
 <script>
-    //configure system loader
-    System.config({defaultJSExtensions: true});
-</script>
-<script src="/node_modules/angular2/bundles/angular2.dev.js"></script>
-<script>
+
     //bootstrap the Angular2 application
-    System.import('dist/bootstrap').catch(console.log.bind(console));
+    System.import('app').catch(console.log.bind(console));
 </script>
-
+<script src="http://localhost:35729/livereload.js"></script>
 </html>