前言:第一次接触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));