first card小结
first card总结
第一张卡要点总结：
第一张卡的大体制作过程：
1、在软件自带index.html页面中引入所需要的css样板格式，以便能够达到对页面格式化的功能。
2、首先是需要在html上进行页面规划，在此过程中需要调用css样式，使得页面能够达到用户想要的效果，用class的形式来调用css。在html页面上规划好布局后，就可以向其中添加方法和函数了。
3、第二点仅是对html页面进行规划，在规划完后，需要将.js调入index.html中以便对页面上的按钮等设计.js控制，以达到预定的页面跳转效果和用户想要的应用效果。
4、仅有html和js是不够能够解决第一张卡的内容的，需要设置路由，以便能够将页面和控制联系在一起（即将html和js联系在一起），我是直接使用app.js这个控制器，在其中添加路由路径。
（注：制作的过程中一定要把添加的css和js引入到index.html中）
第一张卡的页面：
1、创建活动页面：在该页面需要有标题“创建活动“、需要提示字符“活动名称“，在它下面需要文本文框，用来给用户输入活动名称，在输入框下面添加“创建”的点击按钮。
2、报名页面：在该页面需要有标题“报名”、在标题的左右分别添加“返回”和“开始”按钮“，在最下方需要添加”报名“和“竞价”按钮。
3、活动列表页面：在该页面需要有标题“活动列表“，在它的右边需要添加“创建活动“按钮，在它下方会通过存储和取存储器中的内容，从而输出活动的种类。
第一张卡页面代码和需要添加的控制：
1、第一个页面上需要添加“创建"按钮：<button ng-click="go_register()" ng-disabled="!activity" class="btn btn-primary btn-lg btn-block" >创建</button>。通过创建按钮可以看出跳转操作go register()，在创建中的ng-disabled="!activity"是对是否在文本框中输入活动进行判断，若没有输入活动，则创建按钮为灰色，反之则呈现出亮色。
2、在第一个页面还需要有隐藏的“返回”按钮，当活动列表没有活动时，返回按钮是不显现出来的，当活动列表有活动时，便在标题右端显现出“返回”的按钮：<a class="btn-style btn-4" ng-click="go_to()"><div ng-show='show'>返回</div></a>。其中ng-click="go_to()"是跳转设置，在main.js的控制器中对应为 $scope.show=localStorage.getItem("messages")即当存储的信息中有信息，则能显示“返回”按钮。
3、在第一个页面main.html中需要对输入在文本框的信息进行判断，判断输入活动是否和存储在localStorage重复，当出现重复情况时，输入框下面会自动弹出提示“活动名重复”的信息：<div style="color:#ff0000" ng-show="show1" class="logo-flat">活动名重复</div>
4、第二个页面是跳转页面，在此页面中第一张卡仅实现一个按钮的功能，即“返回”按钮的设置，在creat_active().html中为<a class="btn-style btn-4" ng-click="go_return()">返回</a>，仅通过ng-click="go_return()"实现界面跳转即可，在creat_active().js中跳转都是 $scope.return="返回";
$scope.go_return=function(){
$location.path('/active_listbox')
}这个形式
（通过第4点便实现了以creat_active()页面为例的页面的跳转和控制）
5、通过本地存储，实现在活动列表当中显示创建的活动：
var message = {'actname': $scope.activity, 'activity_status': 'false', 'apply_list': []};
var messages = JSON.parse(localStorage.getItem("messages")) || [];
该代码是对活动数组进行添加属性，并从中获取存储的信息。
localStorage.setItem("messages", JSON.stringify(messages))
var messages = JSON.parse(localStorage.getItem('messages'))
该代码是实现对活动信息的存储和获取。
6、在控制器中判断输入文本框的信息是否和本地存储的信息是否相同的代码如下：
for (file in messages) {
if ($scope.activity == messages[file].actname) {
$scope.show1 = true
if_same = true
break;
}
}
console.log(if_same)
if (!if_same) {
messages.unshift(message);
localStorage.setItem("messages", JSON.stringify(messages))
var messages = JSON.parse(localStorage.getItem('messages'))
7、在活动列表中输出活动的迭代器和功能代码如下：
在active_listbox.html中， <li ng-click="bm(phone.actname)" ng-repeat="phone in list1">
<h1>{{phone.actname}}</h1>
在ctive_listbox_controll.js中
function a() {
$scope.list1 = JSON.parse(localStorage.getItem("messages"));
console.log($scope.list1);
}
a();通过以上代码可以将存储的信息显示在活动列表的页面上。
第一张卡要点总结：
第一张卡的大体制作过程：
1、在软件自带index.html页面中引入所需要的css样板格式，以便能够达到对页面格式化的功能。
2、首先是需要在html上进行页面规划，在此过程中需要调用css样式，使得页面能够达到用户想要的效果，用class的形式来调用css。在html页面上规划好布局后，就可以向其中添加方法和函数了。
3、第二点仅是对html页面进行规划，在规划完后，需要将.js调入index.html中以便对页面上的按钮等设计.js控制，以达到预定的页面跳转效果和用户想要的应用效果。
4、仅有html和js是不够能够解决第一张卡的内容的，需要设置路由，以便能够将页面和控制联系在一起（即将html和js联系在一起），我是直接使用app.js这个控制器，在其中添加路由路径。
（注：制作的过程中一定要把添加的css和js引入到index.html中）
第一张卡的页面：
1、创建活动页面：在该页面需要有标题“创建活动“、需要提示字符“活动名称“，在它下面需要文本文框，用来给用户输入活动名称，在输入框下面添加“创建”的点击按钮。
2、报名页面：在该页面需要有标题“报名”、在标题的左右分别添加“返回”和“开始”按钮“，在最下方需要添加”报名“和“竞价”按钮。
3、活动列表页面：在该页面需要有标题“活动列表“，在它的右边需要添加“创建活动“按钮，在它下方会通过存储和取存储器中的内容，从而输出活动的种类。
第一张卡页面代码和需要添加的控制：
1、第一个页面上需要添加“创建"按钮：<button ng-click="go_register()" ng-disabled="!activity" class="btn btn-primary btn-lg btn-block" >创建</button>。通过创建按钮可以看出跳转操作go register()，在创建中的ng-disabled="!activity"是对是否在文本框中输入活动进行判断，若没有输入活动，则创建按钮为灰色，反之则呈现出亮色。
2、在第一个页面还需要有隐藏的“返回”按钮，当活动列表没有活动时，返回按钮是不显现出来的，当活动列表有活动时，便在标题右端显现出“返回”的按钮：<a class="btn-style btn-4" ng-click="go_to()"><div ng-show='show'>返回</div></a>。其中ng-click="go_to()"是跳转设置，在main.js的控制器中对应为 $scope.show=localStorage.getItem("messages")即当存储的信息中有信息，则能显示“返回”按钮。
3、在第一个页面main.html中需要对输入在文本框的信息进行判断，判断输入活动是否和存储在localStorage重复，当出现重复情况时，输入框下面会自动弹出提示“活动名重复”的信息：<div style="color:#ff0000" ng-show="show1" class="logo-flat">活动名重复</div>
4、第二个页面是跳转页面，在此页面中第一张卡仅实现一个按钮的功能，即“返回”按钮的设置，在creat_active().html中为<a class="btn-style btn-4" ng-click="go_return()">返回</a>，仅通过ng-click="go_return()"实现界面跳转即可，在creat_active().js中跳转都是 $scope.return="返回";
$scope.go_return=function(){
$location.path('/active_listbox')
}这个形式
（通过第4点便实现了以creat_active()页面为例的页面的跳转和控制）
5、通过本地存储，实现在活动列表当中显示创建的活动：
var message = {'actname': $scope.activity, 'activity_status': 'false', 'apply_list': []};
var messages = JSON.parse(localStorage.getItem("messages")) || [];
该代码是对活动数组进行添加属性，并从中获取存储的信息。
localStorage.setItem("messages", JSON.stringify(messages))
var messages = JSON.parse(localStorage.getItem('messages'))
该代码是实现对活动信息的存储和获取。
6、在控制器中判断输入文本框的信息是否和本地存储的信息是否相同的代码如下：
for (file in messages) {
if ($scope.activity == messages[file].actname) {
$scope.show1 = true
if_same = true
break;
}
}
console.log(if_same)
if (!if_same) {
messages.unshift(message);
localStorage.setItem("messages", JSON.stringify(messages))
var messages = JSON.parse(localStorage.getItem('messages'))
7、在活动列表中输出活动的迭代器和功能代码如下：
在active_listbox.html中， <li ng-click="bm(phone.actname)" ng-repeat="phone in list1">
<h1>{{phone.actname}}</h1>
在ctive_listbox_controll.js中
function a() {
$scope.list1 = JSON.parse(localStorage.getItem("messages"));
console.log($scope.list1);
}
a();通过以上代码可以将存储的信息显示在活动列表的页面上。