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