AngularJS之学写partyBid第二张卡片

楼主终于把party_bid的第二张卡片做完了，也学到了不少java script的知识，也对对象有了一点点了解。这做第二张卡片的时候发现数据存储的结构很重要，由于做第一张卡片的时候数据存的结构不够好，没有理解MVC模式，在做第二张卡片的时候就感觉很难做下去，后来在仝老师的指点下，对代码进行了一次重构，使用了MVC结构，也认真的学习了一下JSON。下面讲一下关于第二张卡片的程序。

1.数据结构

我使用的结构比较直接，我将活动名称、报名者的名字以及手机都存成了数组，将活动的状态分成了尚未开始，开始以及结束三种。首先对短信内容进行判断时候格式正确，如果正确则继续判断手机号码是否重复，如果没有就将姓名和手机号码存在各自的数组里。但是后来学习到对象这个概念的时候，就突然发现这种数据结构不够好，可以存成对象，直接调用对象里面的属性，这里可以再继续改动一下。

2.正在进行的活动背景色是黄色

在这里要自己也一个CSS出来。注意这里要使用！important，强调优先级，避免被其他颜色盖住。同时我在这里写了个函数，调出每个活动当前的状态，通过函数的返回值判断是否使用CSS中的状态。

Css代码  

1. .start{  
2.     background: #ffff00 !important;  
3. }  

3.传参数

这个是WEB开发中重要的部分，因为之前不会传，就只能将提取的数据存到localStorage中，然后在其他页面读取后立即删除，，还好后来学会了传参数的方法，解决了很多问题。可以讲活动的名称作为参数传到另一个页面中，以备其他操作。在一个URL中可以跟多个参数，每个参数之间用“/"隔开。要在路由中首先配置要跳转页面的参数，接着在locationPath中加上参数，在想要提取的页面中使用$routeParams调用，详细内容见下面代码。这里要注意的是，如果决定某个页面要跟参数，那就要保证只要跳转到该页面就要有参数传过来，不然是没有办法跳转到这个页面的。

route中：

Js代码  

1. .when('/activity_sign_up/:activity_name/:status', {  
2.                 templateUrl: 'views/activity_sign_up.html',  
3.                 controller: 'ActivitySignUpController'  
4.             })  

 对应的controller中，注意要引用$routeParams

Js代码  

1. var activity_name = $routeParams.activity_name;  
2. var status = $routeParams.status;   

4.收到短信后自动刷新

这个我觉得还是很难的。用到了回调函数还有$apply。

Js代码  

1. sign_up_scope.$apply(function () {  
2.                         sign_up_scope.initiate();  
3.                     })  

 initiate()函数是在controller中写的，主要是实现读取相应的姓名和电话号码。

5.接受短信并且自动回复

这个是使用了一个sms.js文件。在电脑上利用console模拟收发短信，后来利用cordova打包的时候要做一些配置之后就可以在手机上实现自动回复短信的功能。

Java代码  

1. //notify_message_received({"messages":[{"create_date":"Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013","message":"bm仝键","phone":"18733171780"}]})  
2. //notify_message_received({"messages":[{"create_date":"Tue Jan 15 15:28:44 格林尼治标准时间+0800 2013","message":"jj308","phone":"18733171780"}]})  
3. var native_accessor = {  
4.     send_sms: function (phone, message) {  
5. //        native_access.send_sms({"receivers":[{"name":'name', "phone":phone}]}, {"message_content":message});  
6.         console.log(phone, message);  
7.     },  
8.   
9.     receive_message: function (json_message) {  
10.         if (typeof this.process_received_message === 'function') {  
11.             this.process_received_message(json_message);  
12.         }  
13.     },  
14.   
15.     process_received_message: function (json_message) {  
16.  //自己填写部分  
17. };  
18.   
19. function notify_message_received(message_json) {  
20.     //console.log(JSON.stringify(message_json));  
21.     //JSON.stringify(message_json);  
22.     //alert(JSON.stringify(message_json.messages));  
23.     native_accessor.receive_message(message_json);  
24.     //phone_number=message_json.messages[0].phone;  
25. }  

 在浏览器的console中输入sms.js中的前两行内容就可以模拟短信收发。