party_bid第一张卡片要点总结

  近期做了基于angularJS的web应用，也更深入的了解了angularJS的MVC结构和面向对象的思想。学习到了不少知识，下面来总结一下party_bid第一张卡片。
1.yeoman的安装
Yeoman是一个工作流，是让web开发和谐甚至变得更好的工具和最佳实践的集合，由三种核心工具构成：yo（脚手架工具），bower（包管理工具），grunt（构建工具）。
Yo是搭建新应用的脚手架，编写你的Grunt配置并且安装你有可能在构建中需要的相关的Grunt任务。
Grunt是被用来构建，预览以及测试你的项目。
Bower 被用来进行依赖管理，所以你不再需要手动的下载和管理你的脚本了。
所有这说那样工具都是独立开发和维护的，但是很好的工作在一起作为我们指定的工作流的一份子来保持你的效率。在配置完环境并且安装好RubyMine以后，首先要建一个文件夹安装，这个文件夹将作为你的初始工程文件夹。
（1） 安装yo

npm install –g yo

它将自动安装Grunt和Bower。
如果之前安装了grunt需要卸载之后才能安装：

 npm uninstall -g grunt  

（2） 安装angularJS生成器

 

 npm install -g generator-angular

（3） 在安装完成之后可以在终端使用如下命令：

grunt server

浏览器就好自动加载你的工程项目，测试程序是否可用。

2．第一张卡片功能实现总结
     1  活动创建页面：
        页面内有一个创建按钮和需要输入活动名的文本框以及页面右上方的返回按钮。

        （1）：当活动列表为空时，“返回”按钮不显示，不为空显示，而且能跳转到活动列表页面。
        （2）:一开始，对“创建”按钮设置为不可点，当文本框为空时不可点（ng-model,ng-disabled结合使用即可）当输入活动名重复时（通过name判断即可），按钮也不可点且有提示框显示（ng-hide）.否则，可点击无提示框。
        （3）：在创建按钮时，在本地分别利用loclastorage以数组对象结构存储了活动列表，当前活动，点击活动，特别是对当前活动，，在这里，我通过给正在进行的活动赋予一个状态属性来判断是否是当前活动。

     2 活动列表页面：
       在本页面有两个可操作对象，分别是“创建活动”按钮和活动列表项。
       （1）:只要有活动在进行，有竞价在进行，“创建活动”按钮就不可用。

       （2）:在活动列表项中，关键是能够通过点击每一个活动都能查看它的报名情况。所以，点击活动时，要在存储的活动数组对象里面查找到点击的活动名，跳转时，才会转到相应活动的情况。

     3 活动报名页面：
        在报名页面有“开始”和“结束”按钮以及“返回”按钮，统计报名人数nums，报名人信息列表项。
         （1）存储活动的状态以及当前活动的状态，读取活动的status

         （2）更新总的活动列表，使用定义refresh函数来实现更新

         （3）报名的时候要读取对应的活动将对应的活动名称中的数据从数组对象里面查找并显示出来，所以，在报名页面显示每个活动的信息时，要根据在活动列表点击的活动来找到对应的信息。

 

3.第一张卡片涉及的知识总结。
  party_bid是一个简单的web应用，所以主要需要了解的知识有angularJS(一款优秀的前端JS框架)，html(编写网页view的标记语言)，css（调节网页中文件样式的语言）以及一定的javascript的知识。
（1） MVC结构（截图controller-model-view）
最开始了解一个web的构成，有view（视图），controller（控制器），model（模板）
Model（模型）表示应用程序核心（比如数据库记录列表，内部写有实现各种功能的函数）。
View（视图）显示数据（把需要的数据通过controller绑定来显示到网页上）。
Controller（控制器）处理输入（通过调用Model里面的各种函数和读取数据来调节程序的逻辑性，不能在controller里面进行数据的存取，controller只负责调用和逻辑管理）。
（2） Js和css的引入
每一个view对应一个controller，并且要在index.html里面引入进去，css也是一样需要引入。

    <script src="scripts/model/Bidding_list.js"></script>
    <script src="scripts/controllers/bidding_List.js"></script>
    <link rel="stylesheet" href="styles/android.css">

（3） 配置路由
       angularjs路由是实现将不同的URL与响应该URL的Handler相匹配的功能模块，我们需要使用.when函数把该URL与Handler相匹配。

.when('/Create_action',{
            templateUrl: 'views/create_Action.html',
            controller: 'Create_actionController'
      })

（4） url传参数

     $location.path('/Bidding_list/'+activity);//在控制器写入需要传递的参数activity
       .when('/Bidding_list/:activity',{       //在rount.js里的url处添加activity
            templateUrl: 'views/bidding_List.html',
            controller: 'Bidding_listController'
      })
    $routeParams.activity//在要跳转到的view对应的控制器上通过$routeParams读取

（5） $scope绑定
$scope是angularJS里面实现controller和view绑定信息的关键，当控制器冲model里面读取出数据并且需要显示到view上面让浏览网页的人看见的时候，就需要使用$scope.

$scope.buttons=true;  //在控制器里绑定需要的参数
 <div class="header-right" ng-switch="buttons">//vview上即可获取buttons

（6） localstorage存储
localstorage是html本地存储web storage特征的API之一，主要用于将数据保存在客户端，而且localstorage存储数据一般是永久保存的，这意味着关闭浏览器，这个数据是依然存在的，除非你主动或者程序明确删除，它才会消失。

Bidding_list.set_bidding_information=function(){ //通过localstroage.setItem来存储数据
    localStorage.setItem('bidding_name',first_bidding);
}
Bidding_list.get_bidding_information=function(){//通过localstroage.getItem来读取数据
    return localStorage.getItem('bidding_name');
}

（7） ng-model、ng-disabled和ng-repeat以及ng-hide
angularJS的动态绑定是它的核心功能之一，而ng-model正是实现动态绑定的重要标识，通过ng-model在view上绑定一个数据，在model里面如果这个数据在存取过程中发生了变化，view上第一时间就能显示出来，不需要手动刷新。
ng-disabled是控制按钮button的，ng-disabled="一种状态"，如果该状态为true，则按钮为灰色不可用，如果该状态为false，则按钮可以使用，状态的判断可以是一个具体的数据，也可以是一个能返回true或false的函数。
ng-repeat是实现遍历数组的，ng-repeat＝＂元素　in 数组＂，ng-repeat对于数组中的每一项都创建一次一组元素的一份副本。
ng-hide是判断view上面的按钮显示可不不见的，ng-hide＝＂一个判断条件：当其值为true时，按钮隐藏＂，当其值为false时，按钮可见。判断条件可以为一个数据，也可以是一个函数。ng-show与ng-hide正好相反。