renamed stuff

.gitignore

@@ -1,2 +1,4 @@
 ng-book2.pdf
 ng-book2-sample/
+manuscript/
+

angular2-reddit-base/app.ts → angular2-reddit-base/app/AppComponent.ts

@@ -1,11 +1,15 @@
-/// <reference path="node_modules/angular2/ts/typings/node/node.d.ts"/>
-/// <reference path="node_modules/angular2/typings/browser.d.ts"/>
+/// <reference path="../node_modules/angular2/ts/typings/node/node.d.ts"/>
+/// <reference path="../node_modules/angular2/typings/browser.d.ts"/>
+/// <reference path="./ArticleComponent.ts"/>
 
 import { bootstrap } from "angular2/platform/browser";
 import { Component } from "angular2/core";
+import { ArticleComponent, Article } from "./ArticleComponent";
 
 @Component({
-    selector: 'reddit',
+    selector: 'app',
+    directives: [ ArticleComponent ],
+    providers: [ Article ],
     template: `
         <form class="ui large form segment">
             <h3 class="header">Add a link</h3>
@@ -22,16 +26,28 @@ import { Component } from "angular2/core";
                 Submit link
             </button>
         </form>
+        
+        <div class="ui grid posts">
+            <article [article]="myArticle1"></article>
+            <article [article]="myArticle2"></article>
+            <article [article]="myArticle3"></article>
+        </div>
     `
 })
-class RedditApp {
+class AppComponent {
+    articles: Article[]    
 
     constructor() {
+        this.articles = [
+            new Article('Angular 2', 'http://angular.io'),
+            new Article('Fullstack', 'http://fullstack.io'),
+            new Article('Angular homepage', 'http://angular.io')
+        ];
     }
 
     addArticle(title: HTMLInputElement, link: HTMLInputElement) : void {
         console.log(`Adding article title: ${title.value} and link: ${link.value}`);
     }
 }
 
-bootstrap(RedditApp);
+bootstrap(AppComponent);

angular2-reddit-base/app/ArticleComponent.ts

@@ -0,0 +1,82 @@
+/// <reference path="../node_modules/angular2/ts/typings/node/node.d.ts"/>
+/// <reference path="../node_modules/angular2/typings/browser.d.ts"/>
+
+import { bootstrap } from "angular2/platform/browser";
+import { Component, Injectable } from "angular2/core";
+
+@Injectable()
+export class Article {
+    title: string;
+    link: string;
+    votes: number;
+
+    constructor(title: string, link: string, votes?: number) {
+        this.title = title;
+        this.link = link;
+        this.votes = votes || 0;
+    }
+
+    voteUp(): void {
+        this.votes += 1;
+    }
+
+    voteDown(): void {
+        this.votes -= 1;
+    }
+}
+
+@Component({
+    selector: 'article',
+    inputs: [ 'article' ],
+    host: {
+        class: 'row'
+    },
+    template: `
+        <div class="four wide column center aligned votes">
+            <div class="ui statistic">
+                <div class="value">
+                    {{ article.votes }}
+                </div>
+                <div class="label">
+                    Points
+                </div>
+            </div>
+        </div>
+        <div class="twelve wide column">
+            <a class="ui large header" href="{{ article.link }}">
+                {{ article.title }}
+            </a>
+            <ul class="ui big horizontal list voters">
+                <li class="item">
+                    <a href (click)="voteUp()">
+                        <i class="arrow up icon"></i>
+                        upvote
+                    </a>
+                </li>
+                <li class="item">
+                    <a href (click)="voteDown()">
+                        <i class="arrow down icon"></i>
+                        downvote
+                    </a>
+                </li>
+            </ul>
+        </div>
+    `
+})
+export class ArticleComponent {
+    article: Article;
+
+    constructor(article: Article) {
+        this.article = article;
+    }
+
+    voteUp() : boolean {
+        this.article.voteUp();
+        return false;
+    }
+
+    voteDown() : boolean {
+        this.article.voteDown();
+        return false;
+    }
+}

angular2-reddit-base/index.html

@@ -30,8 +30,9 @@
                } 
             });
 
-            System.import('app.js')
+            System.import('app/appcomponent.js')
                 .then(null, console.error.bind(console));
+
         </script>
 
 
@@ -51,7 +52,7 @@ <h1 class="ui header">
         </div>
 
         <div class="ui main text container">
-            <reddit></reddit> <!-- <--- Our app loads here! -->
+            <app></app>
         </div>
 
     </body>

angular2-reddit-base/npm-debug.log

@@ -0,0 +1,39 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'C:\\Program Files (x86)\\nodejs\\\\node.exe',
+1 verbose cli   'C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli   'run',
+1 verbose cli   'clean' ]
+2 info using [email protected]
+3 info using [email protected]
+4 verbose node symlink C:\Program Files (x86)\nodejs\\node.exe
+5 verbose run-script [ 'preclean', 'clean', 'postclean' ]
+6 info preclean [email protected]
+7 info clean [email protected]
+8 verbose unsafe-perm in lifecycle true
+9 info [email protected] Failed to exec clean script
+10 verbose stack Error: [email protected] clean: `rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map`
+10 verbose stack Exit status 1
+10 verbose stack     at EventEmitter.<anonymous> (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
+10 verbose stack     at EventEmitter.emit (events.js:110:17)
+10 verbose stack     at ChildProcess.<anonymous> (C:\Program Files (x86)\nodejs\node_modules\npm\lib\utils\spawn.js:14:12)
+10 verbose stack     at ChildProcess.emit (events.js:110:17)
+10 verbose stack     at maybeClose (child_process.js:1015:16)
+10 verbose stack     at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
+11 verbose pkgid [email protected]
+12 verbose cwd D:\Projects\ADP\Git\ngbook2\angular2-reddit-base
+13 error Windows_NT 6.1.7601
+14 error argv "C:\\Program Files (x86)\\nodejs\\\\node.exe" "C:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "clean"
+15 error node v0.12.2
+16 error npm  v2.7.4
+17 error code ELIFECYCLE
+18 error [email protected] clean: `rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map`
+18 error Exit status 1
+19 error Failed at the [email protected] clean script 'rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map'.
+19 error This is most likely a problem with the ngbook2 package,
+19 error not with npm itself.
+19 error Tell the author that this fails on your system:
+19 error     rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map
+19 error You can get their info via:
+19 error     npm owner ls ngbook2
+19 error There is likely additional logging output above.
+20 verbose exit [ 1, true ]

angular2-reddit-base/package.json

@@ -6,7 +6,7 @@
         "clean": "rm -f ./*.js; rm -f ./*.js.map; rm -f ./intermediates/*.js; rm -f ./intermediates/*.js.map",
         "tsc": "./node_modules/.bin/tsc",
         "tsc:w": "./node_modules/.bin/tsc -w",
-        "serve": "./node_modules/.bin/live-server --host=localhost --port=8081 .",
+        "serve": "./node_modules/.bin/live-server --host=localhost --port=8088 .",
         "go": "concurrent \"npm run tsc:w\" \"npm run serve\" "
     },
     "dependencies": {

angular2-reddit-base/styles.css

@@ -1,3 +0,0 @@
-* {
-
-}

angular2-reddit-base/tsconfig.json

@@ -10,7 +10,8 @@
     "noImplicitAny": false
   },
   "files": [
-    "app.ts",
+    "app/AppComponent.ts",
+    "app/ArticleComponent.ts",
     "node_modules/angular2/ts/typings/node/node.d.ts",
     "node_modules/angular2/typings/browser.d.ts"
   ],