Latest web development tutorials

ionic installation

Download the latest version ionic address: http://ionicframework.com/docs/overview/#download .

After downloading extracting archive contains the following directories:

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

You may also download the following resources file on Github: https://github.com/driftyco/ionic (in release directory).

Next, we only need to introduce the above directory css / ionic.min.css and js / ionic.bundle.min.js files in a project to create ionic applications.

Examples

<Ion-header-bar class = "bar-positive"> <H1 class = "title"> Hello World ! </ h1> </ Ion-header-bar> <Ion-content> <P> My first ionic applications. </ P> </ Ion-content>

try it"

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

This tutorial focuses on explaining the application of ionic framework, most of the instances running in the browser, on mobile devices can run the following command line installation tutorial to learn more about.

Note: In mobile applications such as phonegap we need the corresponding js and css files can be added to the repository.


Command line installation

First you need to install Node.js , we need to use the next tool to its NPM installation, you can view more NPM introduce our NPM use presentation .

And then through the command-line tool to install the latest version of cordova and ionic. By reference to the Android and iOS to install the official documentation.

Window and Linux open the command line tool to perform the following command:

$ npm install -g cordova ionic

On the Mac, use the following command:

sudo npm install -g cordova ionic

Tip: IOS requires Mac Os X. Xcode environment and following installation.

If you have already installed more than environment, you can execute the following command to update the version:

npm update -g cordova ionic

or

sudo npm update -g cordova ionic

Create Application

Use ready-made application templates ionic official provided a blank project or create an ionic applications:

$ ionic start myApp tabs

Run ionic project we just created

Using ionic tool to create, test, run your apps (or created directly by Cordova).

Creating Android Applications

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

If all goes well the simulator will pop up the interface as follows:

Creating 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 will pop up the interface as follows:


Ionic Lab

Ionic Lab is the desktop version of the development environment, if you do not like using the command line, Ionic Lab will meet your needs.

Ionic Lab provides an easier way to start, build, run, and run simulation Ionic application developers.

Ionic Lab Supported platforms: Window, Mac OS X, Linux , download address is: http://lab.ionic.io/ , can be installed directly after downloading. The entire user interface is as follows:

Through the above screen you can do the following:

  • Create Application
  • Preview Application
  • Compile the application
  • Run the application
  • Upload Application
  • Run Log Viewer
  • ......

Sublime Text is recommended as the editor Ionic project, we can open by Ionic Lab directly on Sublime Text item, as shown below:

Gif Operation Demo