欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Party_bid 第一张卡总结 博客分类: AngularJS yeomanjavascript双向绑定数据存储 

程序员文章站 2024-03-15 08:56:35
...

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