学习敏捷开发(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>[/code]

<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: '/'
});

[/code]

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时就是可以点击的