saimon24

import {Component} from "@angular/core";
import {RouterConfig} from "@angular/router";
import {NS_ROUTER_DIRECTIVES, nsProvideRouter} from "nativescript-angular/router";
 
import {ListPage} from "./pages/list/list.component";
import {PokemonPage} from "./pages/pokemon/pokemon.component";
 
@Component({
    moduleId: module.id,
    selector: "my-app",

saimon24

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent, APP_ROUTER_PROVIDERS} from "./app.component";
 
// HACK - patch dom adapter
// For more info see: https://github.com/NativeScript/nativescript-angular/issues/305
import {Parse5DomAdapter} from '@angular/platform-server/src/parse5_adapter';
(<any>Parse5DomAdapter).prototype.getCookie = function (name) { return null; };
 
nativeScriptBootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

saimon24

import { Component } from "@angular/core";
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/add/operator/map';
import {Router} from "@angular/router";
 
@Component({
  selector: "list",
  providers: [HTTP_PROVIDERS],
  templateUrl: "pages/list/list.component.html"
})

saimon24

<ActionBar title="My Pokedex"></ActionBar>
<GridLayout>
  <Image src="http://pokeapi.co/media/sprites/pokemon/150.png" [class.hide]="!isLoading"></Image>
 
  <ListView [items]="pokemon" [class.visible]="listLoaded" class="small-spacing" (itemTap)="showDetails($event)">
    <template let-item="item" let-x="index">
      <DockLayout stretchLastChild="true">
          <Image 
            dock="left" 
            [src]="'http://pokeapi.co/media/sprites/pokemon/' + (x+1) + '.png'"

saimon24

.small-spacing {
  margin: 5;
}
 
.medium-spacing {
  margin: 10;
}
 
ListView {
  opacity: 0;

saimon24

import { Component } from "@angular/core";
import { Http, HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/add/operator/map';
import {Router, ActivatedRoute} from "@angular/router";
 
@Component({
  selector: "pokemon-page",
  providers: [HTTP_PROVIDERS],
  templateUrl: "pages/pokemon/pokemon.component.html"
})

saimon24

<ActionBar [title]="name">
  <NavigationButton text="Back" android.systemIcon="ic_menu_back" (tap)="navigateBack()"></NavigationButton>
</ActionBar>
<StackLayout class="item-group">
  <Label [text]="'Height:' + height" textWrap="true"></Label>
  <Label [text]="'Weight:' + weight" textWrap="true"></Label>
  <Image [src]="pokeimg"></Image>
 
  <ActivityIndicator
    [busy]="isLoading"

saimon24

.item-group {
    padding: 10;
}
 
.item-label {
    font-weight: bold;
}

saimon24

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
const routes: Routes = [
  { path: '', redirectTo: 'movies', pathMatch: 'full' },
  { path: 'movies', loadChildren: './pages/movies/movies.module#MoviesPageModule' },
  { path: 'movies/:id', loadChildren: './pages/movie-details/movie-details.module#MovieDetailsPageModule' }
];
 
@NgModule({

saimon24

# Install Ionic if you haven't before
npm install -g ionic
 
# Create a blank new Ionic 4 app with Angular support
ionic start movieApp blank --type=angular
cd movieApp
 
# Use the CLI to generate some pages and a service
ionic g page pages/movies
ionic g page pages/movieDetails