10 minutes development of a cross-platform mobile application using the Ionic framework

Ionic is a front-end framework that helps developers use HTML5, CSS3, and JavaScript to make native applications. Ionic's philosophy is similar to the bootstrap developed at the front end, with the goal of encapsulating best practices for HTML5 mobile cross-platform development, just as Twitter bootstrap does in front-end development. The Ionic framework is currently developing rapidly, and we have been using it since March 2014, when 1.0.0beta2 was updated to 1.0.0BETA10, which is likely to be a beta version every 2 weeks and contains substantive updates. Ionic framework is very advanced, the JS part is based on the ANGULARJS framework, a lot of use of css3,css generation based sass, build tools based on the latest gulp, version upgrade based on Bower, the original layer seamlessly encapsulated Cordova.

the beautiful, open source front-end framework for developing hybrid mobile apps with HTML5.

Structure and concept of the Ionic framework

Using the Ionic framework, we can effectively utilize the characteristics of ANGULARJS and provide HTML5 application development efficiency, quality and modularity. According to our experience, using ionic development, the same function code volume will be reduced by 50% and development speed by more than the use of the jquery-based mobile framework, as compared with native development, it is also developed on iOS, regardless of the non-cross-platform factors of native application development. Using ionic is more than one-fold faster than using OC development. User experience, on iOS and high-end Android devices (more than 1500 yuan of mobile phones, tablets), and the original application is not very different, the average user can not distinguish is HTML5. At the moment, the market is fiercely competitive app, temporarily not suitable for HTML5 development, even if HTML5 fully realize business needs, such as where to go, Ctrip this competitive app. But in enterprise applications, the use of Ionic has a clear advantage, we have used the Ionic framework online ipad and Android Pad enterprise applications.

With Ionic, we can develop Android and iOS apps using HTML5, JavaScript (angular) and CSS (SASS).
Getting Started with Ionic installation Ionic installation Nodejs
Nodejs is very popular in recent years, installing NODEJS in order to be able to install Cordova and ionic through command line tools


Installing Cordova and IONICNPM install-g Cordova Ionic
In Mac, you need to add sudo:


sudo npm install-g Cordova Ionic
Create an App

Ionic website provides developers with a number of development templates, such as the Default tab template (page based on similar tab organization, using the IONTAB Directive), Sidemenu templates, etc.

Create an app based on the tab template

Ionic start MyApp1

Console output

Ionic start myapp1running start task ... Creating Ionic app in folder/users/zhangxitao/myapp1 based on tabs projectdownloading:https://github.com/driftyco/ ionic-app-base/archive/master.zipdownloading:https://github.com/driftyco/ionic-starter-tabs/archive/ Master.zipinitializing Cordova Project. Fetching plugin "Org.apache.cordova.device" via plugin registryfetching plugin "Org.apache.cordova.console" via plugin Registryfetching plugin "Https://github.com/driftyco/ionic-plugins-keyboard" via Git clone

You can see that creating a template app is the code that downloads the ionic framework from Git, then initializes the Cordova project with the Cordova command, and then adds a plugin for device,console Log,keyboard, The last plugin Ionic-plugins-keyboard, developed using Ionic, provides a JS layer notification of soft keyboard events, which is useful on Android.
Add iOS native code, actually call Cordova Platform add iOS, of course this side to do on Mac, and need to install Xcode

$ ionic Platform  add iosrunning Platform Task ... Adding platform ioscreating iOS project ... Installing "Com.ionic.keyboard" for Iosinstalling "Org.apache.cordova.console" for Iosinstalling " Org.apache.cordova.device "for iOS

Run the app you created on the emulator.

$ ionic Run iosrunning Run task ... Running app on Platform iosrunning command:/users/zhangxitao/myapp1/platforms/ios/cordova/run No device is connected, tr Ying simulator.build settings from command line:    archs = i386    Configuration_build_dir =/users/zhangxitao/ Myapp1/platforms/ios/build/emulator    sdkroot = iphonesimulator7.1    valid_archs = i386=== Build TARGET Cordovalib of PROJECT cordovalib with CONFIGURATION Debug = = =

If the end is successful, the app will be launched on the iphone simulator, e.g., the interface is flat style, it's beautiful.

What to do below, see Ionic documents, on this basis to do their own application it!