搭建好了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接口等等。
欢迎大家踊跃拍砖...
我始终相信一句话就是:大家进步才是真的进步!若有对我的源码感兴趣的童鞋可以留言或者私信我。