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 like Twitter bootstrap in front-end development.

The ionic framework is now developing very quickly. We started from March 2014, when 1.0.0beta2, which is now updated to 1.0.0BETA10, will have a beta number every 2 weeks, and includes a substantial update. Ionic framework is very advanced, JS is based on the ANGULARJS framework, a lot of use of css3,css generation based sass, build tools based on the latest gulp, version number 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 and quality. Degree of modularity. Based on our experience, using ionic to develop more than using the jquery-based mobile framework. The same function code volume will be reduced by 50%, and development speed is more than one. Compared to native development, regardless of the factors that cannot be cross-platform for native application development, the same is developed on iOS, using ionic more than one faster than using OC development.

User experience, on iOS and high-end Android devices (more than 1500 yuan in mobile phones, tablets), and the original application is not very different. The average user cannot tell that it is HTML5.

For the moment, the market is fiercely competitive app. Temporary is not suitable for HTML5 development. Even if HTML5 is fully capable of fulfilling business needs, such as where to go, the competitive app such as Ctrip. 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 are able to develop Android and iOS apps using HTML5, JavaScript (angular) and CSS (SASS).
Getting Started with Ionic installation Ionic installation Nodejs
Nodejs is popular in recent years, installing Nodejs 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 several 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, and then initializes the cordovaproject with the Cordova command. The Device,console log is then added. Keyboard and other plug-ins, the last plug-in ionic-plugins-keyboard use ionic developed, provides a soft keyboard event JS layer notification, very practical on Android.
Adding iOS native code, in fact, calls the Cordova platform add iOS, which of course does this on Mac. And you need to have Xcode installed.

$ 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

Execute 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 = = =

Assuming the final success status, the app is launched on the iphone emulator. For example, the interface is flat style, very beautiful bar

Below what to do, see Ionic documents, on this basis to do their own application it!

Reprint please specify turn from Offbye Sound still-all-end technology blog

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