学习敏捷开发，party_bid故事卡1---创建活动

         party_bid是一个android手机端的应用，它的应用场景是活动主办方新建并开启活动，参与者报名活动，然后在一个活动中报名了活动的参与者可以参与活动后续的竞价。系统会对竞价结果进行分析，给出竞价成功者。竞价采用荷兰竞价算法，出价最低且不重复的竞价成功。

        这个项目主要的开发技术是Angular.js，使用到了localStorage来存储数据，样式库主要基于bootstrap。

        第一张卡的主要内容实现创建活动页面，活动列表页面，活动报名页面之间的跳转，还有能够成功的创建新的活动，并存储在localStorage中。localStorage对每一个网站提供5MB的空间作为本地存储。

1.localStorage的用法
在localStorage中数据是以键值对的形式存储的
一种是：
 

localStorage.setItem('key',value); //存入键值对 key，value
localStorage.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找到点击函数并实现它，这样在页面点按钮，就会执行这个点击函数里的逻辑，做出相应的动作。