接Partybid的第一张卡之前做了些准备工作,因为之前没有接触过Angularjs,HTML,CSS,Javascript,这些对于我来说都是全新的东西,要先去了解它们。在学习这些语言的时候,我发现初学者去W3School这个网学习会比较容易接受一点。他分为基础教程和高级教程,可以让你在不同的阶段都能找到自己需要的资料和知识。
在写代码之前,要创建工程,用yo创建一个名叫partybid的工程。对于git这个软件,一开始我自己上网查了很多资料,但是这些资料都介绍的很简单,对于从来没接触过的人来说,要理解git很难(至少对于我来说是)。然后在同学的帮助下找到了一个很详细的介绍git的教程,网址如下:
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
在这个教程里我才真正了解了git的工作原理以及如何使用,对于库的概念也有了清晰的了解。以下是对第一张卡的总结:
一.创建工程:
创建工程之前要保证已经安装了yeoman和Rubymine。
在终端中输入:
mkdir my-project //为自己的工程创建一个文件夹
cd my-project //进入到该文件夹下
yo webapp
npm install -g generator-angular
yo angular
这样就创建了自己的工程。
二. 路由的配置:
路由是实现将不同的URL与响应该URL的Handler相匹配的功能模块,我们需要使用.when函数把该URL与Handler相匹配。代码如下:
.when(url, { templateUrl: '页面模板', controller: '控制器' })
比如我创建的活动列表界面的html为:views/activity_list.html,与之相对应的控制器设置为:ActivityListCtrl,那么配置路由如下:
.when('/activity_list',{ templateUrl: 'views/activity_list.html', controller: 'ActivityListCtrl' })
三.要用到的ng-系列的命令:
1.ng-show:ng-show:值为真时显示,为假时隐藏。并且要注意ng-show之后跟的是一个表达式,不能把.js文件里的功能表达式直接应用到html页面来,否则就是一个字符串,不起作用了。
<a href="#/activity_list" class="side-slide-trigger btn-style btn-4" ng-show="xianyin">返回</a>
在上面的代码里ng-show的值是“xianyin”,在.js文件里就应该写明“xianyin”的功能,如下:
$scope.xianyin=localStorage.length;
2.ng-disabled:控制失效状态,值为真时失效,即不能使用。
3.ng-repeat:用于实现遍历迭代,如下面的代码可以将活动的名称以列表的形式排列出来:
<li ng-repeat='activities_name in activities' class="btn-style btn-3">{{activities_name}}</li>
4.ng-model:实现模板到数据的绑定
<input type="text" class="input-full" ng-model="activity_name" />
在.js文件里就可以使用绑定的活动名称了:
var present_name=$scope.activity_name;
四.数据存储:localStorage的用法
1.localStorage. length:返回现在已经存储的变量数目
2.localStorage.setItem(k , v):和localStorage.k = v或者localStorage['k'] = v一样,设置键值k的变量值:
localStorage.setItem("create_activity_name",JSON.stringify(activity));
3. localStorage.getItem(k):和localStorage.k或者localStorage['k']一样,取得键值为k的变量的值:
var activity=JSON.parse(localStorage.getItem("create_activity_name"));
因为localStorage里只能存储字符串,所以要用JSON格式来存取。JSON.stringify(activity)是将数组转换成字符串,JSON.parse(localStorage.getItem("create_activity_name"))是将字符串转换成数组。
五.排序的问题
在列出活动名称时,需要将最新创建的活动名称排在最前面,这就需要排序了,可以有两种方法实现:
1.unshift():在存储时不用push,而是unshift,就是将最新存进去的活动名称插入到数组的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间,这样遍历的时候就能把最新创建的活动排在最前面了
var name=Array(); name.unshift(present_name);
2.用filter过滤器来实现排序功能,一般用法是
{{ expression | filter }}
六.cordova的安装应用
写android应用的人需要用到cordova来对程序进行封装。首先要确保自己已经安装有:git,nodejs,android-sdk-linux,然后按以下步骤进行:
1.安装cordova:
npm install -g cordova
-g 表示安装为全局
2.创建app:
cordova create cordova-project com.example.cordovaproject partybid
第一个参数”cordova-project“表示创建一个名叫cordova-project的文件夹;第二个参数”com.example.cordovaproject“表示包名,用于标志不同的app;第三个参数partybid表示项目的名称,即最后生成的apk文件的名称。
3.添加平台:
进入到创建的项目中:
cd cordova-project
添加android平台:
cordova platforms add android
添加完平台之后你可以在platforms这个文件夹里看见android这个文件夹,说明添加平台成功。在编译项目之前,要把工程里的dist文件里的东西拷贝到cordova-project文件夹下的www文件夹里(先把www文件夹里原来的东西删掉),再进行编译:
cordova build
这样之后,你就可以在cordova-project文件夹里的android文件夹里找到partybid-debug.apk文件了,这个文件就可以应用在手机上了。
参考资料:http://wenzhixin.net.cn/2014/02/11/cordova_command_line
4.遇到的问题:android手机连接电脑上后没显示,解决方法如下:在终端中输入:
adb devices
可以列出所有可用的安卓设备。然后打开之前编译出来的.apk文件所在的文件夹:
cd cordova-project/platforms/android/ant-build
这是我的apk文件所在的路径,找到apk文件之后安装:
adb install -r partybid-debug.apk
partybid-debug.apk就是我的apk文件,个人应该根据自己的情况找到自己的apk文件。