Party_bid 第一张卡总结

扮老虎的猪 2014-07-16

刚刚完成了Party_bid的第一张卡,第一次接触RubyMine工具,使用angularjs进行web开发,确实学到了不少知识,收获颇多,下面是我对第一张卡的总结:

一、工程项目的环境配置

1、安装yeoman

yeoman的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。

Yeoman主要有三部分组成:yo(脚手架工具,用于构建一个新的项目框架)、grunt(项目的构建工具)、bower(包管理器,不再需要手动去下载scripts了)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。

1)安装yo,前提是已经安装了npm和node.js

npm install -g yo

 2)安装grunt-cli和bower

你以前安装了grunt,你需要首先卸载grunt

sudo npm uninstall -g grunt

 然后安装grunt-cli 和bower

sudo npm install -g grunt-cli bower

3)基本脚手架

在创建一个脚手架的web应用程序时,你需要安装web应用的生成器

安装generator-webapp  

sudo npm install -g generator-webapp

 generator-前缀的模块表明它是一种工程模版.这是默认的Web应用程序生成器,脚手架中包括:HTML5 Boilerplate, jQuery, Modernizr, and Bootstrap.

2、创建工程

1)创建自己的工程根目录:

mkdir Projects
cd Projects/
mkdir yo-demo
//进入到自己创建的目录里:
cd yo-demo/

2)运行:yo webapp,下载工程模板 (**可以先不装)

webapp是yo自带的工程模版,带有:html5 Boilerplate、jquery、Modernizr、Bootstrap、RequireJS等框架

如果报权限问题,就要切换到root用户下,或者提高用户的权限

3)我们还提供一些框架发生器,可用于脚手架的一个项目和横向视图,模型,控制器等

例如:脚手架出一个 AngularJS app(这是我们本次项目需要用的项目用例)

与往常一样,采用了新的生成器之前,您必须从npm里安装

npm install -g generator-angular

 在此之后,在你创建的应用程序的目录里运行:

yo angular

可能遇到问题:

(1)遇到问题:会报 access denidied ../.config/configstore/update-notifier-yo.yml

解决方法:

sudo chown -R $USER  ../.config/configstore/

提高用户权限,然后再重新运行一下,如果还报权限问题,就给用户赋予相应的文件夹(可能是node的问题)权限(要根据自己的实际情况)。

sudo chown -R $USER /usr/local/lib/node_modules/

再重新装一下yo :

npm install yo -g

 修改了对node的文件夹权限以后还要修改一下node环境变量:

echo "export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules" >> ~/.bashrc && source ~/.bashrc

 再重新装一下:

npm install yo -g

 (2)有时npm问题,

要清空一下npm缓存:

npn catch clear
npm install jitsu -g
//npm重装一下
npm install

 基本上项目样例就已经创建好了,使用命令生成运行效果

grunt --force
grunt serve

二、第一张卡要点总结

本项目充分利用anjularjs的特性,使得web应用更智能更灵活。第一张卡涉及到的主要知识点如下:

1、路由的配置

angularjs路由是实现将不同的URL与响应该URL的Handler相匹配的功能模块,我们需要使用.when函数把该URL与Handler相匹配。

.when(url, {
   templateUrl: '页面模板',
   controller: '控制器'
   })

 例如我有view/activity_creat.html,为其设置的控制器为activity_createCtrl,那么这个路由配置为;

.when('/activity_create',{
        templateUrl: 'views/activity_create.html',
        controller: 'activity_createCtrl'
       })

在进行页面跳转时,就是要找到相应的url,这里使用

$location.path('/activity_create');

2、绑定

1)angularjs的数据绑定由“{{}}”和“表达式”组成,这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,DOM可以随着运算结果的改变而实时更新,这里经常用到的一个元素是$scope,scope是作用域,它限定了数据的访问范围只能在特定的html和controller中。例如,在html中定义变量begin_end

<button class="btn btn-primary btn-lg btn-block btn-4" ng-click="start()" ng-show="show">{{begain_end}}</button>

 在相应的控制器js中将使用$scope.begin_end进行赋值

$scope.begin_end='开始';

2)angularjs的双向绑定主要体现在标签跟模型之间

<input class="inputheight" ng-model="activity_name" type="search">
<button class=" btn btn-primary btn-lg btn-block" ng-click="create_Activity()" ng-disabled="!activity_name">

 这里在input元素和activity_name模型之间建立了一个双向绑定,activity_name会被作为button中ng-disabled的输入。

3、ng-repeat

Angularjs自带一组内置的官方指令,其中ng-repeat就是实现遍历迭代的指令,其中ng代表在angularjs的作用域内,也即代表了angularjs。

在第一张卡中,我们需要使用AngularJS迭代器来实现活动列表。

<li ng-repeat="activity in activities" ng-click="activity_register(activity.name)">
<h4>{{activity.name}}</h4>
</li>

activities是自定义的用来存储活动名称的数组,activity是每一个活动对象,ng-repeat="activity in activities"的意思是将activities数组的对象依次取出赋给activity,然后在页面上使用数据绑定{{activity.name}}将名字属性以列表的形式显示在html中。

4、数据存储

AngularJS里的数据存储使用本地存储localStorage。

var messages=JSON.parse(localStorage.getItem('messages')) || []; //取出数组messages里的东西并赋值给messages
localStorage.setItem('activity', activity.name);  

 存储字符串类型数据,将activity.name存储在名为activity的名下当用这个数据时localStorage.activity即可调用此数据,这种存发只能存储一个数据,下次赋值会覆盖前面的数据。

如果是对象数组,存储时还要转换为字符串数组,存储数组:

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

5、ng-disabled

返回按钮的显示与否:如果为真时,不显示按钮,如果为假时,显示按钮,这里功能的实现也要与模型绑定相结合使用。

<button class="btn btn-primary btn-lg btn-block btn-4" ng-click="return()" ng-show="show">返回</button>

 可以在控制器里对show进行赋值使用。

6、运行时出现的问题:

grunt --force、grunt serve不能使用,报错:

Running "wiredep:app" (wiredep) task cannot find where you keep your Bower packages.

解决方法:重新安装一下bower,使用命令:

bower install

7、安装到手机上

1) android应用需要用到cordova来对程序进行封装。

        首先要确保自己已经安装有:git,nodejs,android-sdk

        接着只需要执行以下几步:

安装cordova

sudo npm install -g cordova

 如果已经安装yeoman就不需要再安装了

sudo npm install -g yeoman   
sudo npm install -g generator-angular

 然后是创建文件夹(上一步已经有了就可以不用再创建了)

mkdir my-workspace
cd my-workspace   
cordova create demo com.company.demo "DemoApp"
cd demo
cordova platform add android
mkdir webapp && cd webapp
yo angular webapp
sudo npm install

 先将你的工程复制粘贴到webapp文件夹下再执行,记住删除文件夹下原先的内容,然后再执行:

grunt --force
grunt server
rm -rf ../www/*   //删除www文件夹下的内容
cp -rf dist/* ../www/   //复制dist文件夹下的内容到www文件夹下
cd ..
cordova build    //生成apk文件

  此时,apk的文件可以在platforms/android/ant-build/中找到*debug.apk,可以复制到手机上安装调试,看看手机上运行的效果。也可以在连上手机设备后运行

adb install platforms/android/ant-build/*debug.apk

 2)遇到问题

安装到手机上后css样式加载不进去,原因是dist里缺少styles文件夹及其内容,可以将自己APP里的styles样式复制进去,也可以重新下载自己原来的工程,重新生成。