Grunt快速上手

为什么要使用Grunt?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

怎么使用Grunt?

1.grunt是基于nodejs的,所以请先安装nodejs和npm安装grunt
2.新版本的grunt安装需要两步,终端执行

1
npm install grunt-cli -g

摆脱jquery!angularjs利用指令简单实现滚动翻页

移动开发一个很重要的问题是翻页操作,而现在的主流都是滚动翻页,以往都是用jquery的插件进行实现。用了angularjs之后,要逐步减轻对jquery的依赖。

滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight

代码

指令

1
2
3
4
5
6
7
8
9
10
app.directive('whenScrolled'function(
  return function(scope, elm, attr
    var raw = elm[0]; 
    elm.bind('scroll'function(
      if (raw.scrollTop+raw.offsetHeight >= raw.scrollHeight) { 
        scope.$apply(attr.whenScrolled); 
      } 
    }); 
  }; 
});

ngResource快速上手

废话不多说,本文的目的就是看过之后就会使用ngResource了。

  1. 引入angular-resource.min.js

jquery插件写法

项目地址

http://xialeistudio.github.io/search/

jquery插件确实是数不胜数,只要你用心找,肯定能找得到!

但是一些小功能想自己写,找的话估计时间还长些,本文简单开发一个 基于jquery的获取url查询字符串的 小插件。

bower快速入门

简介

bower是twitter的又一个开源项目,使用nodejs开发,用于web包管理。如果越来越多得开源项目都托管在github上,bower只需要将github上项目加上一个配置文件既可以使用bower方式使用安装包。作为包管理,bower能提供添加新web包,更新web包,删除web包,发布web包功能,管理包依赖。web包通常认为由html+css+javascript构成。

安装bower

1
npm install bower -g

请确保你有Nodejs环境

Angularjs指令数据远程请求的处理

假设有一个指令用来根据IP地址进行地位,获取实际地址。

首先,我们的IP地址是由后台PHP程序返回的,这里需要一个Http请求,使用了Http请求就会有类似回调的问题,之前想了各种办法,死活拿不到数据,后来去ng官网看了下,需要使用ngModel,这个是双向绑定。

指令代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
app.directive('location', ['ApiService', function (ApiService) {
return {
restrict: 'A',
require:'ngModel',
link: function (scope, ele, attrs,ngModel) {
ele.addClass('opt');
ele.bind('click', function () {
ele.text('定位中...');
ApiService.location(ngModel.$viewValue).success(function (data) {
ele.text(data.country + ' ' + data.region + ' ' + data.city + ' ' + data.isp);
});
});
}
};
}]);

Angularjs自动保存指令

angularjs的指令真是好东西,也是精髓。刚才群里面有朋友在问如何在用户离开编辑区域时提醒保存,其实用指令实现很简单的。

请注意,这里使用的指令标签为ajax-submit

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
app.directive('ajaxSubmit', [
'$http', function($http) {
return {
link: function(scope, ele, attrs) {
var old = ele.val();
ele.bind('blur', function() {
var url = ele.data('url');
var val = ele.val();

ele.prop('disabled', true);
//发送http
$http.post(url, {
data: val
}).success(function(data) {
ele.prop('disabled', false);
if (data.msg != undefined) {
old = val;
ele.after('操作成功');
setTimeout(function() {
ele.next().remove();
}, 1000);
}
else {
alert(data.error);
}
});
});
}
}
}
]);
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×