AngularJS之学写partyBid第一张卡片

       在初步学习完angular js之后，开始尝试做party_bid的第一张卡片。这个项目用到了敏捷开发的故事卡，用到了angular js，用到了yeoman和rubymine，这些对我来讲是一个全新的领域，让我都很感兴趣。

        party_bid是一个移动应用， party_bid来源于百老汇，是一个竞价游戏。游戏分为四个部分，创建活动——活动报名——组织竞价——竞价分析，最终从竞价者中选出竞价最低且不重复作为获胜者。其中主持人手机安装有这个App，主持人通过该App创建一个可自定义名称的活动，活动创建完毕后，参与竞价者可通过自己的手机发送特定格式的短信来参与活动报名。报名结束后，主持人可以在该活动下，发起多个竞价。在每一个竞价中，活动报名者通过发送特定格式的短信，报出自己的竞价，竞价最低且不重复的报名者即可竞价成功！

     

1.首先建立一个新的文件夹。我的文件夹名为partyBid，进入文件夹。在终端输入下面的代码。

 

 

mkdir party_bid //创建文件夹party_bid
cd party_bid  //进入文件夹

 

2.用yeoman在party_bid文件夹下面生成一个新的工程。接着上面的代码，输入下面的代码。我的工程名字叫party_bid。建议在网速比较好的地方生成，生成速度会比较快，也不容易出现error。

 

yo Angular  //生成工程文件

提醒 Would you like to use Sass (with Compass)? (Y/n)   n

提醒 Would you like to include Bootstrap? (Y/n)   y

其余按Enter键。

 

3.工程文件生成后，在相应文件夹下用终端输入下面代码，启动服务器。至此，准备活动全部完成，可以正式开始编写程序。

 

grunt server

 

 4.首先先要把要引用的所有css文件引入index中。因为我们是使用了样式库，所以要引人如下样式：

 

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/android.css" rel="stylesheet" media="screen">

 href是指定的路径，是css文件的位置；rel是relation。

其次还要引入相对应使用的全部js文件。如下：

 

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/route.js"></script>
<script src="scripts/controllers/main.js"></script

 

 

5.接下来就是要配置路由器实现页面和控制器之间的联系。部分代码如下：

 

$routeProvider
     .when('/', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl'
      })
     .when('/create_activity', {
          templateUrl: 'views/create_activity.html',
          controller: 'CreateActivityCtrl'
      })

 我是通过在main.html页面判断是否活动列表中是否存在活动而进行页面的跳转是跳转到activity_list还是create_activity，但是main页面并没有展示内容。

 

6.需求要求点击按钮实现页面的跳转。我使用的方式的ng-click，在对应的控制器中实现方法。举个列子：从活动报名的页面点击返回按钮跳转到活动列表中。

 

<button class="btn btn-primary header-left" ng-click="go_list()">返回</button>

 

$scope.go_list = function () {
            $location.path('/activity_list')
        }

 

 

7. 在活动列表页面中要求活动排序按照活动创建的顺序输出。我在存储数据时存成数组的形式，这里只需要将数组reverse之后遍历输出就可以了。这里也使用了ng-repeat方法。在localStorage中的数据传到name中，list对name进行遍历后把结果输出。

 

<li ng-repeat='list in name'>
            {{list}}    //输出遍历结果

 下面是在控制器中的代码。首先判断localStorage中是否有活动，如果没有就将数据传到name，对name进行reverse。但是这部分代码感觉还不够好，还需要进一步的修改。

if(localStorage.length!=0)
        {
            console.log(localStorage.length);
            var name = JSON.parse(localStorage['activity_name']);
            $scope.name = name.reverse();
        }
        else{
        }

 

 

8.在create_activity页面中要实现存入活动名称，判断活动名称是否重复以及返回按钮在活动列表中没有活动是不显示的三个功能。在存入活动时使用的方法是JSON.stringify方法，因为这个方法可以直接解析对象。在判断活动名称是否重复时使用的循环，在按钮显示的功能使用的是ng-show的方法。这部分的代码感觉也是不够干净利落，还是需要继续修改完善的。

<h3>活动名称</h3>
            <p><input type="text" class="input" ng-model="activity_name"></p>
            <button class="btn btn-default btn-lg btn-block" ng-disabled='!activity_name' ng-click="go_sign_up(activity_name)">创建</button>
            <p>{{tips}}</p>

 

if (localStorage.length != 0) {
                var storedNames = [];
                storedNames = JSON.parse(localStorage['activity_name']);
                var i = 0;
                for (var n = 0; n<storedNames.length; n++) {
                    if (storedNames[n]==temp_act_name) {
                        $scope.tips = "活动名称重复";
                        i = 1;
                        break;
                    }
                    else {
                    }
                }
                if(i==0){
                    storedNames.push(temp_act_name);  //将活动名称存入数组name
                    localStorage['activity_name'] = JSON.stringify(storedNames);
                    //将name数组存入localStorage中，key是activity_name
                    $location.path('/activity_sign_up');
                }
                else{
                }
            } else {
                var name = [];
                name.push(temp_act_name);
                localStorage['activity_name'] = JSON.stringify(name);
                $location.path('/activity_sign_up');
            }
        }

 至此，partyBid的第一张卡片的功能已经大致实现。但是里面还是有很多内容值得我细细思考，认真记录的。其实还是有一个疑问可不可以使用setItem和getItem的方法实现数据的存储和读取的呢？感觉上还是可以的，但是这两种方法哪一种更好呢？希望在下一篇博客中我可以得到结论。