Ionic build Hybrid APP-Shanghai Metro map

Source: Internet
Author: User
Tags macbook

Qunee has an example of a Shanghai Metro map, customers want to turn into mobile app, study Android WebView, and PhoneGap and many other hybrid app program, finally choose to use ionic, accurate ionic + PhoneGap + Qunee Ionic is a front-end framework based on HTML5 to create hybrid applications, with PHONEGAP + ANGULARJS to achieve a cross-platform, lightweight mobile UI solution, this article will introduce the ionic implementation of the mobile version of the Qunee Shanghai map ExampleBackground knowledgeInstall ionic required Software Environment-Java, Android SDK, etc.

Ionic is actually a synthesizer, with the help of a variety of technologies, itself is a set of UI framework, combined with PHONEGAP to achieve cross-platform mobile app, need to install a dependent program, such as Nodejs, Java, ADT, Ant, Xcode, and set up a good java_home, Add Android SDK tool to environment variable

Install ant under Mac OS X
Brew Updatebrew Install Ant
Mac OSX, open a. bash_profile file
CD ~open. Bash_profile
Set the related Path,mac OS X to add something like this below
Export java_home= '/usr/libexec/java_home-v 1.8 ' # Androidexport path=${path}:/users/macbook/workspace/ Android-sdk-macosx/platform-tools:/users/macbook/workspace/android-sdk-macosx/tools
Installing Ionic and Cordova

You need to install the Nodejs first and then install it via NPM

NPM install-g Cordova Ionic
For more information, please refer to the official documentation +google http://ionicframework.com/getting-started/Create a ionic project Q-metro use the following command to create a new project
Ionic start Q-metro

The initial directory structure is as follows

In fact, the new project is a tabs example that can be accessed in the browser as follows

Ionic Project Structurewww directory

Automatically generated a bunch of directories and files, where the www/directory is my concern

  

Index.html structure First Look at index.html, is the main page, the introduction of Angularjs, Cordova and other JS support, in addition to App.js, Controllers.js, Services.js three files, these three files build the application logic of the app, the app is the main program, including some settings and launch scripts, services is the Data Support Section, which is the model part, to provide data deletion and modification operation, controllers for control, including business logic control Code, Because the purpose of this article is to create a mobile version of the Metro map using Qunee, more business operations are left to the reader to study, so the JS structure does not involve all facets of the design pattern, we will create a simple bootstrap to implement the data rendering directly in the App.js
<!--Ionic/angularjs js--><script src= "lib/ionic/js/ionic.bundle.js" ></script><!--Cordova Script (this would be a 404 during development)--><script src= "Cordova.js" ></script><!--your app ' s JS- -><script src= "Js/app.js" ></script><script src= "Js/controllers.js" ></script>< Script src= "Js/services.js" ></script>
Introducing the Qunee development package
<script src= "Lib/qunee/qunee-min.js" ></script>
Modify Index.html
<body ng-app= "App" ng-controller= "Metro" animation= "Slide-left-right-ios7" ><ion-header-bar class= " Bar-dark ">

Edit the script to get rid of Controllers.js and services.js, edit App.js as follows, which loading Metro map code can be referenced based on HTML5 technology to draw Shanghai Metro map
Angular.module (' app ', [' Ionic ']). Controller (' Metro ', function ($scope) {$scope. title = "Shanghai Metro map"; Loadgraph ();}); function Loadgraph () {...//load Metro map}
Compiling Tests and publishing
Test first in the desktop environment, Chrome is working, and then compiled into a variety of mobile platform versions, the Android version for example
CD Q-metroionic Platform Add androidionic build androidionic run Android
If you want to test in a virtual machine, you can use the
Ionic emulate Android

Ionic support a variety of mobile platforms, if you want to create iOS can change "Android" to "ios" under the Android device on the real machine running interface as follows:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.