step by step建立一个angular+gulp+es5项目

源码地址:https://github.com/silence717/angular-gulp-seed

创建一个空文件夹名字任意,此项目为angular-gulp-seed

1
mkdir angular-gulp-seed

初始化工程

1
npm init

创建项目基本目录结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
+src
+app // 业务模块
-app.js // 应用入口
+demo // 业务模块目录,所有子模块均遵循此目录
- module.js // 模块声明文件
- controller.js // vm层
- index.html // 主入口模板
- router.js // 模块路由文件
- style.css // 模块样式
+home
+assets // 静态资源目录
-images
-css
+common // 公共服务
+components // 公共组件
+scripts // gulp脚本
- gulp.build.js // build任务
- gulp.common.js // dev,build公共任务
- gulp.config.js // 基础配置
- gulp.dev.js // dev任务
index.html // 主页面
package.json

more >>

【电影】七月与安生

周六晚上闲来无事,宅在家里看了一部电影《七月与安生》,很久不看这种国产的青春文艺片,但是这部没有堕胎,没有车祸的电影让我触动很大。

七月,一个乖巧听话的孩子,按照大人设计好的轨迹一步步成长,最后过上一眼就能看到头的生活,也许这就是家人所谓的平淡与安稳。可是七月的心情一直向往去流浪,去过安生的生活。

安生,一个真性情的女子,13岁的相识让她与七月成为命中注定的好友,两个人相爱相杀。为了七月,安生开始了流浪,过上了一种七月永远也想不到的生活,后来安生在讲述自己过往生活那种轻描淡写的语气,我很是心疼。而安生一直渴望有一个安稳的生活,不用再去流浪。

记得吵架的时候,七月吼着对安生说:在这个世界上,没有人比我更爱你!希望我们每个人的身边都有这样一个人,当你没有了一切的时候,还有一个人爱着你。

最后两个彼此羡慕的人交换了人生,各自都过上了彼此想要的生活:一个拥有了安定的生活,一个终于开始流浪去看风景。然而我太天真了,七月的生命定格在了27岁,这些故事也是安生用七月的笔名书写。七月就是安生,安生亦是七月!

我们终究应该要过自己想要的生活还是按照期待的生活着?我不知道。。。

我听说,如果我踩着一个人的影子,这个人就不会走远了。

青海湖20160805-20160808

一直想去西藏和环青海湖骑行,工作的原因却一直也没有时间。直到7月底一直还在纠结到底要不要来一场说走就走的旅行,刚好工作出现了一些问题,想给自己一个假期放松一下,然后就开始订票,做攻略,联系包车。

8月5号

下班直接奔向火车站一张硬座车票开始开始踏上期待已久的旅途,很多年没有坐过绿皮硬座火车,夜晚也是难熬之极。

8月6号

早晨到达西宁,包车的师傅来接了我们,然后和三个新疆朋友一起开始开始了这趟旅行。

第一站日月山,山上有两个亭子,一个日亭一个月亭,据说是文成公主出塞的时候休息的地方。

第二站倒淌河,地方建有文成公主雕像,栩栩如生。位于青藏高原第一镇倒淌河镇,“天下河水皆向东,唯有此溪向西流”。文成公主当时和亲嫁给吐蕃松赞干布,在去西藏的过程中,到达日月山,回首不见长安,西望一片荒凉,念家乡思父母,悲恸不止,挥泪西行,公主的泪水便汇成了这条倒淌河。

第三站青海湖,一直向往的地方!车越开越近,蓝色的青海湖,慢慢的清晰。蓝蓝的天,白白的云,黄色的油菜花,颜色搭配起来令人心旷神怡。青海湖的美,词穷,有关美景,只有你置身其中,才可以明明白白的感受到,它不只给你的眼睛做了spa,美妙的是,会让你释怀很多之前的困扰……

more >>

【翻译】W3C vs. WhatWG HTML5 标准-差异记录

原文地址:http://developer.telerik.com/featured/w3c-vs-whatwg-html5-specs-differences-documented/**

几周以前,HTML5成为W3C的一个正式推荐。我在SitePoint上针对这一事件讨论了5个有趣但现在过时的功能
问题在于W3C标准是同一硬币的一面。从HTML的这个版本开始,开发者和浏览器供应商可以在相同标记语言的两种不同风格之间进行选择:W3C开发的规范和WHATWG开发的规范。

