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 XMac OSX, open a. bash_profile fileBrew Updatebrew Install Ant
Set the related Path,mac OS X to add something like this belowCD ~open. Bash_profile
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/toolsYou need to install the Nodejs first and then install it via NPM
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 projectNPM install-g Cordova Ionic
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 directoryAutomatically 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
Introducing the Qunee development package<!--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>
Modify Index.html<script src= "Lib/qunee/qunee-min.js" ></script>
<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 mapCompiling Tests and publishingAngular.module (' app ', [' Ionic ']). Controller (' Metro ', function ($scope) {$scope. title = "Shanghai Metro map"; Loadgraph ();}); function Loadgraph () {...//load Metro map}Test first in the desktop environment, Chrome is working, and then compiled into a variety of mobile platform versions, the Android version for exampleIf you want to test in a virtual machine, you can use theCD Q-metroionic Platform Add androidionic build androidionic run AndroidIonic emulate AndroidIonic 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:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
