WebApp Development Framework Ionic+angularjs+cordova

There are three types of mobile apps : Native app, WebAPP, Hybridapp;hybridapp combine the advantages of the first two categories of apps and are becoming more and more popular.

Ionic

Ionic is a new user interface framework that can be used to build hybrid mobile apps using HTML5, claiming to be "a combination of local and HTML5." The framework provides a number of basic mobile user interface examples, such as simple entries such as list (lists), tab bar (Tabbars), and trigger switch (toggleswitches). It also provides examples of more complex visual layouts, such as the slide-out menu showing content below.

Ionic claims that they emphasize performance, and trigger on mobile devices by restricting DOM interaction, completely removing jquery, and using a specific hardware-accelerated CSS filter like translate (z) gpu-- This approach provides hardware-accelerated interaction-and so on-to maximize speed, compared to interactions provided by powered-up mobile browsers.

Ionic at the same time it is based on AngularJs .

AngularJs

Angularjs is based on the belief that declarative programming should be used to build user interfaces and write software constructs, while instruction programming is well suited to represent business logic. The framework employs and expands traditional HTML to accommodate dynamic content through two-way data binding, and bidirectional data binding allows for automatic synchronization between models and views. As a result, Angularjs makes operation on the DOM no longer important and improves testability.

Cordova

Cordova is a middleware that lets us package webapp into Hybridapp, and it provides a lot of plugins that allow us to use native app functionality.

Cordova is an open source app development framework designed to enable developers to use HTML, Javascript, CSS and other webapis to develop cross-platform mobile platform applications, formerly known as Phonegap,adobe Acquisition Nitobi company, PHONEGAP trademark reserved, the code was contributed to the Apache Foundation, and Apache named it Apachecallback, and later when the new version was released, it was named Apachecordova.

Cordova is a set of API interfaces for mobile devices that access these interfaces using JavaScript to invoke hardware system resources such as cameras and compasses. With some UI frameworks based on HTML5, CSS3 technology, such as Jquerymobile, Dojomobile, or senchatouch, developers can quickly develop cross-platform apps without having to write any native code.

Note that because Cordova itself is still a native program, the SDK for these system platforms is still needed to package the app.

In this article we build the Angularjs+ionic+cordova development environment in Win7, including the node. js, Cordova CLI, JDK, and Android SDK involved.

About the Android development environment, and Cordova installation Tutorial: http://www.cnblogs.com/webapi/p/5519468.html

In this article, let's use Angularjs+ionic+cordova to quickly make our first Hybridapp, and get started!

The start step site is: http://ionicframework.com/getting-started/

Official website CSS component: http://ionicframework.com/docs/components/#header

1 Installing ionic and Cordova

Official website http://ionicframework.com/

Domestic http://www.ionic.wang/

Command-line installation ionic

$ npm install-g Cordova Ionic

2 Create a new ionic project

Start myApp Tabs

3 Run the Ionic project we just created

$ cd myApp$ ionic Platform add Android$ ionic build Android$ ionic emulate Android  

4 Preview in browser and refresh in real time

$ ionic Serve

We choose localhost and turn the browser into mobile mode;

Then we go into the editor to modify the project folder www code, see, the browser can be followed by our save real-time refresh, very useful!!!

WebApp Development Framework Ionic+angularjs+cordova