Signup for the Ionic Newsletter to get the latest news and updates!

  • Zaier

    Hi,
    I’ve learnt Angular2’s basics… now I want to create a cross-plateforme mobile app using Ionic2 .
    I have 3 questions for you 🙂
    1- what is the difference between (Components vs Pages) specially in term of lifeCycle.
    2-why you choose Promises over Observables… Observable have many advantages and that is why Angular2 used RX_JS.
    3-When we can have a stable version ready for production of Ionic2
    thanks in advance

  • Wittaya Attasiri

    Nice serie!! Keep it going

    • http://www.mcgivery.com/ Andrew McGivery

      Thanks! 🙂

  • void brain

    what if we want to save data in local db?

    • Zaier

      You have to use ngCordova … I don’t have a lot of info about that …
      In Ionic 1 we used to use ngCordova but what about angular2 and typescript … will we have an ngCordova2 or something else…

      • http://www.raymondcamdencom/ Raymond Camden

        Err, why do you say you have to use ngCordova? While you *can* use it, you don’t need to. You can save to LocalStorage, WebSQL (icky, but you can), IndexedDB, or SQLIte via a plugin (and ngCordova has a wrpaper for that). Actually Ionic2 has support for SQLite too.

        I guess my point is – ngCordova isn’t required. 🙂

      • SP1966

        ionic-native replaced ngCordoava in Ionic 2. You can find out more about ionic-native in the Ionic 2 docs.

    • Ravitheja Maddineni
  • Ravitheja Maddineni

    I am getting below error when I tried to run the ionic tutorial project created by using ionic start MyIonic2ProjectSideMenu tutorial –v2

    Could someone help me how to fix this issue.

    > node_modules/ionic-angular/components.core.scss Error: Import directives may not be used within control directives or mixins. on line 34 of node_modules/ionic-angular/components.core.scss @import “fonts/ionicons”; –^

  • http://www.raymondcamdencom/ Raymond Camden

    As just an FYI (told to me by smarter people on Twitter), in the constructor, you do not need this.peopleService = peopleService, since the public modifier in the constructor makes it automatic.

  • http://marcusvbp.com.br/ Marcus VBP

    Hi,

    If I run this tutorial in my device (nexus 5), the list is not rendered. I can get the data (it showed in the console.log()), but the App view continues empty.

    With “ionic serve” I can get the data and the ion-list is rendered.

  • Ravitheja Maddineni

    How can we handle errors when we get some error code from server

  • ze0

    i’m a bit lost with this new things.
    I have a little more complex system.
    for staying in the context, each person have a job, jobs are in another place in the api, so job need a provider
    but i don’t know how to link the whole thing.

    I did a for loop with people and call the job provider for get the job.
    but i only the last people have it’s job set, I know i have to use promise stuff but it’s very different from ionic 1.
    What would you do in my case ?

    i’m not really used to this. it’s a bit new for me.

  • ashraful haque

    not working with my same data http://need4engineer.com/api.php . which is similar to https://randomuser.me/api/?results=5 can anoyone help me ?

  • Ravitheja Maddineni

    I am getting below error when I try to send request with results=1000.

    I am not sure if this is error with angular2?

    angular2-polyfills.js:126 GET https://randomuser.me/api/?results=1000 net::ERR_INCOMPLETE_CHUNKED_ENCODING

  • Graciele E. Victor

    Great tutorial – what comes next?

  • Dave Gadsden

    Hi there, I have an app project that was not created as a –ts project – I therefore get unexpected token error firstly with the public people: any; line – Anyone give me help as to what in this tutorial i need to re-write? Thanks

    • Antonio

      I’ve the same error. Are you able to solve this issue?

  • Il blu

    I get this error while trying to replicate this tutorial:

    EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property ‘data’ of undefined

    Unhandled Promise rejection: Cannot read property ‘data’ of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property ‘data’ of undefined(…)

    But I am able to print the values of the JSON. Can someone please explain me this?

    • Audacitus

      You need to explicitly define your json structure in the typescript class that is pulling the Json and make sure they both match. I just found this out.

  • Veysel Kaya

    does not work..:(

  • Long Nguyễn

    i cannot run. Error: Uncaught (in promise)
    Please help me

  • Nikhil Sharma

    Is there any Restfull post api example, which also serves form validation.

  • Carl Rydings

    How do you add headers to the http,get?

  • http://www.marcosborges.com.br Marcos Borges

    Hi,

    i’m having some problems applying this tutorial. I’m only getting a blank page.

    home.ts:
    import {PeopleService} from ‘../../providers/people-service/people-service’;

    @Page({
    templateUrl: ‘build/pages/home/home.html’
    providers: [PeopleService]
    })
    export class HomePage {
    public people: any;

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

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

    and people-service.ts:
    import { Injectable } from ‘@angular/core’;
    import { Http } from ‘@angular/http’;
    import ‘rxjs/add/operator/map’;

    /*
    Generated class for the PeopleService provider.

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html
    for more info on providers and Angular 2 DI.
    */
    @Injectable()
    export class PeopleService {
    data: any;

    constructor(private http: Http) {
    this.data = null;
    }

    load() {
    if (this.data) {
    return Promise.resolve(this.data);
    }

    return new Promise(resolve => {
    this.http.get(‘https://randomuser.me/api/?results=10’)
    .map(res => res.json())
    .subscribe(data => {
    this.data = data.results;
    resolve(this.data);
    });
    });
    }
    }

    • Jean-Baptiste

      You need to put this line at the top of home.ts : import {Page} from ‘ionic-angular’;

    • Muhammad Anas

      Same issue happens with me

    • Phil

      Thank you, Marcos, for solving the data variable issue. I also had to change the following to make it work: this.people = data.results;

    • http://bsides.co/ Rafael Pereira

      Have the same issue. @Page is @Component (changed the reference in everything) but still no use. Can’t import the module still.

  • Makarand Mone

    This was very helpful and worked right out of box

  • Emmanuel Ernest

    Hi,
    Do you have some examples including the LoadingController (beta.11) ?
    I want to display a loading spinner while querying a http client…

    Thanks in advance

  • Michael Bishop

    I am getting an error:

    Error TS2304: Cannot find name ‘resolve’.

    .subscribe(data => {
    this.data = data.results;
    resolve(this.data);
    });

    • kushan shah

      Were you able to fix this ?

    • Sengthai

      it’s easy just declare ( public data: any;) in that class

  • http://www.marqmarti.com/ Marq Martí

    Does. Not. Work.

  • M Argus

    Hello there, I’m new on typescript.

    After copy the “people-service” script to my testing project. I got error on my CLI.. It says

    Error TS2339: Property ‘data’ does not exist on type ‘PeopleService’.

    I think it might be because I’m never make a variable ‘data’ on the service file..

    Where to put the varibale ‘data’ ?

    • Massimo Fattorusso

      put this :
      data: any;

      after :
      export class PeopleService {

      • Mario Espinosa

        Thanks

  • Matthew Tan

    Note: @App is deprecated since 2.0.0 beta 8, and is now replaced with @Component

  • http://bsides.co/ Rafael Pereira

    This throws an error I can’t find a way to fix. Changed paths and nothing. Please help.
    Error: src/pages/home/home.ts(4,31): error TS2307: Cannot find module ‘../../../providers/people-service/people-service’.

  • MOSTSELFISHMAN

    Is it possible to see an authentication tutorial?

  • Albert Higgins

    does someone have the completed tutorial code somewhere, like on github? It’s just easier to see exactly what you’re doing if you can see all the code as opposed to snippets

  • Albert Higgins

    anyone getting errors with the template, try changing the # to a let in the *ngFor loop.

  • mash kaponde

    Hi great tutorial thanks, I am new to ionic and this has really got me up and running…..i was wondering, how can i show some loading functionality (spinner) at the begining of the app to block user interaction and only have the spinner disappear after the http get request is complete. I will appreciate and help.

  • Sumedh Bahatkar

    very very helpful tutorial some error is there but thanks to @Albert Higgins provide same source code for this tutorial with slight minor changes

  • vygaio

    Isnt an Observable wrapped inside a promise anti-promise

  • Gabriel Guedes

    *ngFor=”#person of people” is now wrong.
    Change to:
    *ngFor=”let person of people”

  • kyle

    a lot of stuff different now….

  • Guille Acosta
  • dhananjay solankar

    please send the crud of ionic 2 with any database ex.mysql

  • lahiru heshan

    Hi http is not defined always ,i dont know is there any dependency is missed ,can you pleas help with this

  • malathi

    I am getting CORS error when I use the end point
    https://randomuser.me/api/
    I am using localhost to run the application, any ideas?

  • Shalom iluz

    the bug is in the HTML page *person of people it should be let person of people

  • Hextest Test

    Does Not Work.
    Typescript Error
    Cannot find name ‘Page’.
    Please help

  • Ramu

    Hi,
    Good post.
    Can we get a download link as a demo of what has been shown in this article.
    Secondly When I am running `ionic g provider PeopleService` I am only getting a single file in src/providers folder, unlike what it should be `app/providers/people-service/people-service.ts`
    Thanks.

  • Alain Fernandez del Toro

    How could I show the list of persons grouped by Sex, showing the Sex as a ion-list-header?

  • Jijish Thomas

    Hello, i’m having a problem while accessing an array of objects. Please help

  • http://designwebsg.com/ DesignWebSG

    Do you have source for this sample. Tks

  • kalyan kumar

    Hi,
    Could you please help me to use http.post option ?. I’m facing
    “Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” this error.

  • Aamir Altaf Kathu

    Used “let person of persons” and Component decorator instead of Page and it worked.

  • meerec
  • vishal thakur

    Hello sir ,
    need url Schema for zoom cloud meeting application for iOS .

  • Info Mojonshon

    After some problems with version 3 of Ionic, you have to add:

    In app.module.ts

    import { HttpModule } from ‘@angular/http’;

    imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
    ],
    Or you will get the annoying:

    Failed to navigate: No provider for Http!
    Failed to navigate: No provider for ConnectionBackend!

    Thanks to:

    https://www.joshmorony.com/using-http-to-fetch-remote-data-from-a-server-in-ionic-2/

    I found the solution there.

    • Sumithra N

      Thank you. I am new to ionic and i got very confused with the missing provider. Just worked perfect

  • Stephen

    please update sample source code. it will be helpful for beginners.Its really very hard to look around this tutorial

  • Emiliano Ricci Aparicio

    Hello. I have an error when I want to show the information in the html:

    Uncaught (in promise): TypeError: Cannot read property ‘name’ of undefined TypeError: Cannot read property ‘name’

    When I am debugging, I see the WebService’s results… It seems to be timing… Any help?

    Regards
    Emiliano

  • Mohammad Azam Mohammad Azam

    DOES NOT WORK AT ALL!!! PLEASE CHECK YOUR CODE BEFORE PUBLISHING. THERE IS NO @Page anymore. I would suggest removing this article altogether.

  • சந்துரு

    it works great , when we change the ‘#’ to the ‘let’ in *ngFor