partybid第一张卡总结

    接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文件。

评论

1 楼 trotyl 2014-08-09  

引用

创建工程之前要保证已经安装了yeoman和Rubymine。

求解RubyMine给了赞助费么。。。