Party_bid 第一张卡总结

刚刚完成了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样式复制进去，也可以重新下载自己原来的工程，重新生成。