[email protected] and TypeScript conversion

.gitignore

@@ -5,6 +5,7 @@ node_modules/
 www/build/
 platforms/
 plugins/
+typings/
 *.swp
 .DS_Store
 Thumbs.db

app/app.ts

@@ -0,0 +1,21 @@
+import {App, Platform} from 'ionic-angular';
+import {StatusBar} from 'ionic-native';
+import {MovieListPage} from './pages/movie-list/movie-list';
+
+
+@App({
+  template: '<ion-nav [root]="rootPage"></ion-nav>',
+  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
+})
+export class MyApp {
+
+  rootPage: any = MovieListPage;
+
+  constructor(platform: Platform) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      StatusBar.styleDefault();
+    });
+  }
+}

app/pages/movie-info/movie-info.html

@@ -1,30 +1,30 @@
 <ion-navbar *navbar>
-  <ion-title>Movie Details</ion-title>
+    <ion-title>Movie Details</ion-title>
 </ion-navbar>
 
 <ion-content>
-  <div *ngIf="movie" class="selection">
-    <ion-card>
-      <ion-item>
-        <ion-avatar item-left image-large>
-          <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/>
-        </ion-avatar>
-        <ion-item-content class="movie-title-data">
-          <h1>{{movie.title}}</h1>
-          <p>{{movie.release_date}}</p>
-        </ion-item-content>
-      </ion-item>
+    <div *ngIf="movie" class="selection">
+        <ion-card>
+            <ion-item>
+                <ion-avatar item-left image-large>
+                    <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/>
+                </ion-avatar>
+                <ion-item-content class="movie-title-data">
+                    <h1>{{movie.title}}</h1>
+                    <p>{{movie.release_date}}</p>
+                </ion-item-content>
+            </ion-item>
 
-      <ion-item>
-        <icon document item-left></icon>
-        <h2>Overview</h2>
-        <p class="item-description">{{movie.overview}}</p>
-      </ion-item>
-      <ion-item>
-        <icon bookmark item-left></icon>
-        <h2>Average Vote</h2>
-        <p>{{movie.vote_average}}</p>
-      </ion-item>    
-    </ion-card>
-  </div>
+            <ion-item>
+                <icon document item-left></icon>
+                <h2>Overview</h2>
+                <p class="item-description">{{movie.overview}}</p>
+            </ion-item>
+            <ion-item>
+                <icon bookmark item-left></icon>
+                <h2>Average Vote</h2>
+                <p>{{movie.vote_average}}</p>
+            </ion-item>
+        </ion-card>
+    </div>
 </ion-content>

app/pages/movie-info/movie-info.scss

@@ -1,16 +1,16 @@
 div.selection {
-  font-size: 22px;
-  display: block;
-  text-align: center;
-  padding-top: 5%;
+    font-size: 22px;
+    display: block;
+    text-align: center;
+    padding-top: 5%;
 }
 
 ion-card ion-item ion-avatar img {
-  max-width: 10rem !important;
-  max-height: 10rem !important;
-  border-radius: 0 !important;
+    max-width: 10rem !important;
+    max-height: 10rem !important;
+    border-radius: 0 !important;
 }
 
 .item-description {
-  white-space: normal !important;	
-}
+    white-space: normal !important;
+}

app/pages/movie-info/movie-info.ts

@@ -0,0 +1,16 @@
+import {IonicApp, Page, NavController, NavParams} from 'ionic-angular';
+
+@Page({
+    templateUrl: 'build/pages/movie-info/movie-info.html'
+})
+
+export class MovieInfo {
+
+    private movie: any;
+
+    constructor(private app: IonicApp, private nav: NavController, private navParams: NavParams) {
+        this.nav = nav;
+        this.movie = navParams.get('movie');
+        console.log(this.movie);
+    }
+}

app/pages/movie-list/movie-list.html

@@ -1,22 +1,21 @@
-
 <ion-navbar *navbar>
-  <ion-title>Movie List</ion-title>
+    <ion-title>Movie List</ion-title>
 </ion-navbar>
 
 <ion-content padding>
-  <ion-list>
-    <ion-header>      
-      <ion-item>
-        <ion-input type="text" placeholder="Search a movie..." (input)="searchMovieDB($event, searchKey)"></ion-input>
-      </ion-item>
-    </ion-header>
+    <ion-list>
+        <ion-header>
+            <ion-item>
+                <ion-input type="text" placeholder="Search a movie..." (input)="searchMovieDB($event, searchKey)"></ion-input>
+            </ion-item>
+        </ion-header>
 
-    <ion-item *ngFor="#movie of movies" (click)="itemTapped($event, movie)">
-      <ion-avatar item-left>
-        <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/>
-      </ion-avatar>
-      <h2>{{movie.original_title}}</h2>
-      <p class="item-description">{{movie.overview}}</p>
-    </ion-item>
-  </ion-list>
+        <ion-item *ngFor="#movie of movies" (click)="itemTapped($event, movie)">
+            <ion-avatar item-left>
+                <img src="https://image.tmdb.org/t/p/w92{{movie.poster_path}}"/>
+            </ion-avatar>
+            <h2>{{movie.original_title}}</h2>
+            <p class="item-description">{{movie.overview}}</p>
+        </ion-item>
+    </ion-list>
 </ion-content>

app/pages/movie-list/movie-list.scss

@@ -1,19 +1,19 @@
 .getting-started {
 
-  p {
-    margin: 20px 0;
-    line-height: 22px;
-    font-size: 16px;
-  }
+    p {
+        margin: 20px 0;
+        line-height: 22px;
+        font-size: 16px;
+    }
 
 }
 
 ion-avatar img {
-  max-width: 5rem !important;
-  max-height: 5rem !important;
-  border-radius: 0 !important;
+    max-width: 5rem !important;
+    max-height: 5rem !important;
+    border-radius: 0 !important;
 }
 
 .item-description {
-  white-space: normal !important;	
+    white-space: normal !important;
 }