Ionic 2-10 minutes Hello Word tutorial

For anyone with web development experience, running a Ionic 2 app using the Ionic CLI is very simple, and in this tutorial you will build a "Hello World" program within 10 minutes.

With just a few lines of command, you can quickly pass the template and walk on the road to Shark Tank, an entrepreneurial talent show in America.

# # #安装ionic首先你要先安装Ionic 2 CLI, if wood please run the following command to install Ionic 2 CLI

NPM install-g Ionic

Then install Ionic@beta with NPM

NPM install-g ionic[@beta] (/user/beta)

Run the following command to create a blank template

' Ionic start HelloWorld blank--v2 '
ionic start '

These commands will help you set something up, including the first @page in App/pages/home, including the following files:

home.html: The template Home.js:JavaScript code for the page, @Page component defines the Home.scss:SASS style file structure here

# # #修改页面我们修改模板 (hello.html) to display "Hello World" in the NavBar (navigation bar), which shows "Hello Andrew," "Andrew" is a variable from the @Page module. The original code is as follows

<ion-navbar *navbar>
  <ion-title>
    home
  </ion-title>
</ion-navbar>

<ion-content class= "Home" >
  <ion-card>
    <ion-card-header> card
      header
    </ ion-card-header>
    <ion-card-content>
      Hello World
    </ion-card-content>
  </ Ion-card>
</ion-content>

First we modify ion-title into "Hello world".

  <ion-title>
    Hello World
  </ion-title>

We then modify the ion-content to include hello text and then bind a name variable from @page

<ion-content class= "Home" >
  <ion-card>
    <ion-card-content>
      Hello {{name}}
    </ ion-card-content>
  </ion-card>
</ion-content>

Finally, we modify @page (home.js) to give name a value. The original code is as follows:

Import {Page} from ' Ionic-angular ';

[@Page] (/user/page) ({
  templateurl: ' build/pages/home/home.html '
})
Export class Homepage {}

We add a constructor and then assign THIS.name to a value that will be bound to our template

Import {Page} from ' Ionic-angular ';

[@Page] (/user/page) ({
  templateurl: ' build/pages/home/home.html '
})
Export class Homepage {
    constructor () {
        THIS.name = "Andrew";
    }

# # #运行在命令行里面我们运行ionic serve to see our app

Ionic serve

Finally you will see this interface

Summing up within 10 minutes, using ionic command-line tools, you can build a simple Hello world app!