first card总结

第一张卡要点总结：

一、做卡之前的环境配置

1、安装yeoman

Yeoman主要有三部分组成：yo（脚手架工具，用于构建一个新的项目框架）、grunt（项目的构建工具）、bower（包管理器，不再需要手动去下载scripts了）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。

1)安装yo,前提是已经安装了npm和node.js

npm install -g yo

2)安装grunt-cli和bower

npm install -g grunt-cli bower

3)安装webapp

npm install -g generator-webapp

如果你以前安装了grunt，你需要首先卸载grunt

sudo npm uninstall -g grunt

然后安装grunt-cli 和bower

sudo npm install -g grunt-cli bower

3)基本脚手架

在创建一个脚手架的web应用程序时，你需要安装web应用的生成器

安装generator-webapp

sudo npm install -g generator-webapp

2、创建工程

1)创建自己的工程根目录：

mkdir my-yo-project
 cd my-yo-project

 （1）遇到了npm问题，

要清空一下npm缓存：

npm catch clear
npm install jitsu -g

npm重装一下npm install

当项目建好后，得使用命令

grunt --force
grunt serve

 

生成运行效果

第一张卡的页面：

1、创建活动页面：在该页面需要有标题“创建活动“、需要提示字符“活动名称“，在它下面需要文本文框，用来给用户输入活动名称，在输入框下面添加“创建”的点击按钮。

2、报名页面：在该页面需要有标题“报名”、在标题的左右分别添加“返回”和“开始”按钮“，在最下方需要添加”报名“和“竞价”按钮。

3、活动列表页面：在该页面需要有标题“活动列表“，在它的右边需要添加“创建活动“按钮，在它下方会通过存储和取存储器中的内容，从而输出活动的种类。

第一张卡页面代码和需要添加的控制：

1、第一个页面上需要添加“创建"按钮：创建。通过创建按钮可以看出跳转操作go register()，在创建中的ng-disabled="!activity"是对是否在文本框中输入活动进行判断，若没有输入活动，则创建按钮为灰色，反之则呈现出亮色。

2、在第一个页面还需要有隐藏的“返回”按钮，当活动列表没有活动时，返回按钮是不显现出来的，当活动列表有活动时，便在标题右端显现出“返回”的按钮：返回。其中ng-click="go_to()"是跳转设置，在main.js的控制器中对应为

 $scope.show=localStorage.getItem("messages")

 即当存储的信息中有信息，则能显示“返回”按钮。

3、在第一个页面main.html中需要对输入在文本框的信息进行判断，判断输入活动是否和存储在localStorage重复，当出现重复情况时，输入框下面会自动弹出提示“活动名重复”的信息：活动名重复

4、第二个页面是跳转页面，在此页面中第一张卡仅实现一个按钮的功能，即“返回”按钮的设置，在creat_active().html中为返回，仅通过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;
                }
            }
            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>
        function a() {
            $scope.list1 = JSON.parse(localStorage.getItem("messages"));
            console.log($scope.list1);
        }
        a();

通过以上代码可以将存储的信息显示在活动列表的页面上。

8、为了能够将html页面和js控制整合在一起，需要设置路由器，以便能够使得他们之间能够形成联系，通过js来控制在html页面上的布置，路由上的代码如下：

  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
        .when('/creat_active',{
            templateUrl:'views/creat_active.html',
            controller:'Creat_activeCtrl'
        }
      )
        .when('/active_listbox',{
            templateUrl:'views/active_listbox.html',
               controller:'Active_listboxCtrl'
        })
      .otherwise({
        redirectTo: '/'
      });
  });