基于ionic+angulajs的混合开发实现地铁APP
注：本博文为博主原创，转载时请注明出处。
项目源码地址：https://github.com/zhangxy1035/SubwayMap
一、项目简介
在该项目中的地铁app是基于ionic+angularjs开发的一款软件，其中使用了高德地图的开放接口（地铁JS API）网址为：http://lbs.amap.com/api/subway-api/subway-summary/。在该app中主要实现了，地铁线路图的整体展示，起点终点设置，界面清空，线路查询，出发地与目的地线路查询等功能。本博文适合对ionic1有一定了解的人学习实践。具体可以参照ionic学习中文网址http://www.ionic.wang/
二、项目演示
项目中的界面风格总体比较清爽，界面如下：（以北京地铁为例）
在上述图片中依次是，地铁图展示，起点终点设置，线路查询，以及出发地目的地查询。
三、项目构建
由于本项目所用的是ionic1，所以必须了解，ionic是如何创建项目的。
首先在自己的电脑上必须安装ionic，然后到自己的项目目录下（以创建项目名称为subway为例），在cmd中运行如下命令
ionic start subway //创建名称为subway的项目
cd subway //进入subway目录下
ionic platfrom add android //添加android平台
ionic build android //在该平台下进行编译（提示一点，首次可以进行编译，但是当你每次修改完项目中的www文件时需要重新进行编译。）
项目的目录如下图：
其中www文件夹下，存储的为项目中的主要代码，包括css，js，html等。接下来为大家逐一介绍，每个文件夹以及重要的函数说明：（在这个项目中，博主start了一个新的ionic项目，其中的文件名称都是没有改过的，属于ionic 默认的tab布局以及tab中的文件名称。）这个www文件直接可以再本项目源码中下载查看。
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 6 <title></title> 7 8 <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 9 <link href="css/style.css" rel="stylesheet"> 10 11 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 12 <link href="css/ionic.app.css" rel="stylesheet"> 13 --> 14 <!--<script src="http://webapi.amap.com/js/marker2.js"></script>--> 15 <script src="http://webapi.amap.com/subway?v=1.0&key=你的key&callback=cbk"></script> 16 17 <!-- ionic/angularjs js --> 18 <script src="lib/ionic/js/ionic.bundle.js"></script> 19 20 <!-- cordova script (this will be a 404 during development) --> 21 <!--<script src="cordova.js"></script>--> 22 23 <!-- your app's js --> 24 <script src="js/app.js"></script> 25 <script src="js/controllers.js"></script> 26 <script src="js/services.js"></script> 27 </head> 28 <body ng-app="starter"> 29 <!-- 30 The nav bar that will be updated as we navigate between views . 31 --> 32 <ion-nav-bar class="bar-positive bar-footer"> 33 34 </ion-nav-bar> 35 <!-- 36 The views will be rendered in the <ion-nav-view> directive below 37 Templates are in the /templates folder (but you could also 38 have templates inline in this html file if you'd like). 39 --> 40 <ion-nav-view></ion-nav-view> 41 <ion-nav-back-button> 42 </ion-nav-back-button> 43 </body> 44 </html>