学习敏捷开发(trello)之party_bid卡片1总结

      party_bid是一个移动设备上的应用，实现了在移动设备上的竞价获得。其中任何一台安装有这个App的移动设备，我们暂且把它叫做主办方，主办方通过该App创建一个可自定义名称的活动，活动创建完毕后，参与者可通过自己的手机发送短信来参与该活动，活动报名结束后，主办方可以在该活动下，发起多个竞价，活动报名者通过发送特定格式的短信，报出自己的竞价，竞价最低且不重复的报名者即可竞价成功！
     本项目是基于Google的前端框架Angularjs来实现。html页面则使用twitter的样式库bootstrap来实现！
     卡片一需要实现的功能：
        1.完成相应页面的设计；
        2.页面之间的相互跳转；
        3.创建新的活动；
        4.有无活动情况下页面的显示情况。

一.index.html文件的说明

       index.html文件故名思议，还是和普通的web页面一样，叫主页，就是我们打开根目录下的默认页面。
在这个页面中，我们加载了工程需要的样式CSS和必要的javascript文件
例如该工程需要使用的CSS文件

<!-- build:css(.tmp) styles/main.css -->
      <link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap-responsive.css" />
      <link href="styles/font-awesome.min.css" rel="stylesheet" media="screen">
      <link href="styles/android.css" rel="stylesheet" media="screen">

      以及该工程所需要的js文件

<script src="scripts/controllers/ActivityCreateControler.js"></script>

     特别需要说明的是该页面中的页面标签ng-view

<div ng-view="">
</div>

    当浏览器发现需要打开其它页面时，浏览器就会将其它页面的内容显示到ng-view标签对应的div盒子中，就相当于我们始终打开的是index，只是ng-view这个标签中的内容却是相对变化的

二.app.js路由

	app.js即route.js路由脚本，通过该js文件，浏览器就会根据我们的地址栏打开相应的界面。

.when(url, {  
   templateUrl: '页面模板',  
   controller: '控制器'  
   })  
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Arial, Helvetica, sans-serif;">在本工程中的路由	</span>

angular
  .module('partyBidApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl: 'views/ActivityItem.html',
            controller: 'ItemControl'
        })

        .when('/create', {
            templateUrl: 'views/ActivityCreate.html',
            controller: 'CreateControl'
        })
        .when('/item', {
            templateUrl: 'views/ActivityItem.html',
            controller: 'ItemControl'
        })
         .otherwise({
            redirectTo: '/'
        });

	angularjs会读取到我们的地址栏内容，然后和每一个when后面第一个参数对比，相同的时候，就会跳转到templateUrl的键值页面。同时加载该页面的控制文件。理论上每一个html页面对应一个控制文件，当都不满足的时候，就执行otherwise。

3.数据的存储。

	在每一种编程语言中都需要存储数据，很多语言都会将数据存到数据库，或者是其他的文件中。在angular中，我们利用locastorage，将数据存入浏览器的Local Storage中

	常用的localstorage操作，如下：

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

	由于localstorage中存的数据都是以字符或字符串的方式存储的，所以在对数组，对象存储的过程中，我们还要用到JSON方法，如下：

JSON.stringify(), 将value(Object,Array,String,Number...)序列化为JSON字符串
JSON.parse(),　将JSON数据解析为js原生值

4.卡片一

4.1页面之间的相互跳转

location.path("url")#url为路由app.js中when后面的第一个参数，需要跳转到哪一个，就将该页面的url写入path中。

4.2活动的新增和存储

function Activity (activity_name,signup,bid){
    this.name = activity_name;
    this.signup= signup || "unstart";
    this.bid=bid || "unstart";
}

Activity.prototype.save =function(){
    var all_activity=Activity.get_all_activity();
    all_activity.push(this);
    this.add_activity(this);
    this.add_activity_total(all_activity);
};

创建一个活动model，该活动的属性有名字和竞价状态以及报名状态。使用实例方法将活动存储到localstorage中

4.3数据的绑定

angularjs的数据绑定由“{{}}”和“表达式”组成，这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中，DOM可以随着运算结果的改变而实时更新，这里经常用到的一个元素是$scope,scope是作用域，它限定了数据的访问范围只能在特定的html和controller中。

  <input type="text" ng-model="activity_name" placeholder="输入活动名称" class="input-full"/><br/><br/>
  <h3 style="color:red">{{new_activity_name}}</h3>

代码中的new_activity_name就是一个双向绑定的数据，在controller中我们可以在$scope.

var name = $scope.new_activity_name#将new_activity_name的值赋给name变量

<pre name="code" class="html">$scope.new_activity_name = name#将name的值赋给new_activity_name,并可在html页面中显示出来

4.4 ng-repeat

Angularjs自带一组内置的官方指令，其中ng-repeat就是实现遍历迭代的指令，其中ng代表在angularjs的作用域内，也即代表了angularjs。
在第一张卡中，我们需要使用AngularJS迭代器来实现活动列表。

    <li ng-repeat="activity in activity_names track by $index" ng-click="choose_activity(activity)" class="clearfix btn-default">
      <h3 class="{{activity.status}}">{{activity.name}}</h3><i class="icon-angle-right"></i>
    </li>

4.5 ng-disabled

<button ng-show="true" ng-disabled="create_button_enable" ng-click="back_to_create_activity()" class="btn btn-primary header-right">创建活动</button>

当create_button_enable的值为true时，该按钮就是不能够点击的！false时就是可以点击的