party_bid项目第一张卡总结

前言：第一次接触ruby软件和学习javascrip脚本语句来实现web开发，学习了不少知识。party_bid第一张做完了，做一个总结。

 

1. 在做party_bid之前要新建party_bid空的工程。

创建空工程方法

输入命令：jt project-name

 在哪个目录下做party_bid工程，就在相应的目录下创建工程。

 

2.在做第一张卡之前需要引入样式，引入样式方法：

在index.haml中添加代码

%link(rel="stylesheet" type="text/css" href="css/android.css")
%link(rel="stylesheet" type="text/css" href="css/bootstrap.css")
%link(rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css")
%link(rel="stylesheet" type="text/css" href="css/bootstrapswitch.css")
%link(rel="stylesheet" type="text/css" href="css/bootstrapswitch-custom.css")
%link(rel="stylesheet" type="text/css" href="css/font-awesome.css")

 

3.搭建页面和创建相应页面的Controller

       每一个haml页面的名字都要和相应的Controller名字对应，在每一个Controller里定义这个页面的方法，然后就可以在这个页面对应的Controller里写方法

例如：activity_page.haml 对应的Controller为ActivityController.js

          在这个js里面定义一个function ActivityController($scope,$navigate){.........}

 

4.对于各个页面之间的跳转，首先就要给各个页面配好相应的路由，在routes.js里面有实例，这里不做过多介绍。

 

5.在设置按钮的跳转和状态时，使用ng可以实现相应的功能。

ng-model可以实现数据绑定    

实例：

ng-model='input_name'

ng-tap 可以实现在点击按钮时跳转到另外一个页面

实例：

%button.btn-4(ng-tap='go_create_activity()')

     $scope.go_create_activity = function () {
         $navigate.go('/')
     }

ng-disabled 可以实现按钮的可点和不可点击状态，当ng-disabled=true时，按钮为灰色不可点击的状态

ng-repeat 遍历一个数组中的所有元素 

实例：

%li( ng-repeat="activity in activities")

ng-switch-when 可以实现一个按钮的多种状态

实例：

.header-right(ng-switch="start_button")
  %button.btn-4(ng-tap='switch_end_button()' ng-switch-when='start')开始
  %button.btn.btn-4(ng-switch-when='un_button' ng-disabled='disabled')开始
  %button.btn-4(ng-tap='switch_start_button()' ng-switch-when='end' ng-disabled='disabled')结束

 

6.点击结束按钮弹出确认框的方法

   confirm('确认框里的要显示的内容')

 

7.关于数据的存储

localStorage.setItem('activities',JSON.stringify(activities));

 但是在存储之前需要先定义数组

 实例：

var activities=JSON.parse(localStorage.getItem('activities'))||[];
var activity = {};
activity.activity = $scope.input_name;
activity.status='un_start';
activities.unshift(activity);
localStorage.setItem('activities',JSON.stringify(activities));