Need Basic Working Tutorial for New App Structure

Ionic Framework ionic-v3
1

Hello All,

I have been using Ionic 1 for some time now and am ready to migrate to Ionic 2. Here is my problem, I am trying to get up to speed with Ionic 2 and all of the tutorial I find online are based on the what I guess is the beta version of the project that gets generated. Right off the bat I see that there is now an app.components.ts file, the Home Page constructor has a NavController, and the provider file that is generated does not contain the load() method any longer. I am trying to follow the following tutorial:

http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

Can you please do this tutorial with the new structure so I can see how I am supposed to inject services into my app.

2

See if this helps: Video tutorial: Creating Your First Ionic 2 App

3

As for how to inject services or call an API, it’s the same as any other Angular application; see https://angular.io/docs/ts/latest/guide/server-communication.html

4

Your tutorial was very help with the basics of Ionic 2, but unfortunately has not helped my with my problem

Can you please show me how to set up the PeopleService used in the tutorial. I will post my current code files. Thanks

5

app.components:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  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();
      Splashscreen.hide();
    });
  }
}

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PeopleService } from '../../providers/people-service/people-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [PeopleService]
})

export class HomePage {
  public people: any;

  constructor(public navCtrl: NavController, public peopleService: PeopleService) {
    this.loadPeople;
  }

  loadPeople() {
    this.peopleService.load()
      .then(data => {
        this.people = data;
      });
  }

}

** Note** The constructor line is giving me an error Cannot find name 'PeopleService’
I would assume that I need to add a reference to it somewhere but I do not know where or how. Any help is appreciated.

app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler }]
})
export class AppModule { }
6

Move the providers declaration out of the component and into the app module. Your constructor also isn’t calling loadPeople (unless that’s some weird JavaScript quirk, I think you need parentheses after it).

7

Can you please show me how??

8

I would recommend spending some time learning the basics of Angular 2 before trying to hack together an Ionic app.

https://angular.io/docs/ts/latest/guide/index.html

9

This should help

10

You can go through these basic video tutorials to get started with Ionic 2 Development Blog