学习敏捷开发,party_bid故事卡1---创建活动
来源:互联网 发布:淘宝卖京东e卡 骗局 编辑:程序博客网 时间:2024/05/21 10:01
party_bid是一个android手机端的应用,它的应用场景是活动主办方新建并开启活动,参与者报名活动,然后在一个活动中报名了活动的参与者可以参与活动后续的竞价。系统会对竞价结果进行分析,给出竞价成功者。竞价采用荷兰竞价算法,出价最低且不重复的竞价成功。
这个项目主要的开发技术是Angular.js,使用到了localStorage来存储数据,样式库主要基于bootstrap。
第一张卡的主要内容实现创建活动页面,活动列表页面,活动报名页面之间的跳转,还有能够成功的创建新的活动,并存储在localStorage中。localStorage对每一个网站提供5MB的空间作为本地存储。
1.localStorage的用法
在localStorage中数据是以键值对的形式存储的
一种是:
localStorage.setItem('key',value); //存入键值对 key,valuelocalStorage.getItem('key'); //取出键为key的值
另一种是:
localStorage['key'] = JSON.stringify(value); //这里value可以是一个数组,或者对象或者就是一个值或者为空,将其转为JSON的string格式存储var get_value = JSON.parse(localStorage['key']); //这里先从localStorage中读出key的值,然后将其数据类型还原为存入之前的类型
2.index.html
在本项目中虽然设计到很多个页面的跳转,但是并不是很多个完整的html页面之间的跳转,而是一个页面index通过更换其中的内容来达到一个切换页面的效果,这样的好处就是不用让浏览器重新加载一个新的页面,提高了效率。在index.html中用这么一段
<div class="container"> <div ng-view=""></div></div>
这里的ng-view标签确定了在页面切换时,页面内容置换的位置就是这里ng-view标签所在的div内。在index.html中应用需要的javascript文件和css文件,从而每一个页面都能使用对应的引用而不需每个页面都重复的去引用。
3.ng-repeat
这个标签用于在页面中循环显示信息,代码如下:
<ul class="list-style-6"> <li class = "clearfix btn-default" ng-repeat="activity in activities " ng-click="click_event(activity)"> <h3 > {{activity.name}} <i class="icon-angle-right"></i> </h3> </li></ul>
如上所示,activities必然是一个数组,而activity是activities中的元素个体,所以我们并不需要关心个体的值,只需要确定是哪一个数组,因此在controller里面要使用$scope.activities来给页面中要显示的活动信息赋值。如下所示:
$scope.activities = Activity.activity_list_for_show();
这样页面就得到了用于显示的活动列表的数据,然后数据绑定显示到对应的位置,使用 {{activity.name}}。
4.$location
我们在controller函数传入参数$location,然后在controller中就可以使用它来完成响应事件之后的页面跳转。代码如下:
$location.path('/activity_sign_up/' + p_temp.name); //通过这句话就可以将页面跳转至活动报名页面
5.ng-disabled
用于控制按钮可不可用,如果值为false则可用,为true则不可用,代码如下:
<button class="btn btn-2" ng-click="add_new_activity()" ng-disabled="!activity_name">创建</button>
这里我们让ng-disabled=“!activity_name”,即是没有活动名称输入的时候,创建按钮是不可用的,有输入的时候按钮就是可以按的。
6.ng-click
从字面上就很容易的看出来这个标签的功能是用来处理点击事件的,
页面上的代码如下
<button class="btn btn-2" ng-click="add_new_activity()" ng-disabled="!activity_name">创建</button>
在controller里的代码如下
$scope.add_new_activity = function(){ var activity_created = new Activity($scope.activity_name,0,0); if (Activity.is_activity_repeated(activity_created)){ $scope.alert_message = '活动名称重复,请重新输入。。。'; $scope.activity_name = null; } else { activity_created.save_new_activity(); Activity.set_current_activity(activity_created); init.initial_rely_activity_name_key($scope.activity_name); $location.path('/activity_sign_up/'+activity_created.name); }};
通过$scope找到点击函数并实现它,这样在页面点按钮,就会执行这个点击函数里的逻辑,做出相应的动作。
0 0
- 学习敏捷开发,party_bid故事卡1---创建活动
- 学习敏捷开发,party_bid故事卡2---活动报名
- 学习敏捷开发,party_bid故事卡3---组织竞价
- 学习敏捷开发,party_bid故事卡4---竞价分析
- 学习敏捷开发(trello)之party_bid卡片1总结
- 学习敏捷开发(trello)之party_bid卡片2总结
- 学习敏捷开发(trello)之party_bid卡片3,4总结
- 敏捷开发 故事墙
- 敏捷开发中用户故事地图(User Story Mapping)学习
- Android开发学习中的问题2016-5-03手动创建活动
- 敏捷开发- 怎么验收敏捷故事
- 敏捷开发之用户故事
- 敏捷开发—用户故事
- 敏捷开发之故事墙
- 敏捷开发-故事与估算
- 敏捷开发实践(1)-故事工作量估算导致的问题
- 敏捷开发实践(1)-故事工作量估算导致的问题 .
- 手动创建活动(activity)--1
- 2014中国跨境电商暨互联网金融高峰论坛
- JavaScript学习 jquery15 自定义动画
- Form1.Command1.Visible=True
- Android OpenGL ES 开发教程(3):OpenGL ES管道(Pipeline)
- inux僵尸进程产生及如何避免
- 学习敏捷开发,party_bid故事卡1---创建活动
- 【设计模式】命令模式
- Public Class Form1
- 单词数 (STL set集合)
- Intent调用系统拍照程序,返回图片太小的问题
- Android OpenGL ES 开发教程(4):OpenGL ES API 命名习惯
- popupWindow简单用法实例
- 写给新入职的毕业生们
- DSP芯片的定点运算