1.Ionic Academy (Membership Site)
Membership site like TeamTreeHouse focused on Ionic & Angular
- 30+ Video Courses
- 30+ Written Tutorials ("Quick Wins")
- Roadmap for developers to follow a learning path
- Online Community & Slack Channel
import { NgModule } from '@angular/core'; | |
import { BrowserModule } from '@angular/platform-browser'; | |
import { RouteReuseStrategy } from '@angular/router'; | |
import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; | |
import { SplashScreen } from '@ionic-native/splash-screen/ngx'; | |
import { StatusBar } from '@ionic-native/status-bar/ngx'; | |
import { AppComponent } from './app.component'; | |
import { AppRoutingModule } from './app-routing.module'; |
ionic start devdacticPokedex blank | |
cd devdacticPokedex | |
ionic g page details | |
ionic g service services/pokemon |
captureImage(sourceType: number) { | |
var options: CameraOptions = { | |
quality: 100, | |
sourceType: sourceType, | |
saveToPhotoAlbum: false, | |
correctOrientation: true | |
}; | |
this.camera.getPicture(options).then(imagePath => { | |
// There is your image! |
import { MovieService, SearchType } from './../../services/movie.service'; | |
import { Component, OnInit } from '@angular/core'; | |
import { Observable } from 'rxjs'; | |
@Component({ | |
selector: 'app-movies', | |
templateUrl: './movies.page.html', | |
styleUrls: ['./movies.page.scss'], | |
}) | |
export class MoviesPage implements OnInit { |
Membership site like TeamTreeHouse focused on Ionic & Angular
.info-img { | |
max-height: 30vh; | |
object-fit: contain; | |
padding: 10px; | |
} |
<ion-header> | |
<ion-toolbar color="primary"> | |
<ion-buttons slot="start"> | |
<ion-back-button defaultHref="/"></ion-back-button> | |
</ion-buttons> | |
<ion-title>{{ information?.Genre }}</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content padding> |
import { MovieService } from './../../services/movie.service'; | |
import { Component, OnInit } from '@angular/core'; | |
import { ActivatedRoute } from '@angular/router'; | |
@Component({ | |
selector: 'app-movie-details', | |
templateUrl: './movie-details.page.html', | |
styleUrls: ['./movie-details.page.scss'], | |
}) | |
export class MovieDetailsPage implements OnInit { |
<ion-header> | |
<ion-toolbar color="primary"> | |
<ion-title>My Movie Search</ion-title> | |
</ion-toolbar> | |
</ion-header> | |
<ion-content> | |
<ion-searchbar [(ngModel)]="searchTerm" (ionChange)="searchChanged($event)"></ion-searchbar> | |
import { MovieService, SearchType } from './../../services/movie.service'; | |
import { Component, OnInit } from '@angular/core'; | |
import { Observable } from 'rxjs'; | |
@Component({ | |
selector: 'app-movies', | |
templateUrl: './movies.page.html', | |
styleUrls: ['./movies.page.scss'], | |
}) | |
export class MoviesPage implements OnInit { |