HN App kind of working

ionic/components/app/test/hn/hn.js

@@ -1,7 +1,7 @@
 import {Promise} from 'angular2/src/facade/async';
-console.log(Promise);
 
 var APIUrl = 'https://hacker-news.firebaseio.com/v0/';
+
 export class HackerNewsClient {
   constructor() {
     //this.fb = new Firebase(APIUrl);

ionic/components/app/test/hn/index.js

@@ -1,22 +1,20 @@
-import {NgElement} from 'angular2/angular2';
-import {bootstrap} from 'angular2/angular2'
+import {bootstrap, ElementRef} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {bind} from 'angular2/di';
-import {Content, Nav, NavPane} from 'ionic/ionic';
+import {Nav, HeaderTemplate, Toolbar, Content} from 'ionic/ionic';
 
-import {HackerNews} from 'hn';
-import {HNTopStories} from 'pages/top';
+import {HackerNews} from './hn';
+import {HNTopStories} from './pages/top';
 
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, Nav, NavPane]
+  directives: [Nav, Content, HeaderTemplate, Toolbar]
 })
 export class IonicApp {
   constructor(
-    @NgElement() element:NgElement
+    elementRef: ElementRef
   ) {
     console.log('IonicApp start: HackerNews', HackerNews)
 
@@ -27,4 +25,3 @@ export class IonicApp {
 export function main() {
   bootstrap(IonicApp);
 }
-

ionic/components/app/test/hn/main.html

@@ -1,5 +1,2 @@
-<!--
-  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
-  -->
 <ion-nav [initial]="splashPage">
 </ion-nav>

ionic/components/app/test/hn/pages/top.html

@@ -1,12 +1,15 @@
 <ion-view view-title="Top">
   <ion-content>
+
     <button pop>Back</button>
-    <button (click)="throwMe()">xxxx</button>
-    Loaded {{stories.length}} stories
+
     <ion-list>
-      <ion-item *for="#story of stories">
+
+      <item *ng-for="#story of stories">
         {{story.title}}
-      </ion-item>
+      </item>
+
     </ion-list>
+
   </ion-content>
 </ion-view>

ionic/components/app/test/hn/pages/top.js

@@ -1,23 +1,25 @@
+import {NgFor, ElementRef, bootstrap} from 'angular2/angular2';
 
-import {For, Ancestor, Descendent, Parent, NgElement, Component, View, bootstrap} from 'angular2/angular2';
-import {PushToNav, Content, Nav, NavPane, List, Item} from 'ionic/ionic';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
-import {HackerNews} from 'hn'
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
 
-@Component({ selector: 'top-stories' })
+import {Content, Nav, List, Item} from 'ionic/ionic';
+
+import {HackerNews} from '../hn'
+
+console.log('Angular directives', NgFor, Content, List, Item);
+
+@Component({
+  selector: 'top-stories'
+})
 @View({
   templateUrl: 'pages/top.html',
-  directives: [Content, For, List, Item, PushToNav]
+  directives: [Content, NgFor, List, Item]
 })
 export class HNTopStories {
-  constructor(@Ancestor() viewport: Nav) {//, @Ancestor() app: HNApp) {
-    console.log('TOP STORIES', 'Ancestor', viewport);
-
-    var self = this;
-
-    this.throwMe = function() {
-      throw new Error('stack test from throwMe');
-    };
+  constructor() {
 
     this.stories = [{
       by: "FatalLogic",
@@ -31,35 +33,27 @@ export class HNTopStories {
       type: "story",
       url: "http://minusbat.livejournal.com/180556.html"
     }];
+    return;
 
-      var APIUrl = 'https://hacker-news.firebaseio.com/v0';
-      this.fb = new window.Firebase(APIUrl);
+    var APIUrl = 'https://hacker-news.firebaseio.com/v0';
 
-      this.fb = new window.Firebase(APIUrl);
-      this.fb.child('topstories').limitToFirst(20).once('value', (snapshot) => {
+    console.log('FIREBASE', window.Firebase);
 
-        let items = snapshot.val();
+    this.fb = new window.Firebase(APIUrl);
+    this.fb.child('topstories').limitToFirst(20).once('value', (snapshot) => {
 
-        console.log('Fetched', items.length, 'items');
+      let items = snapshot.val();
 
-        for(var itemID of items) {
+      console.log('Fetched', items.length, 'items');
 
-          this.fb.child("item").child(itemID).on('value', (data) => {
-            //setTimeout(() => {
-              //console.log('SUB THIS', this);
-              //console.log(itemID, data.val());
-              //console.log('ADDED');
-              //self.stories.push(data.val());
-              //throw new Error("stack test");
-              debugger;
-              console.log('GOT ITEM', data.val());
-              self.stories.push({title: 'asdf'});
-            //});
+      for(var itemID of items) {
 
-            //console.log(data.val());
-          });
-        }
-      });
+        this.fb.child("item").child(itemID).on('value', (data) => {
+          console.log('GOT ITEM', data.val());
+          this.stories.push(data.val());
+        });
+      }
+    });
 
     //doStuffEnd
   }

scripts/e2e/angular.template.html

@@ -16,6 +16,7 @@
 
   <!-- web animations polyfill for non-chrome browsers -->
   <script src="/polyfills/web-animations.min.js"></script>
+  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
 
 </body>
 </html>