uniquejava
commented
8 years ago full code: git clone https://bitbucket.org/mchauvinc/introducing-ionic-2.git
➜ hello $ ionic g --list
Available generators:
* component
* directive
* page
* pipe
* provider
* tabs
➜ hello $ ionic generate page search
√ Create app/pages/search/search.html
√ Create app/pages/search/search.scss
√ Create app/pages/search/search.ts
Don't forget to add an import for search.scss in app/themes/app.core.scss:
@import "../pages/search/search.scss";
➜ hello $navigation
this.nav.push(SearchPage);
this.nav.setRoot(SearchPage);
<button primary (click)="goToSearch()">Go to search</button>
<button primary [navPush]="theSearchPage">Go to search 2</button>
<button nav-pop>go back</button>
list
<ion-content padding class="search">
<ion-list>
<ion-item *ngFor="#result of results">
<ion-thumbnail item-left>
<img [src]="result.artworkUrl100" alt="">
</ion-thumbnail>
<h2 [innerText]="result.trackName"></h2>
<p>{{result.artistName}}</p>
<ion-icon item-right [name]="result.kind==='song' ? 'musical-notes' : 'film'"></ion-icon>
<ion-icon item-right person [hidden]="result.kind !== 'song'"></ion-icon>
</ion-item>
</ion-list>
</ion-content>search bar
<ion-searchbar [(ngModel)]="keyword"
(cancel)="userPressedCancel()"
(keyup)="keyHasBeenPressed($event)"></ion-searchbar>export class SearchPage {
public results: any;
public keyword: string;
constructor(public nav: NavController) {
this.results = this.getResults();
this.keyword = '';
}
userPressedCancel(){
console.debug('User pressed cancel');
this.results = this.getResults();
this.keyword = '';
}
keyHasBeenPressed(e){
if(e.keyIdentifier === 'Enter'){
this.results = this.getResults().filter((item) => item.trackName.toLowerCase().includes(this.keyword.toLowerCase()));
}
}radio
ionic generate page settings
<ion-content padding class="settings">
<ion-list radio-group>
<ion-list-header *ngIf="!selectCountry">
Pick a country
</ion-list-header>
<ion-list-header *ngIf="selectCountry">
Country selected: <p>{{selectCountry.local_name}}</p>
</ion-list-header>
<ion-item *ngFor="#country of countries" [class.active]="selectCountry === country">
<ion-label>{{country.name}}</ion-label>
<ion-radio (select)="selectCountry = country" [value]="country.code"></ion-radio>
</ion-item>
</ion-list>
</ion-content>export class SettingsPage {
private countries: [any];
constructor(public nav: NavController) {
this.countries = [
{
name: 'United States',
local_name: 'USA',
code: 'us',
currency: '$'
},
{
name: 'United Kingdom',
code: 'gb',
local_name: 'The UK',
currency: '£'
},
{
name: 'Russia',
local_name: 'Россия',
code: 'ru'
}
];
}
}http
app.ts
import {HTTP_PROVIDERS} from 'angular2/http';
@App({
templateUrl: 'build/app.html',
providers: [HTTP_PROVIDERS],
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})search.ts
import {Http} from 'angular2/http';
import {Inject} from 'angular2/core';
export class SearchPage {
private http: Http;
constructor(public nav: NavController, @Inject(Http) httpService) {
this.http = httpService;
this.results = this.getResults();
this.keyword = '';
} keyHasBeenPressed(e){
if(e.keyIdentifier === 'Enter'){
//this.results = this.getResults().filter((item) => item.trackName.toLowerCase().includes(this.keyword.toLowerCase()));
this.http.get('https://redapesolutions.com/itunes?term=' + this.keyword)
.subscribe((response) => {
this.results = response.json().results;
});
}
}
安装
npm install -g ionic cordova ios-sim ios-deploy
40+ Ionic Framework 2 Resources
http://mcgivery.com/15-ionic-framework-2-resources/
http://www.joshmorony.com/ionic-2-first-look-series-your-first-ionic-2-app-explained/
https://github.com/XueRainey/Ioniclub
http://ionicframework.com/docs/v2/
books
introducing ionic 2 code: https://bitbucket.org/mchauvinc/introducing-ionic-2