Angular2 - ionic2 - First

拿 ionic2 的 template,试了试手,感觉一般吧..

主要代码:

Request services

@Injectable()
export class MyData {

  constructor(public http: Http) { }

  loadCategoryList() {
    // We're using Angular Http provider to request the data,
    // then on the response it'll map the JSON data to a parsed JS object.
    // Next we process the data and resolve the promise with the new data.
    return this.http.get(categoryListURL)
      .map(res => res.json())

    // we've got back the raw data, now generate the core schedule data
    // and save the data for later reference
  }

  loadContentList() {
    return this.http.get(contentURL)
      .map(res => res.json())
  }

  loadDayEvents(year, month, day) {
    return this.http.get(getDayEventURL(year, month, day))
      .map(res => res.json())
  }
}

Home page template

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Today's Event</ion-title>
</ion-navbar>


<ion-content padding class="getting-started">

  <h3>Today</h3>
  <ion-item>
    <ion-label>Pick the Date</ion-label>
    <ion-datetime (change)="selectDate($event)" displayFormat="DD/MM/YYYY" [(ngModel)]="myDate"></ion-datetime>
  </ion-item>
  <ion-list>
    <ion-card *ngFor="let item of dataDisplayed">

      <img src={{item?.assets?.poster}} />

      <ion-card-content>
        <h2 class="card-title">
         {{item.title}}
      </h2>
        <p>
          {{item.description}}
        </p>
      </ion-card-content>

    </ion-card>
  </ion-list>
</ion-content>

Sample Component

import {Page, DateTime, Loading, NavController} from 'ionic-angular';
import { OnInit } from '@angular/core';

import * as moment from 'moment';
import {MyData} from './../../providers/my-data/my-data';


@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  directives: [DateTime],
  providers: [MyData]
})
export class HelloIonicPage implements OnInit {
  myDate: any;
  loading: Loading;
  dataDisplayed: Array<any>;

  constructor(private data: MyData, private nav: NavController) {
    this.myDate = moment().format("YYYY-MM-DD");
    this.presentLoading();
  }

  ngOnInit() {
    this.data.loadDayEvents(new Date().getFullYear(), new Date().getMonth(), new Date().getDay())
      .subscribe(data => {
        this.dataDisplayed = data;
        setTimeout(() => this.loading.dismiss(), 1000);
      })
  }
  selectDate(date) {
    this.presentLoading();
    // console.log(date);

    this.data.loadDayEvents(date.year.value, date.month.value,date.day.value)
      .subscribe(data => {
        this.dataDisplayed = data;
        setTimeout(() => this.loading.dismiss(), 1000);
      })
  }

  presentLoading() {
    this.loading = Loading.create({
      content: "Please wait..."
    });
    this.nav.present(this.loading);
  }
}