part-bid第一张卡《创建活动》学习记录

 

part-bid竞价活动是我们学习开始阶段的一个练习，我们从练习的过程中，理解web开发的精髓，巩固基础知识。

part-bid分为四个部分，即四张卡片，本文将记述第一张卡片的学习过程。

第一张卡片要创建三个页面：创建活动页面，活动列表页面，活动报名页面。

 

 

要求：

一.不存在已创建活动情况下:

1.在打开程序后判断一下，是否已经存在已创建的活动，如果没有，就要显示“创建活动”页面，引导用户去创建一个活动.

2.无已创建活动情况下，进入”创建活动“页面，”返回“按钮不显示
 二.存在已创建活动情况下

1.打开程序后直接进入"活动列表"页面，列表显示为已创建活动

2.“活动列表”页面按照时间顺序由新到旧排列活动，最后创建的活动显示在列表的最前

3.点击”活动列表”页面的“创建活动”按钮，进入”创建活动”页面，页面内输入框内容为空 

4.在”创建活动“页面，显示”返回“按钮

5.在“创建活动”页面，点击“返回”按钮，返回到“活动列表”页面

三.创建活动

1.在“创建活动”页面，当输入框内信息为空时，“创建”按钮为灰色的不可点击状态

2.在“创建活动”页面，点击“活动名称”下的输入框，弹出文字输入工具

3.创建的活动名称不能重复，如果名称重复，点击【创建】按钮，文本框下红字提示：“*活动名称重复”。页面不跳转

4.在“创建活动”页面，正确输入活动名称后，点击“创建”按钮活动创建成功，页面跳转到“活动报名”页面

5.在”活动报名“页面，点击“返回“按钮，跳转到”活动列表“页面，列表中显示已创建的活动

 

          首先，我们用yeoman创建工程，建一个专门保存自己工程的文件夹，然后在终端中输入：

mkdir my-project        
cd my-project    
yo webapp   
npm install -g generator-angular      
yo angular  

这样，该有的配置就搭建好了，打开RubyMine，就可以编写我们的程序了。

       首先，我们要理解什么是MVC框架，M：model，后台方法的集合，负责后台数据的处理，表示应用中的整个数据模型。V：views，前端，为用户提供可视化的界面，在浏览器中加载和渲染，并且可以在AngularJS中根据模板、控制器、模型信息修改。C ：controllers，控制器是一个Javascript函数（类型/类），用来增强除了根作用域以外的作用域实例，负责后台与前端的交互，为前端提供后台接口，当用户操作前端时，controller负责处理用户的操作，通过Model下的方法实现相应功能。

       在HTML中，常常引用到CSS，CSS是一种增强渲染，美化界面的模版。我们可以直接引用网上下载下来的CSS库，也可以自己编写。在index.html中链接CSS：

 <script src="../bootstrap.js"></script>

       然后引用CSS：

 <link rel="stylesheet" href="../bootstrap.css" />

      第一张页面做好之后，可以查看一下效果，在项目文件夹中，用终端输入：

grunt serve  

这时候，浏览器会打开我们的项目，我们可以看到我们做的界面样式，以后加入功能也可以用这个方法调试。按照项目的要求做完HTML页面后，就可以添加相应的功能了，想要在页面中实现我们要的功能，我们还要了解什么是路由：AngularJS路由将不同的URL和与之相匹配的模块联系起来，比如，当我有一个URL是"localhost:9000/create_activity"，配置完成之后，当我们访问/activity_list的时候，路由就帮我导向到/create_activity匹配的页面。在配置路由时我们不用考虑"localhost:9000"域名和端口部分，只需要将/create_activity和要与之匹配的模块建立联系。在route.js文件中写入：

 

.when('/create_activity',
{
   templateUrl:"./view/create_activity.html"；  //将/create_activity与view文件夹下的create_activity.html页面关联起来
   controller:'CreateActivityCtrl';            //定义控制器
})

 接着我们在任意控制器里面写入：

$location.path('/create_activity');

 都可以跳转到create_activity.html这个文件被浏览器渲染后的页面，当然，一般情况下，我们要操作一个动作之后，才去实现页面的跳转，例如点击“返回”按钮，当我们建立一个<button>标签后，给<button>添加一个ng-click=""属性，在“”内写一个函数，用来实现跳转，例如<button ng-click="GotoCreateActivity">，

在控制器中添加代码：

$scope.GotoCreateActivity = function () {
    $location.path('/create_activity');
}

这样，我们点击这个<button>后，就能跳转到create_activity页面了。顺便写两个其他的属性：<button ng-show="true"  ng-disabled="false">，ng-show="true"就是显示这个按钮，如果是""内是false，则隐藏；ng-disabled=“true”的意思是此按钮不可点击，false就是可点击。

         其实页面与页面都有联系，而这些联系主要依赖于对数据的操作。所以就不得不说到url传参和localStorage数据存储。url传参用$routeParams实现。例如：要在price_result.html页面将"show"传到price_statistics.html页面。在控制器price_result.js实现跳转时，这样写：

 

$location.path('/price_statistics/'+show);

接收参数,在price_statistics.js加上$routeParams：

.controller('PriceStatisticsCtrl', function ($scope, $location,$routeParams
        $scope.show_hide=$routeParams.show_hide; 
)

而对数据的存储需要用到localStorage，主要是对localSrorage的增删查改，其中：

 

var getKey = localStorage.getItem(key) //表示得到localStorage中的数据

var parseKey = JSON.parse(localStorage.getItem(key))  //将localStorage中的数据转化成数组或字符串

localStorage[key] = JSON.stringify(name); //将name转化成localStorage的形式

name.unshift(value); //将value的值放在name数组的最开头;

name.push(value);  //将value的值放在name数组的末尾

    

有了数据之后，有时候需要把数据显示出来， 在这里要用到双向绑定 和$scope。

$scope是一个把view（一个DOM元素）连结到controller上的对象。

{{}}表达式：是类似Javascript的代码片段，通常在绑定中用到，写在双大括号中如{{表达式}}。

比如：在控制器create_activity.js中写入：

$scope.tip="活动名称重复！"  //用于创建活动，名称重复警告

在create_activity.html页面写入：  

 

{{tip}}  //页面在浏览器中就会显示出  活动名称重复！ 

但有时候我们想显示一个数组，页面中就需要加点东西了，例如：

<li  ng-repeat="list in lists">
    {{list}}
</li>