Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

ionic installation


May 21, 2021 ionic


Table of contents


ionic installation

This site example uses the version of ionic v1.0.1, download address: ionic-v1.0.1.zip.

The latest version of ionic download address: http://ionicframework.com/docs/overview/#download.

The post-download unzipped package contains the following catalog:

css/               =>     样式文件
fonts/             =>     字体文件
js/                =>     Javascript文件
version.json       =>     版本更新说明

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

Next, we just need to introduce the css/ionic.min.css and js/ionic.bundle.min files in the above directory in .js to create the ionic app.

< ion-header-bar class = " bar-positive " >
<
h1 class = " title " > Hello World! </ h1 >
</
ion-header-bar >
<
ion-content >
< My first ionic app. </ p >
</ ion-content >

Try it out . . .

Click the "Try it" button to view the online instance.

This tutorial focuses on the application of the ionic framework, with most instances running in a browser and running on mobile devices to learn more about the next command-line installation tutorial.

Note: In mobile apps such as phonegap, we simply add the corresponding js and css files to the repository.


The command line is installed

First you need to install node .js, and we'll need to use its NPM tools for the next installation, and more NPM introductions can be viewed in our NPM usage introduction.

Then install the latest version of cordova and ionic with the command line tools. Install by referring to official Android and iOS documentation.

Open the command line tool on Window and Linux to execute the following commands:

$ npm install -g cordova ionic

Use the following commands on your Mac system:

sudo npm install -g cordova ionic

Tip: IOS needs to be installed under Mac Os X. and Xcode environments.

If you already have the above environments installed, you can update the version by performing the following commands:

npm update -g cordova ionic

Or

sudo npm update -g cordova ionic

Create an app

Create an ionic app using an off-the-cally application template officially provided by ionic, or a blank project:

$ ionic start myApp tabs

Run the ionic project we just created

Create, test, run your apps (or create them directly with Cordova) using ionic tool.

Create an Android app

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

If all goes well, the simulator pops up, and the interface looks like this:

ionic installation

Create an iOS app

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

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

npm install -g ios-sim

If all goes well, the simulator pops up, and the interface looks like this:

ionic installation


Ionic Lab

Ionic Lab is a desktop development environment, and if you don't like to use command-line operations, Ionic Lab will meet your needs.

Ionic Lab provides developers with an easier way to get started, compile, run, and simulate running ionic applications.

Ionic Lab supports platforms such as Window, Mac OS X, Linux, with download addresses as: http://lab.ionic.io/, and installed directly after download. The entire interface looks like this:

ionic installation

From the above interface you can do the following:

  • Create an app
  • Preview the app
  • Compile the app
  • Run the app
  • Upload the app
  • Run log view
  • ......

Sublime Text is recommended as the editor for the Ionic project, and we can open the project directly on sublime Text through Ionic Lab, as shown below:

ionic installation