1、首先了解了子路由ui-router
NBA这个项目用都了ui-router,使单页应用更加的方便,子路由即嵌套路由,通过“ . ”来实现,以后需要再添加什么页面,直接添加就可以了,上代码:
这个是主:
在reword里如果需要再添加新的页面,就应该这样做,ui-router发挥了很好的作用。
此时,在aword里,就有打开一个叫做 turnplate.html 的页面(在这里说明一下,进入turnplate.html的入口 ,要在 aword 的 index.html 里添加入口,例如:
只是添加了一个入口,给绑定了一个事件 ng-click
2、用构建工厂的方法来创建服务
在这里介绍一下,使用服务的方法,我们定义一个服务,然后分配方法,还注入已经可用的服务。
上代码:
这里有需要注意的点:
1、 GET 和 POST 的方法,如果是 get 话,参数就是params,如果是 post 的话,参数是 data
2、服务的名字遵循驼峰式规则,起名字的时候,用英文,这样不会显得自己很 low
要获取大转盘的数据信息:(这个根据后端给你的接口来写,看需要什么)
在这里注意:
那个id,后台给的什么就是什么,这里是id啦
还有因为请求方式不同,写法不一样,要特别注意。
3、接下来最重要的就是写JS
在头部要定义模块:
例如这里:var app = angular.module('ttnba.award',['ionic']);
开始写controller: (这里注意的一点就是controller的名字,这个名字要和router里的一致)
上代码:
app.controller('TurnplateController'['$scope','$state','WheelService'.......,function($scope','$state','WheelService'.......){
在这里边写js代码
}
]);
4、遇到的问题一:
看了他之前写的代码,返回上一页,他写了一个goback()函数,然后就很简单的实现了返回上一页,用的时候直接拿来就可以。看一下他写的goback()函数吧。
问题二:
获得数据的时候要写一行很恶心的代码,特别的恶心,很恶心。请看:
WheelService.getWheelInfo(wheel_id).then(function(data){
})
另外要注意,数据的获取,争取写一遍,别重复,这样提高代码的复用性。例如:
一个接口里有三个对象,就可以写三个,至于那三个里边是什么就再写什么了,上代码:
问题三:
旋转问题(赵翔说这里是具有编程思维)
需要先初始化,另外注意,angular里边写函数的话,就用#scope.函数名 = function(){}
问题四:
防止连续点击事件
我是这样想的,就是判断转盘是否在旋转,如果已经在旋转了就给他添加不可点击的事件,就是禁止点击,结果证明,赵翔说我的想法是正确的,但是实现代码的时候有点困难,他就教我了。
这里边在最外边用 if 判断,如果可以点击,就执行下边代码
同时给一个延迟
问题五:
点击物品有弹框,之前他做过好多的弹框,一个叫做popup的函数,直接添加页面就可以了。
这个问题很简单,但是我为什么要拿出来记一下呢,原因是:商品详情只有有阴影的可以点击,所以根据那个type值,做判断,就在最外层写个if判断就可以。
问题六:
获奖名单的滚动效果,用的是<ion-scroll></ion-scrolol>,这是ionic里的东西,写的时候,无论是纵向滚动或者横向滚动,都要控制好宽度和高度,这点很重要,在这里跌倒了一次,以后就要记住!
最后的收获:
angular有自己的特性,一般的样式都写在了行内,好多都是用指令来完成的。以后的图片要专门建一个文件夹。