chore: update angular rc.1, also improve setup

pusher-community · May 13, 2016 · 1ce8a2a · 1ce8a2a
1 parent a1c1a4d
commit 1ce8a2a
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 28 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 src/app/*.js
 src/app/*.js.map
 node_modules
+typings
diff --git a/index.html b/index.html
@@ -6,14 +6,42 @@
     <link rel="stylesheet" type="text/css" href="src/style.css" />
     <script src="https://code.angularjs.org/tools/system.js"></script>
 
-    <script src="https://code.angularjs.org/2.0.0-alpha.47/angular2.dev.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/zone.js/dist/zone.min.js"></script>
+    <script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
+    <script src="node_modules/@angular/core/core.umd.js"></script>
+    <script src="node_modules/@angular/common/common.umd.js"></script>
+    <script src="node_modules/@angular/compiler/compiler.umd.js"></script>
+    <script src="node_modules/@angular/http/http.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script>
+    <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script>
+
 
     <script src="https://js.pusher.com/3.0/pusher.min.js"></script>
     <script>
       System.config({
-        packages: {'src/app': {defaultExtension: 'js'}}
+        map: {
+          '@angular/core': 'node_modules/@angular/core/core.umd.js',
+          '@angular/common': 'node_modules/@angular/common/common.umd.js',
+          '@angular/compiler': 'node_modules/@angular/compiler/compiler.umd.js',
+          '@angular/http': 'node_modules/@angular/http/http.umd.js',
+          '@angular/platform-browser': 'node_modules/@angular/platform-browser/platform-browser.umd.js',
+          '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js'
+        },
+        paths: {
+          'rxjs/*': 'node_modules/rxjs/*'
+        },
+        packages: {
+          'src/app': {
+            main: 'app.js',
+            defaultExtension: 'js'
+          },
+          'rxjs': {
+            defaultExtension: 'js'
+          }
+        }
       });
-      System.import('src/app/app');
+      System.import('src/app');
     </script>
   </head>
   <body class="blue-gradient-background">

diff --git a/package.json b/package.json
@@ -4,18 +4,30 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "tsc": "tsc -p src -w",
-    "start": "live-server --open=src"
+    "tsc": "tsc",
+    "start": "npm run tsc && live-server --open=/",
+    "postinstall": "typings install"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "angular2": "2.0.0-alpha.47",
-    "systemjs": "0.19.2"
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
+    "es6-shim": "0.35.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.6",
+    "systemjs": "0.19.26",
+    "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "live-server": "^0.8.2",
-    "typescript": "^1.6.2"
+    "typescript": "^1.6.2",
+    "typings": "^0.8.1"
   }
 }
diff --git a/src/app/app.html b/src/app/app.html
@@ -10,8 +10,8 @@ <h1 class="white light splash-title">
       </p>
 
       <div id="search-form">
-        <form (ng-submit)="newSubscription()">
-          <input class="swish-input" [(ng-model)]="newSearchTerm" placeholder="JavaScript" />
+        <form (ngSubmit)="newSubscription()">
+          <input class="swish-input" [(ngModel)]="newSearchTerm" placeholder="JavaScript" />
           <button class="bright-blue-hover btn-white">Search</button>
         </form>
       </div>
@@ -21,7 +21,7 @@ <h1 class="white light splash-title">
   <section>
     <div class="container tweets-container">
       <div id="channels-list">
-        <div class="channel" *ng-for="#channel of channels">
+        <div class="channel" *ngFor="let channel of channels">
           <h3 class="white light">
             <img class="twitter-icon" src="src/img/twitter.png" width="30" />
             Tweets for {{ channel.term }}

diff --git a/src/app/app.ts b/src/app/app.ts
@@ -1,10 +1,10 @@
 declare var Pusher: any;
 
+import {bootstrap} from '@angular/platform-browser-dynamic';
 import {
   Component,
-  Attribute,
-  bootstrap
-} from 'angular2/angular2';
+  Attribute
+} from '@angular/core';
 
 import SubscriptionComponent from './subscription';
 

diff --git a/src/app/subscription.html b/src/app/subscription.html
@@ -1,5 +1,5 @@
-<ul class="channel-results channel-{{search.term}}">
-  <li *ng-for="#result of tweets">
-    <p class="white">{{ result.tweet.text }}</p>
+<ul class="channel-results channel-{{className}}">
+  <li *ngFor="let result of tweets">
+    <p class="white" [innerHTML]="result.tweet.text"></p>
   </li>
 </ul>
diff --git a/src/app/subscription.ts b/src/app/subscription.ts
@@ -1,23 +1,27 @@
 import {
   Component,
-  Input
-} from 'angular2/angular2';
+  Input,
+  AfterViewChecked,
+  OnInit,
+  OnDestroy
+} from '@angular/core';
 
 @Component({
   selector: 'subscription',
-  templateUrl: 'src/app/subscription.html',
-  inputs: ['search', 'pusher']
+  templateUrl: 'src/app/subscription.html'
 })
-export default class SubscriptionComponent {
+export default class SubscriptionComponent implements OnInit, OnDestroy, AfterViewChecked {
   @Input() search: any;
   @Input() pusher;
   public tweets : Object[];
   private channel;
   private subscribed: boolean = false;
+  private className: String;
 
-  private ngOnInit() {
+  public ngOnInit() {
     this.subscribeToChannel();
     this.tweets = [];
+    this.className = this.search.term.replace(' ', '-');
   }
 
   private subscribeToChannel() {
@@ -35,7 +39,7 @@ export default class SubscriptionComponent {
   // TODO: bring back when working correctly (see bottom of ngAfterViewChecked)
   // This should fire anytime bindings are modified from AppComponent but it's not
   // Don't have time to debug at moment, but fix if you can :)
-  // private ngOnChanges() {
+  // public ngOnChanges() {
   //   console.log(this.search);
   //   if (!this.search.active && this.subscribed) {
   //     this.ngOnDestroy();
@@ -44,14 +48,14 @@ export default class SubscriptionComponent {
   //   }
   // }
 
-  private ngOnDestroy() {
+  public ngOnDestroy() {
     this.pusher.unsubscribe(btoa(this.search.term));
     this.channel && this.channel.unbind();
     this.subscribed = false;
   }
 
-  private ngAfterViewChecked() {
-    var listItem = document.querySelector(".channel-" + this.search.term);
+  public ngAfterViewChecked() {
+    var listItem = document.querySelector(".channel-" + this.className);
     if (listItem) {
       listItem.scrollTop = listItem.scrollHeight;
     }

diff --git a/src/tsconfig.json → tsconfig.json b/src/tsconfig.json → tsconfig.json
@@ -7,5 +7,10 @@
     "experimentalDecorators": true,
     "removeComments": false,
     "noImplicitAny": false
-  }
+  },
+  "exclude": [
+    "node_modules",
+    "typings/browser.d.ts",
+    "typings/browser"
+  ]
 }
diff --git a/typings.json b/typings.json
@@ -0,0 +1,15 @@
+{
+  "dependencies": {
+    "xhr2": "github:gdi2290/typed-xhr2#69f2b8d40d0cd407c1b2a2f2f41fecc6852cabbb"
+  },
+  "devDependencies": {},
+  "ambientDependencies": {
+    "async": "github:DefinitelyTyped/DefinitelyTyped/async/async.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee",
+    "ng2": "github:gdi2290/typings-ng2/ng2.d.ts#32998ff5584c0eab0cd9dc7704abb1c5c450701c",
+    "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#138ad74b9e8e6c08af7633964962835add4c91e2",
+    "systemjs": "github:DefinitelyTyped/DefinitelyTyped/systemjs/systemjs.d.ts#5c3e47967affa3c4128a3875d1664ba206ae1b0f",
+    "zone.js": "github:DefinitelyTyped/DefinitelyTyped/zone.js/zone.js.d.ts#b923a5aaf013ac84c566f27ba6b5843211981c7a"
+  }
+}