ionic开发：第一个手机APP

搭建好了ionic环境，那么你就应该尽快开始第一个手机APP的开发，不然你辛辛苦苦搭建的环境就浪费了。

说到开发，我们就要先知道：我们要做一个什么样的产品（功能）、界面原型又是什么样的。这里就大家推荐一个APP界面原型设计的工具。网址：https://creator.ionic.io

第一步：开始创建项目

若成功安装了ionic、则可使用命令行进行项目创建。下面以空白项目为例进行说明。

ionic start blog blank

若安装了ionic lab、则可用客户端工具创建项目。

创建空白项目blog

第二步：项目初始化

将在creator.ionic.io网站上设计的原型导出（Export）、然后将www目录下所有的文件拷贝到blog项目的www目录下。

第三步：启动服务

可使用ionic serve命令启动服务或者通过ionic lab启动项目。

启动服务

若用ionic lab启动项目、则会直接在右边显示预览效果。同时支持浏览器进行访问。

效果预览

第四步：完善项目

一个完善的APP，肯定包含页面相互之间的跳转、动态数据的绑定等等。

1：页面的跳转有多种方式、我主要采用了href以及ng-click这两种方式。

1）：href方式

tab菜单栏采用了href方式的定义。如：

href的定义

其中：href里面的链接是在routes.js中定义的；定义了URL请求路径以及响应的模板页。

感觉跟JAVA里面Spring MVC有点类似；

url ==> @Path 决定着此次请求应该匹配到哪个controller

controller ==> @Controller里面的Method   决定着此次请求应该做的事情。

templateUrl ==> view 页面  决定着响应给用户的内容。

上面的形容有可能不太准确。这只是我的一种理解。

路由的定义

2）：ng-click方式

为了更好地学习，所以我在消息列表页面就采用了另一种方式、也就是ng-click的方式进行跳转。

ng-click方式跳转

首先，我们从路由中可以看到：点击消息的时候，触发了messageCtrl这个controller接口。接口定义如下：

show函数的定义

其中：tabsController.message-detail是在routes.js中定义的。唯一识别、不能重复。推测应该是根据这个ID或者key值来匹配url请求。如果重复则会有冲突。

消息内容页 路由定义

点击单条消息、则会渲染templates/page.html页面显示消息内容。

2：动态数据

还是上面消息列表的实例；上面使用了$http来获取data/message_list.json数据。其中数据定义如下：

动态数据

若要使用$http、则要先加载$http模块。数据请求成功后，通过$scope.list=list;方式将数据进行绑定。

上面的数据是一个数组列表、则使用ng-repeat进行遍历。

数据遍历

若绑定的数据只是一个object类，假设定义如下：$scope.article = { name:"JAVA"}；则可以使用{{ article.name }}来获取。

若绑定的数据是一个字符串、数字。如：$scope.article = "消息1”；则可以使用 {{ article }}来获取。

上面只是一个简单的APP、下面还有更多的功能还待完善。如调用手机原生插件、跨域请求web接口等等。

欢迎大家踊跃拍砖...

我始终相信一句话就是：大家进步才是真的进步！若有对我的源码感兴趣的童鞋可以留言或者私信我。