updated to work with angular@2.0.0-rc.1 and ionic-angular@2.0.0-beta.7

mjwheatley · Jun 3, 2016 · 191271a · 191271a
1 parent f999436
commit 191271a
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 32 deletions.
diff --git a/app/client/app.html b/app/client/app.html
@@ -1,17 +1,18 @@
-<ion-menu id="leftMenu" [content]="content">
+<ion-menu #leftMenu [content]="content">
 
     <ion-toolbar primary>
         <ion-title>{{appName}}</ion-title>
     </ion-toolbar>
 
     <ion-content>
         <ion-list>
-            <button ion-item *ngFor="#page of pages" (click)="openPage(page)">
+            <button ion-item *ngFor="let page of pages" (click)="openPage(page)">
+                <ion-icon name="{{page.icon}}"></ion-icon>
                 {{page.title | translate}}
             </button>
         </ion-list>
     </ion-content>
 
 </ion-menu>
 
-<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
+<ion-nav [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
diff --git a/app/client/app.ts b/app/client/app.ts
@@ -1,7 +1,7 @@
 import {MeteorComponent} from 'angular2-meteor';
 import {App, IonicApp, Platform} from 'ionic-angular';
-import {Component, NgZone, provide, Type} from 'angular2/core';
-import {Http, HTTP_PROVIDERS} from 'angular2/http';
+import {Component, NgZone, provide, Type} from '@angular/core';
+import {Http, HTTP_PROVIDERS} from '@angular/http';
 import {TranslateService, TranslatePipe, TranslateLoader, TranslateStaticLoader} from 'ng2-translate/ng2-translate';
 import {MeteorIonicApp} from "./lib/meteor-ionic-app";
 import {Constants} from "../lib/Constants";
@@ -38,6 +38,9 @@ class MyApp extends MeteorComponent {
     private appName:string;
     //private user:Meteor.User;
 
+    @ViewChild('leftMenu') leftMenu:any;
+    @ViewChild('content') nav:any;    
+
     constructor(private app:IonicApp,
                 private platform:Platform,
                 private zone:NgZone,
@@ -124,13 +127,12 @@ class MyApp extends MeteorComponent {
     private navigate(location:{page:any, setRoot:boolean}):void {
         // close the menu when clicking a link from the menu
         // getComponent selector is the component id attribute
-        this.app.getComponent('leftMenu').close();
-        // navigate to the new page if it is not the current page
-        let nav = this.app.getComponent('nav');
+        this.leftMenu.close();
+        // navigate to the new page if it is not the current page        
         if (location.setRoot) {
-            nav.setRoot(location.page);
+            this.nav.setRoot(location.page);
         } else {
-            nav.push(location.page);
+            this.nav.push(location.page);
         }
     }
 

diff --git a/app/client/components/language-select/language-select.ts b/app/client/components/language-select/language-select.ts
@@ -1,7 +1,7 @@
 /**
  * Created by mjwheatley on 5/2/16.
  */
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {IONIC_DIRECTIVES, NavController, Alert} from 'ionic-angular';
 import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 import {Constants} from "../../../lib/Constants";

diff --git a/app/client/components/welcome-header/welcome-header.ts b/app/client/components/welcome-header/welcome-header.ts
@@ -1,7 +1,7 @@
 /**
  * Created by mjwheatley on 3/2/16.
  */
-import {Component} from 'angular2/core';
+import {Component} from '@angular/core';
 import {IONIC_DIRECTIVES} from 'ionic-angular';
 import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 

diff --git a/app/client/lib/meteor-ionic-app.ts b/app/client/lib/meteor-ionic-app.ts
@@ -1,18 +1,20 @@
-import 'reflect-metadata';
-import 'zone.js/dist/zone';
-import {provide, Type, Provider, IterableDiffers, Component} from 'angular2/core';
+import {provide, Type, Provider, IterableDiffers, Component, PLATFORM_DIRECTIVES, enableProdMode} from '@angular/core';
 import {METEOR_PROVIDERS} from 'angular2-meteor';
 import {bootstrap} from 'angular2-meteor-auto-bootstrap';
-import {IonicApp, IONIC_DIRECTIVES, ionicProviders, TapClick} from 'ionic-angular';
+import {IonicApp, IONIC_DIRECTIVES, ionicProviders, postBootstrap} from 'ionic-angular';
+
+import { Meteor } from 'meteor/meteor';
 
 export function MeteorIonicApp(args: any = {}) {
     return function(cls) {
         // get annotations
         let annotations = Reflect.getMetadata('annotations', cls) || [];
         // set selector if undefined
         args.selector = args.selector || 'ion-app';
-        // add ionic directives
-        args.directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
+        // if no template was provided, default so it has a root <ion-nav>
+        if (!args.templateUrl && !args.template) {
+            args.template = '<ion-nav></ion-nav>';
+        }
         // create @Component
         annotations.push(new Component(args));
         // redefine with added annotations
@@ -21,12 +23,17 @@ export function MeteorIonicApp(args: any = {}) {
         Meteor.startup(function() {
             // define array of bootstrap providers
             let providers = ionicProviders(args).concat(args.providers || [], METEOR_PROVIDERS);
-            // bootstrap angular2
-            bootstrap(cls, providers).then(appRef => {
-                appRef.injector.get(TapClick);
-                let app: IonicApp = appRef.injector.get(IonicApp);
-                app.setProd(args.prodMode);
+            // auto add Ionic directives
+            let directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
+            // automatically provide all of Ionic's directives to every component
+            providers.push(provide(PLATFORM_DIRECTIVES, { useValue: [directives], multi: true }));
+            if (args.prodMode) {
+                enableProdMode();
+            }
+            bootstrap(cls, providers).then( appRef => {
+                postBootstrap(appRef, args.prodMode);
             });
+            return cls;
         });
 
         return cls;

diff --git a/app/package.json b/app/package.json
@@ -10,17 +10,18 @@
     "watch:css": "nodemon -w client -e scss -x npm run build:ios-css build:md-css"
   },
   "dependencies": {
-    "angular2": "2.0.0-beta.15",
-    "angular2-meteor": "0.5.3",
-    "angular2-meteor-auto-bootstrap": "0.5.2",
-    "es6-promise": "3.0.2",
-    "es6-shim": "0.35.0",
-    "ionic-angular": "2.0.0-beta.4",
-    "ionicons": "3.0.0-alpha.3",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "angular2-meteor": "0.5.5",
+    "angular2-meteor-auto-bootstrap": "0.5.5",
+    "es6-promise": "3.2.1",
+    "es6-shim": "0.35.1",
+    "ionic-angular": "2.0.0-beta.7",
+    "ionicons": "3.0.0",
     "meteor-node-stubs": "0.2.3",
-    "ng2-translate": "1.8.0",
+    "ng2-translate": "2.1.0",
     "reflect-metadata": "0.1.2",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },
   "devDependencies": {