译者注:WHATWG:Web Hypertext Application Technology Working Group,网页超文本应用技术工作小组,是一个以推动网络标准为目的而成立的组织。(为了准确,后面不做翻译)

就大部分而言,这些规范都是相同或者说非常相似的,但是几年过去之后,越来越多的差异出现。你会关心他们吗?在大多数情况下不会,因为它对你和你的项目差异很小,或者浏览器供应商会支持这两个标准。然而,在短期内,那些影响已给定功能实现的差异可能对你比较重要。每个浏览器供应商遵循规范都有自己的需求。例如来自于Mozilla的David Baron目前声明

当W3C和WHATWG的HTML标准不同时,我们倾向于遵循WHATWG标准。

在这篇文章里,我们将解决W3C和WHATWG标准之间的一些差异,在每个部分的结尾我会给出我对差异的看法。这并不是一个全面的列表,但是足够让你在这个问题有自己的观点。

more >>

学习资料网址收集

都是平时学习过程中收集的一些网址,有需要的可以看看!

angular

angularjs新闻: https://angular.jsnews.io/

angular1.x
  1. 官网: https://angularjs.org/
  2. es5最佳实践: https://github.com/johnpapa/angular-styleguide/blob/master/a1/i18n/zh-CN.md
  3. es2015最佳实践: https://github.com/toddmotto/angular-styleguide/blob/master/i18n/zh-cn.md
  4. codeReview checklist: https://angularcodereview.com/angularjs/
  5. angular移动版ionic: http://www.ionic.wang/
  6. A Better Way to Learn AngularJS: https://thinkster.io/a-better-way-to-learn-angularjs
  7. 1.5生命周期钩子英文原文: https://toddmotto.com/angular-1-5-lifecycle-hooks
  8. 1.5生命周期钩子中文翻译: https://github.com/Jocs/jocs.github.io/issues/3
  9. angularjs优化心得: https://github.com/atian25/blog/issues/5

more >>

【翻译】creating-crud-app-minutes-angulars-resource

原文地址:https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource

大量的单页应用都有CRUD操作。如果你使用angularjs创建一个CRUD操作,那么你可以利用$resource服务的优势。$resource服务是建立在$http服务之上,并且可以使前后端用RESTful标准进行交互变得简单的一个factory。所以,我们一起探索一下$resource,并且在angular中实现CRUD的操作。

前提

$resource服务没有打包到angularjs中。你需要下载一个独立的文件叫angular-resource.js并且把它引入到HTML页面中。这个文件可以从这里下载:http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js

另外,为了使用$resource你需要在主模块中注入ngResource模块。示例:

1
angular.module('mainApp',['ngResource']); //mainApp is our main module

more >>

webpack实践笔记总结

loaders

需要单独安装并且在config文件中的modules下进行配置,配置参数有:
  • test:匹配loaders处理的文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须),loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 css-loader。
  • include:必须处理的文件(文件夹)(可选)
  • exclude: 屏蔽不需要处理的文件(文件夹)(可选)
  • query:为loaders提供额外的设置选项(可选)
css-loader 和 style-loader区别
  • css-loader实现读取功能
  • style-loader将所有的计算后的样式加入页面中
  • 二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中
1
2
3
4
5
6
7
8
...
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader'
}
// 感叹号的作用在于使同一文件能够使用不同类型的loader
...

more >>

webpack实践笔记添加loaders

[源码地址]:( https://github.com/silence717/webpack-practice )

本篇文章基于分支step2,切换分支:git checkout step2

loader加载顺序

分了三个级别,preloaders,loaders,postloaders,分别代表前中后,三个处理状态。

添加es6 loader

创建一个es6的文件login.es6

1
2
3
4
5
6
7
8
9
10
// login.es6
let login = (username, password) => {
if(username !== 'admin' || password !== '123') {
console.log('incorrect login');
} else {
console.log('correct login');
}
};
login('admin', '123');

需要使用es6,由于浏览器支持不够,我们必须使用babel转为es5的code。

more >>

杨芳<br>前端一枚<br>背包客,热爱旅行,喜欢摄影<br>轻微洁癖,强迫症,电话恐惧症患者!