Ionic Installation

This site's example uses version 1.3.2 of Ionic, with the following CDN library addresses:

<link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>

The latest version of Ionic can be downloaded from http://ionicframework.com/docs/overview/#download.

After downloading and unzipping the package, it contains the following directories:

css/               =>     Style files
fonts/             =>     Font files
js/                =>     Javascript files
version.json       =>     Version update notes

You can also download the resource files from Github: https://github.com/driftyco/ionic (in the release directory).

Next, we only need to include the css/ionic.min.css and js/ionic.bundle.min.js files from the above directories in our project to create an Ionic application.

Example

&lt;ion-header-bar class="bar-positive">
    <h1 class="title">Hello World!</h1>
</ion-header-bar>

<ion-content>
    <p>My first Ionic application.</p>
</ion-content>

Click the "Try it out" button to view the online example.

This tutorial focuses on the application of the Ionic framework, with most examples running in the browser. Running on mobile devices can be detailed in the command line installation tutorial that follows.

Note: For mobile applications like PhoneGap, we only need to add the corresponding js and css files to the resource library.

Command Line Installation

First, you need to install Node.js, as we will use its NPM tool in the following installation. More information about NPM can be found in our NPM Usage Introduction.

Then, install the latest versions of Cordova and Ionic via the command line tool. Refer to the official documentation for Android and iOS installations.

On Windows and Linux, open the command line tool and execute the following command:

$ npm install -g cordova ionic

On Mac systems, use the following command:

sudo npm install -g cordova ionic

Note: iOS requires installation on Mac OS X and Xcode environment.

If you have already installed the above environment, you can execute the following commands to update the versions:

npm update -g cordova ionic

sudo npm update -g cordova ionic

Create an Application

Use the templates provided by Ionic to create an application, or start with a blank project:

$ ionic start myApp tabs

Run the Ionic Project We Just Created

Use the Ionic tool to create, test, and run your apps (or directly create them with Cordova).

Create an Android Application

$ cd myApp
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android

If everything is normal, an emulator will pop up with the following interface:

Create an iOS Application

$ cd myApp
$ ionic cordova platform add ios
$ ionic cordova build ios

$ ionic cordova emulate ios

If the "ios-sim was not found." error occurs, you can execute the following command:

npm install -g ios-sim

If everything is normal, an emulator will pop up with the following interface:

Ionic Lab

Ionic Lab has been discontinued.

Ionic Lab is a desktop development environment. If you prefer not to use the command line, Ionic Lab will meet your needs.

Ionic Lab provides developers with an easier way to start, build, run, and simulate Ionic applications.

Ionic Lab supports the following platforms: Windows, Mac OS X, Linux. The download link is: http://lab.ionic.io/. After downloading, simply install it. The entire interface is shown below:

Through this interface, you can perform the following operations:

Create an application
Preview an application
Build an application
Run an application
Upload an application
View run logs

It is recommended to use Sublime Text as the editor for Ionic projects. We can open projects directly in Sublime Text via Ionic Lab, as shown in the following image:

GIF Demonstration

```

❮ Ionic Header Footer Ionic Color ❯