Party_bid 第一张卡总结 博客分类： AngularJS yeomanjavascript双向绑定数据存储
刚刚完成了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));
参考网址：http://zhaomingyuan7.iteye.com/blog/2048495
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样式复制进去，也可以重新下载自己原来的工程，重新生成。