Ionic Getting Started Angularjs extension

Ionic

Ionic is a powerful hybrid/HYBRIDHTML5 mobile development framework characterized by the use of standard HTML, CSS, and JavaScript to develop cross-platform (currently supported: Android, IOS, program support: Windows Phone, Firefox OS) native App app:

Ionic mainly consists of three parts:

• CSS framework-provides native app textured CSS style simulations. Ionic this part of the implementation uses the Ionicons icon style library.

• The JavaScript framework-Ionic is based on the ANGULARJS framework, follows the framework constraints of ANGULARJS, and mainly provides an extension of angularjs that adapts to the mobile UI, mainly including directives and services. In addition, Ionic uses Angularui router to implement front-end routing.

• The command-line/CLI-command-line toolset simplifies application development, construction, and simulation operations. The Ionic command-line tool uses Cordova, which relies on the Platform SDK (Android & IOS) to package mobile Web projects into native apps.

Because Ionic uses some new specifications for HTML5 and CSS3, ios7+/android4.1+ is required. Applications developed using ionic on phones that are below these versions sometimes have puzzling problems.

Ionic.js: Instruction

Ionic.js extends the ANGULARJS, and its main contribution is to abstract the UI components that are common in mobile development into ANGULARJS instructions, so that we can quickly apply them in HTML development.

For example, we can implement a fully functional tab using the ION-TABS directive:

2. <ion-tabs>

4. <ion-tabtitle "home" ... </ION-TAB>

6. <ion-tabtitle "exchange" >... </ION-TAB>

8. <ion-tab Title="Settings">... </ion-tab>

10. </ion-tabs>

The instructions implemented by Ionic.js basically cover the needs of mobile development, and the following diagram can help us to quickly and briefly understand the capabilities of Ionic.js:

Ionic.js: Routing Management

In a single page app, routing management is an important aspect. Instead of using the ANGULARJS built-in ng-route module, Ionic.js selects the Ui-router module for the Angularui project.

The core idea of Ui-router is to abstract a set of sub-views into a state machine, and navigation means a toggle of state. In different states, Ionic.js renders the corresponding sub-view (dynamically loaded HTML fragments) to implement the function of routing navigation:

Ionic.js: Gesture Support

Given the features of mobile app interactions, Ionic.js also provides events for gesture manipulation, such as:

• Hold-long Press

• Tap-tap

• Drag-Drag

• Swipe-sliding

• ...

Reference: http://www.hubwiz.com/course/55010505e564e5172c0b9405/

Ionic Getting Started Angularjs extension