Ionic Tutorial

Ionic Tutorial

11:12 PM


Ionic is a powerful HTML5 application development framework (HTML5 Hybrid Mobile App Framework). Can help you build Web applications that are close to native experiences using Web technologies such as HTML, CSS, and Javascript.
The main focus is on the look and feel, and the UI interaction with your application, especially for Hybird-based HTML5 mobile application development.
is a lightweight mobile phone library, with fast, modern interface, beautiful and so on. In order to solve some other UI library running on the phone slow problem, it directly to the IOS6 and Android4.1 following version support, to get a better experience.


characteristics
·         1.ionic based on Angular grammar, easy to learn.
·         2.ionic is a lightweight framework.
·         3.ionic perfect blend of next-generation mobile framework, support Angularjs features, MVC, code easy to maintain.
·         4.ionic provides a beautiful design, build applications through SASS, it provides a lot of UI components to help developers develop powerful applications.
·         5.ionic focus on the original, so you can not see the mixed application and the difference between the original
·         6.ionic provides a powerful command line tool.
·         7.ionic superior performance, running fast.

Do you need to understand this tutorial?
Before you study this tutorial, you need to know the basics:
·         HTML
·         CSS
·         Javascript
·         Angular

Ionic install Guide

This example uses the ionic v1.3.2 version, the use of the CDN library address:
<link href = "https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel = "stylesheet">
<script src = "https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"> </ script>
The latest version of the download address: http://ionicframework.com/docs/overview/#download .
After downloading, extract the compressed package, including the following directory:
css / => style file
fonts / => font files
js / => Javascript files
version.json => version update description
You can also download the following resource file on Github: https://github.com/driftyco/ionic (in the release directory).
Next, we only need to introduce the above directory css / ionic.min.css and js / ionic.bundle.min.js file in the project to create the ionic application.

Example

< The Ion-header-bar class = " bar-positive " > < h1 class = " title " > the Hello World! </ H1 > </ the Ion-header-bar > < the Ion-Content > < the p- > My first application. </ p > </ ion-content >

try it"
Click the "Try" button to view the online instance.
This tutorial focuses on the application of the ionic framework, and most of the examples run in the browser, and the mobile device can be run in the next command line installation tutorial.
Note: In mobile applications such as phonegap we only need to add the corresponding js and css files to the repository can be.

Command line installation

First you need to install Node.js , we need to use the NPM tool in the next installation, more NPM introduction can see our NPM usage introduction .
And then install the latest version of cordova and ionic from the command line tool . By referring to Android and iOS official documents to install.
Open the command line tool on Window and Linux Execute the following command:
$ npm install -g cordova ionic
Use the following command 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 have already installed the above environment, you can update the version by executing the following command:
npm update -g cordova ionic
or
sudo npm update -g cordova ionic

Create an application

Create an ionic application using an off-the-shelf application template provided by the official government, or a blank project:
$ ionic start myApp tabs

Run the ionic project we just created

Use the ionic tool to create, test, run your apps (or create directly from Cordova).

Create an Android app

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ether emulate android
If everything will pop up the simulator, the interface will look like this:

Create an iOS app

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ion emulate ios
If the "ios-sim was not found." Error occurs, you can execute the following command:
npm install -g ios-sim
If everything will pop up the simulator, the interface will look like this:

Ionic Lab

Ionic Lab is the desktop version of the development environment, if you do not like the use of command line operation, Ionic Lab will meet your needs.
Ionic Lab provides developers with a simpler way to start, compile, run, and simulate running Ionic applications.
Ionic Lab supports the following platforms: Window, Mac OS X, Linux, download address: http://lab.ionic.io/ , download directly after installation. The entire user interface is as follows:
Through the above interface you can do the following:
  • Create an application
  • Preview application
  • Compile the application
  • Run the application
  • Upload application
  • Run log view
    • ...
We recommend using Sublime Text as the editor for the Ionic project. We can open the project directly on Sublime Text via Ionic Lab as shown below:




EmoticonEmoticon

Subscribe to: Post Comments (Atom)