Ma première application mobile avec IONIC

 http://ufrsciencestech.u-bourgogne.fr/lpsil/_OptionM/C3_Cordova_Phone_Gap_1.pdf

ionic start sti2dsin blank --v2 

cd sti2sin

Creating a New Page

Let’s look at adding a new page. While we could create all the structure and files manually to create our new page, the CLI makes this significantly easier by providing automatic page generation using ionic g. After changing into the project directory (cd navigationApp), let’s create a new page called about using the CLI.

ionic g page about

The CLI will generate the HTML, TypeScript, and SCSS files for your new page in a new directory under app\pages.

Navigating From Home to About

To navigate from our home page to our about page, we will need to import our AboutPage class into our home.ts file for use in our HomePageclass.

import {AboutPage} from '../about/about';

Next, we should add a constructor to our HomePage class and assign our AboutPage to a property so we can use it in our template.

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor(){

  }
}

Next in our home template, we can add a button with NavPush and pass our aboutPage property.

<ion-card-content>
  Hello World<br />

  <button [navPush]="aboutPage">Go To About</button>
</ion-card-content>

And we’ll add some content to our about template:

<ion-content padding class="about">
  This is my super awesome about page.
</ion-content>

Serve

Next, in the CLI, we’ll run ionic serve to view our app in the browser:

ionic serve

You should end up with something similar to the following in your browser:

Setting up the Ionic Framework

• To install the Ionic framework, at the prompt type:

If you are installing on OSX or Linux, make sure to precede with sudo.

Creating an Ionic Project

• Go to a convenient location on your computer and create a folder named Ionic. Then move to that folder in the command window.
• To scaffold out a new Ionic project, type the following at the command prompt:

• Move to the conFusion folder and examine the contents.
• To see the resulting project in your browser, type the following at the command prompt:

Conclusions

In this exercise, you installed Cordova and Ionic on your computer. Then you used Ionic to scaffold out a new Ionic application.