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：
然后引用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这个文件被浏览器渲染后的页面，当然，一般情况下，我们要操作一个动作之后，才去实现页面的跳转，例如点击“返回”按钮，当我们建立一个
在控制器中添加代码：
$scope.GotoCreateActivity = function () {
$location.path('/create_activity');
}
这样，我们点击这个
其实页面与页面都有联系，而这些联系主要依赖于对数据的操作。所以就不得不说到url传参和localStorage数据存储。url传参用$routeParams实现。例如：要在price_result.html页面将"show"传到price_statistics.html页面。在控制器price_result.js实现跳转时，这样写：
$location.path('/price_statistics/'+show);
.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.tip="活动名称重复！" //用于创建活动，名称重复警告
在create_activity.html页面写入：
{{tip}} //页面在浏览器中就会显示出 活动名称重复！
