AngularJS + CoffeeScript
AngularJS + CoffeeScript 前端开发环境配置详解
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传。由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了。虽然AngularJS的学习曲线很陡峭,入门的门槛相比较高,但这些付出都是值得的相信用过的朋友都会与我有同感吧。为何我如此
地偏爱AngularJS? 或者这样说吧,用AngularJS开发的话其实是给我了一种工业化开发的概念,我对软件工业化的浅显理解简单归结为几点就是:
- 自动化
- 智能化
- 注重质量
- 注重工艺
前端开发比后端开发要求开发人员做更多繁杂的事,例如:js和css 的压缩、依赖引入、更新,图片压缩、“糖果语言(coffeescript/less/sass)”的语法检查与编译、静态图片/静态网页压缩,单元测试、E2E测试、等等。这些锁事往往很耗时间。
再者,当引入AngularJS作为主前端框架的话,大量的js源文件管理对文件结构与模块结构合理规划就显得更为之重要。所幸的是,google 是AngularJS工业化的主力推手,为了增加前端开发人员的生产力他们也不遗余力地做了很多工作,最为突出的就是[Yeoman|http://www.yeoman.io],他能快速地为我们建立各种类型项目的脚手架(项目模板),以他们的“最佳实践”为基础快速地为我们完成这一系列繁琐的工作。
我在实际项目开发觉得官方提供的 angular 生成器并不是十分合用,在经历了好几个项目的磨合后我在 google 官方的 yeoman angular 脚手架项目上进行了一些定制与修改,也在此作一些分享,由于时间关系还没有去将其成一个generator 所以只能在此以博文方式共享了。
如果对Yeoman不了解也不用要,本文将会独立于yeoman 一步一步详细地解释如何部署一个可以用于生产AngularJS前端开发环境。
工具
以下这些可谓是前端开发必备了,如果不清楚具体用法那么就先请去他们的官网先脑补吧:
npm
Node的依赖包管理工具,可以到 [nodejs 官方下载|http://nodejs.org/download/]页面获取安装包。
** bower **
bower 是由twitter开发的客户端依赖包管理工具
npm install -g bower
** grunt **
自动化任务管理工具,是整个自动化工程的核心。
npm install -g grunt-cli
安装此三大工具后我们就可以着手开始了。
实现的目标功能
- 基于 CoffeeScript并支持自动编译
- 能支持 livereload(一但任何代码、资源发生更改浏览器会自动刷新)
- 自动编译 less
- 支持 ngdocs 从 CoffeeScript 自动提取注释生成 API文档网站
- 自动 连接、最小化靜态资源,包括:脚本、图片、网页
- 自动将bower引入的依赖包注入页面
- 配备 Karma 的单元测试
- 配备基于 protractor 的e2e测试
基本目录结构
以下是基本项目目录的构成以及每个目录的功能说明
项目目录/
├── app // 应用程序目录
│ ├── bower_components // bower 组件目录 (由 bower 生成)
│ ├── fonts // 字体
│ ├── images // 图片资源
│ ├── styles // 样式目录 可存放 .css 和 .less
│ └── scripts // 应用程序脚本
│ └── app.coffee // angularJS 应用程序文件
│ └── index.html // HTML HOME 文件
├── dist // 发布后的程序目录
├── test // 测试程序目录
│ ├── mocks // 存放mocks组件文件目录
│ ├── e2e // e2e测试文件目录
│ └── spec // 单元测试文件目录
├── node_modules // NodeJS 的组件目录 (由 npm 生成)
├── docs // 存放生成文档
├── .tmp // 临时文件目录 (由 grunt 任务自动生成)
├── .bowerrc // bower 路径规则指定文件
├── conffeelint.json // CoffeeScript 语法检查规则
├── Gruntfile.js // grunt 配置文件
├── karma.conf.js // karma 配置文件
├── protractor.conf.js // protractor 配置文件
├── package.json // nodes 依赖包描述文件
└── bower.json // bower 依赖包描述文件
流程及原理
此项目环境主要提供三种主要的运行方式,分别适用于项目生命周期中的不同的时期,更准备地说应该是适用于不同的场景。
生成模式 - build
将所有的文件生成至产品交付目录 dist
内,执行包括:
coffeescript/less
- 编译
- 连结
- 压缩
- 引用修正,包括 angular 动态注入修正
- 拷贝
输出必要的静态文件
- 网页
- 图片
- 字库
输出注释文档并生成文档网站
指令:
grunt build
测试模式 - test
多用于开发期,进行自动化单元测试或是e2e测试,考虑到e2e测试的使用频率相对于单元测试要低,故此 test指令只默认执行所有单元测试,
而要执行e2e测试则需加入 e2e
参数作明确指定。
指令:
grunt test
- e2e -
grunt test:e2e
如果加入 keepalive
参数的话,test 指令将直接运行于后台,且会检测所有的文件变化,一但文件发生更改测试将会自动被重新执行。
这种情况多适用于测试程序的编写与调试。
grunt test:keepalive
调试模式 - debug
主要用于手工调试与HTML界面设计之用,当启用 debug 模式后,livereload 功能将会被自动载入,也就是所有 app
目录下的任何
变更都能被捕获且浏览器能自动刷新应用更改。
指令:
grunt debug
Gruntfile.js 文件的设计
首先需要安装 load-grunt-tasks 和 time-grunt 两个插件
npm load-grunt-tasks --save-dev
npm time-grunt --save-dev
基本的 Gruntfile.js
'use strict';
module.exports = function (grunt) {
// 自动加载所有可用的grunt 任务
require('load-grunt-tasks')(grunt);
// 可以显示每个任务执行的实际时间,可以便于以我们优化任务
require('time-grunt')(grunt);
// 配置主要路径
var config = {
app: require('./bower.json').appPath || 'app',
dist: 'dist',
tmp: '.tmp',
tasks: grunt.cli.tasks
};
grunt.initConfig({
// 任务配置
});
配置 CoffeeScript
首先是令CoffeeScript能支持语法检查,需要安装 [coffeelint|http://www.coffeelint.org] 插件:
npm install coffeelint --save-dev
此插件安装后可以与大名鼎鼎的 jshint一样将语法检查规则放在一个独立的文件内,本项目中就是项目根目录下的 coffeelint.json
,
如果需要增加更多的CoffeeScript语法检查规则可以修改此文件 。
在Gruntfile.js内的配置如下:
coffeelint: {
options: {
configFile: 'coffeelint.json'
},
all: ['<%= config.app %>/scripts/**/*.coffee'], //检查应用程序目录下的 CoffeeScript脚本
test: {
files: {
src: ['tests/**/*.coffee'] //检查所有测试脚本
}
}
}
然后是安装CoffeeScript编译插件: [coffee-script|http://github.com/jashkenas/coffeescript]
npm install grunt-contrib-coffee --save-dev
由于我们编译出来的 javascript 不会直接使用,因为还要进行连接、压缩和拷贝过程,所以我们将所有的输出目录设置为 .tmp
目录。
在即使修改时也可以通过livereload 从.tmp目录直接将变更后的脚本直接加载到浏览器内,方便调试之用。
还有一点需要特别指出的是 coffee 选项中我将 sourceMap
设置为true,只有这个选项打开,当生成map文件后在浏览器调试时才能准确地将被压缩后的
文件正确地重新映射至未压缩的程序源文件。关于 source map的具体用法可以参考 [javascript source map的使用|http://www.cnblogs.com/Ray-liang/p/4018162.html]
一文。
coffee: {
options: {
bare: false,
sourceMap: true,
sourceRoot: ''
},
dist: {
files: [
{
expand: true,
cwd: '<%= config.app %>/scripts',
src: '{,*/}*.{coffee,litcoffee,coffee.md}',
dest: '.tmp/scripts',
ext: '.js'
}
]
},
test: {
files: [
{
expand: true,
cwd: 'test/spec',
src: '{,*/}*.coffee',
dest: '.tmp/spec',
ext: '.js'
},
{
expand: true,
cwd: 'test/e2e',
src: '{,*/}*.coffee',
dest: '.tmp/e2e',
ext: '.js'
}
]
}
}
配置 Less
Grunt 提供了官方的less 编译安装包 [grunt-contrib-less|https://github.com/gruntjs/grunt-contrib-less]
npm install grunt-contrib-less --save-dev
与配置coffee 编译器的原理一样我们需要将 styles 目录下的 .less文件预先编译成为 .css并存放在 .tmp/styles下,以备后处理
和livereload 之用。
less: {
all: {
files: [
{
expand: true,
flatten: true,
cwd: '<%= config.app %>/styles',
src: ['{,*/}*.less'],
dest: '.tmp/styles',
ext: '.css'
}
]
}
}
压缩与连接
在这部分我并没有直接采用 Grunt 官方的 uglify,concat 而是使用了 usemin 插件这是延续了 yo generator-angular 的做法。他是 yeoman项目的官方插件,这个插件同样是依赖于 uglify,concat 的,然而他增加了对文件自动引用的支持,可以从页面读出脚本文件的引用而不是通过hardcore的方式写在Gruntfile中。另外,他还能增加对bower_components内的依赖进行合成而取代人工合成,这是一个很棒的功能可以省去我们从bower_components下找输出文件的麻烦,只需要关注bower.json文件内管理包而不是在Gurntfile.js进行硬编码了。
usemin是一个合成包需要以下这些插件同时支持,为了节省篇幅以下的指令都是以 npm install [包] --save-dev
方式安装
- [grunt-usemin|https://github.com/yeoman/grunt-usemin]
- [grunt-svgmin|https://github.com/sindresorhus/grunt-svgmin]
- [grunt-contrib-cssmin|https://github.com/gruntjs/grunt-contrib-cssmin]
- [grunt-contrib-htmlmin|https://github.com/gruntjs/grunt-contrib-htmlmin]
- [grunt-contrib-imagemin|https://github.com/gruntjs/grunt-contrib-imagemin]
- [grunt-contrib-uglify|https://github.com/gruntjs/grunt-contrib-uglify]
- [grunt-contrib-concat|https://github.com/gruntjs/grunt-contrib-concat]
以下配置是从 generate-angular 中拷贝过来用的:
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%= config.dist %>'
},
html: [
'<%= config.app %>/index.html'
]
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images'
]
},
html: ['<%= config.dist %>/{,*/}*.html'],
css: ['<%= config.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [
{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%= config.dist %>/images'
}
]
}
},
svgmin: {
dist: {
files: [
{
expand: true,
cwd: '<%= config.app %>/images',
src: '{,*/}*.svg',
dest: '<%= config.dist %>/images'
}
]
}
},
htmlmin: {
dist: {
options: {
customAttrAssign: [/\?=/],
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [
{
expand: true,
cwd: '<%= config.dist %>',
src: ['{,*/}*.html', 'views/{,*/}*.html', 'templates/{,*/}*.html'],
dest: '<%= config.dist %>'
}
]
}
}
这里需要说明的是 app/index.html文件,也就是在配置中:
useminPrepare: {
html: [
'<%= config.app %>/index.html'
]
}
这个选项是给 usemin 插件去找脚本引用的,这里默认只是设定了 index.html 文件,因为这是一个Angular SPA项目,所以只有一个index.html文件作为主入口,如果你具有多个不同的视图模板,而且所引用的 script 都不要一样的话,可以将这些模板页明确地放在这个 html
数组选项中。
关于usemin的详细用法可以参考google的官方文档,以下只是对最常用的部分进行讲解,力求不去看官方那个庞大的英文文档也能快速地使用起来。
打开 index.html :
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/index.js -->
<!-- endbuild -->
<base target="_blank">
</head>
<body ng-strict-di>
<div ui-view></div>
</body>
</html>
如果你足够细心你会发现这里有一些“与众不同的”标记,<!--build:js--><!-- endbuild -->
和 <!--build:css--><!-- endbuild -->
实际上这不是注释,他们其实是 usemin 的专用配置标记。其中 <!-- bower:js--><!--endbower-->
是另一个插件 bowerInstall 的
配置标记,我会在下文再详细讲解。
这个标记其实很简单将他翻译过来就是:<!-- build:类型[js|css] 生成的目标文件>
, 源文件目录就是当前html所在的目录,如果要指定多个
源目录可以通过<!-- build:类型({目录1,目录2}) 生成的目标文件>
的方式指定。
按照这个来理解的话,这里的设置就会输出三个文件:
- vendor.js //第三方依赖的合成压缩脚本
- index.js //项目内的的合成压缩脚本
- vendor.css //第三方依赖的合成压缩样式表
- main.css //项目内的合成压缩样式表
好吧,先来说说 vendor.*
,如果装了 bowerInstall 这个插件在<!-- bower:类型 --><!-- endbower-->
内的引用是由 bowerInstall 自动加入的,他加入后会修改index.html源文件,我们不需要手工加入。而对于某些比较坑爹的第三包,这里指的坑爹是他的最终输出文件放在一些古怪的深层目录中,而不是在他的发布目录的根下,那么我们才需要手工加入引用。如 ace-builds 这个包,他的发布文件是在 ace-builds/src/ace.js,同时他又提供了ace-build/src-min/ace.js 文件,对于这类包我们就不得不手工将具体的引用文件加入到 <!-- bower-->
标记内,否则bowerInstall是不知道应该引用哪一个文件的。
而输出位置就是前面我们在 usemin选项中设定的:
useminPrepare {
options: {
dest: '<%= config.dist %>'
}
}
也就是 项目目录/dist
。
接下来是 main.css
和 index.js
,这两个是从不同的源来生成的,main.css
没有指定源,所以他会在当前的index.html所在位置中找 styles 目录也就是项目目录/app/styles
,那么具体需要引用那些自定的css(之前通过 less生成的)就在此设定。
解释得更为清楚一点就是 假设有一个 app/styles/custom.less 文件,那么在 index.html内加入这个引用应该是:
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/custom.css">
<!-- endbuild -->
虽然custom.css在设计期并不存在,但他会被less编译器最终输出,所以引用时只要名字对了就行了。
同样的 build:js
的设置也是这理,只是这里增加了 .tmp
作源搜寻目录,就是说在 .tmp
找不到的源文件 可以到 app/scripts
下找,反之亦然。
bowerInstall
紧接上文,就是这个 bowerInstall 插件了,他就是可以从bower.json文件自动识别我们的项目引入了哪些第三方依赖,然后就将依赖的文件自动地注入到 <!--bower:js-->
和<!--bower:css-->
标记里面。
npm install grunt-bower-install --save-dev
配置如下:
bowerInstall: {
app: {
src: ['<%= config.app %>/index.html'],
ignorePath: '<%= config.app %>/'
}
}
bowerInstall 有一个替代品,叫 wiredep ,但这个插件很笨,经常会出现引用错误的问题,所以这里还是推荐使用bowerInstall
Angular 的自动依赖注入
接下来就是要为 Angular 环境作专门的配置了,首先要配置的是依赖注入。先来看来来Angular官方推荐的依赖注入方法:
angular.main('myApp',[]).controller('MyCtrl',['$scope','$log','$http','$resource',($scope,$log,$http,$resource)->
#我们的代码在此
])
光是为依赖注入我们其实是很无趣地编写这些对应的白痴式引用,当然只有一两个当然没什么问题,但如果注入得多了那么这个定义就变得
极为之难读。如果我们将上面的代码写成这样:
MyCtrl=($scope,$log,$http,$resource)->
#控制器代码在此
@
angular.main('myApp',[]).controller 'MyCtrl',MyCtrl
这样是否更容易读呢?为了实现这个效果,我们可以使用 [ngAnnotate|https://www.npmjs.com/package/grunt-ng-annotate] 插件帮我们实现这
种动态式的插入,使得我们的代码可读性可以大大地增加。
npm install grunt-ng-annotate --save-dev
ngAnnotate:
{
dist: {
files: [
{
expand: true,
cwd: '.tmp/concat/scripts',
src: ['*.js', '!oldieshim.js'],
dest: '.tmp/concat/scripts'
}
]
}
}
自动生成 Angular API 文档
这是一个我认为很 Cool 的插件,他能直接从源代码中直接抽出注释并生成一个API参考网站,对于开发产品项目帮助极大。这个插件叫 [ngdocs|https://www.npmjs.com/package/grunt-ngdocs]
npm install ngdocs --save-dev
这个插件配置很是简单,但他不能支持coffeescript,那么我们只能从生成的javascript文件作为注释文档生成源:
ngdocs: {
all: ['.tmp/scripts/**/*.js']
}
关于 ngdocs 这个主题以后我会专门花时间再详细写一篇文章来具体说明一下。
脚本模板
在使用Angular的 Routing、directive或是其它的插件,如 angular-ui 都可能使用到模板。如:
MyDirective=->
restrict:'E'
tempalteUrl:'scripts/directives/MyDirective.tpl.html'
angular.module('myApp').directive 'MyDirective',MyDirective
对于使用了 tempalteUrl
指定的模板是无法在Karma的测试中找到的,因为jasmine只能找到脚本而不能找到html文件。这样一来就会令得 directive 成为一个不可测试的元件。可以使用 [html2js|https://github.com/karlgoldstein/grunt-html2js] 解决这一问题(angularJS官方推荐)。这个插件的最大作用是将html文件直接编译为js文件,而无需要改动我们的源代码,这样一来既可在测试上解决这个问题也可以将html模板文件封装为可发布的脚本(如果你细心一点会发现 angular-ui 就是样做的,angular-ui-tpl.js 就是模板文件)。
npm install grunt-html2js --save-dev
这个配置会有点点复杂
html2js: {
options: {
base: 'app',
target: 'coffee',
module: 'myApp.templates', //模板会生成至模块内,需要明确指定模块的名称
singleModule: true,
useStrict: true,
htmlmin: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
},
main: {
src: ['<%= config.app %>/scripts/**/*.tpl.html'],
dest: '<%= config.app %>/scripts/templates.coffee'
}
}
有几点在使用时需要注意:
- 这里只检测 app 目录下所有的以 *.tpl.html结尾的HTML文件(视为模板文件)
- 这个文件会生成至源目录(app/scripts/)下的templates.coffee 待coffee编译进行后处理
- 在 app.coffee 文件内需要明确地引入由
module
所指定的模板模块,否则会引用失败
另外考虑到本文的篇幅问题,这里就略过了 copy, watch 和 connect 三个最为常用的任务配置,具体的可以从本文内附的源代码内参考。
karma
Karma runner 应该属于时下最流行的测试运行器之一了。他的配置在Gurnt貌似很简单,而然事实并非如此。他有独立的配置文件在本项目中为karma.conf.js,他的配置选项比较多在此就不一一地详细解释了,这里我是将Karma配置成能支持 coffee script并基于 [PhantomJS|http://phantomjs.org] 作为宿主浏览器,以 [jasmine|http://jasmine.github.io/] 作为测试运行架构的的单元测试环境。所有的单元测试文件存放在 test/spec 目录下。
他需要的依赖插件分别有:
- karma-coffee-preprocessor
- karma-coverage
- karma-jasmine
- karma-junit-reporter
- karma-chrome-launcher
- karma-phantomjs-launcher
- karma-requirejs
- karma-story-reporter
安装后的配置如下:
karma:
{
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
}
这里需要注意的是,在 karma.conf.js
配置的文件的 files
和 exclude
两个选项,files
内需要配置整个项目运行期
需要用到的 bower 依赖包,如:
files: [
'app/bower_components/angular/angular.js',
'test/spec/{,*/}*.coffee'
]
如使用到其它的angular插件引用需要在此加入,则会可能会导致单元测试因找不到依赖包而导致注入失败。
而 exclude
就当然是无需要加载的文件。
由于国内网络环境问题 安装 phantomJS 可能会偏慢,如果无法下载phantomJS可以将其删除,而使用 chrome 代替。
protractor
对于e2e测试(白盒测试/集成测试)也可以使用Karma+angular-scenario来配置,但这个在AngularJS官方已作为过时配置而不被推荐。取而代之的当然是 [protractor|http://angular.github.io/protractor/#/] 他为jasmine所扩展的matcher很多,用起来确实是
很好用。然而 protractor 可能比较新吧(发展了才一年多的时间)他的安装包下载是极其慢的,由其是 [selenium|http://www.seleniumhq.org]的安装。
他的配置有点像 karma 也是通过一个外部的 protractor.conf.js文件作为额外的附加配置的,在 Gruntfile.js 内:
protractor: {
options: {
keepAlive: true,
configFile: "protractor.conf.js"
},
all: {}
}
然而值得一谈的是他所依赖的 Webdriver 的安装过程。
安装protractor包
npm install protractor --save-dev
protractor 安装后会得到一个 webdriver-manager 的命令行工具。protractor 依赖于 selenium 服务器,且selenium是一个基于java开发的,so 在此之前则需要先安装好JDK。
另外 protractor 只能支持 chrome 和 ie 两种浏览器驱动,需要在完成 protractor安装后手动运行:
webdriver-manager update
不知是否人品问题(我绝对不认为天朝的网络有问题的),这个命令我是总运行不成功!这个命令会从 google的官网上下载一个chrome的模拟驱动程序至本机的/usr/local/lib/node_modules/protractor/selenium/chromedriver/
目录,如果你的人品与我一样,也是无法下载的话,那么你可以直接在google上下去载 [chromedriver|https://sites.google.com/a/chromium.org/chromedriver/] 的驱动然后手工解压到这个本地目录下即可。(BTW 我的环境是OSX,在Linux下我不知道是什么情况,试过的朋友请给我留言作为补充吧)
由于各种的不成功,最后我是直接将 protractor 的配置指向本绝对目录地址的,如果你有同样的情况出现就将以下的两个配置加入到protractor.conf.js中吧
seleniumServerJar: '/usr/local/lib/node_modules/protractor/selenium/selenium-server-standalone-2.44.0.jar',
chromeDriver: '/usr/local/lib/node_modules/protractor/selenium/chromedriver/'
protractor 有一点比较好的是可以与 WebStorm 以下是具体配置的办法:
WOO
一不小心写了这么长一篇,光是附上文章貌似不太地道,那么如果对这个脚手架项目有兴趣的朋友请到[我的 github|http://www.github.com/dotnetage/]上下载这个项目吧。项目地址是:https://github.com/DotNetAge/Angular-CoffeeScript-Seed。下载后,需要分别运行
sudo npm install
bower install
对本文所述的包进行一次性安装。暂时还没时间将这个包写成 Yeoman Generator ,不过饭还是一口一口吃吧,或者你可以直接Fork这个项目噢。
AngularJS + CoffeeScript的更多相关文章
- AngularJS + CoffeeScript 前端开发环境配置详解
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...
- 《AngularJS学习整理》系列分享专栏
<AngularJS学习整理>系列分享专栏 <AngularJS学习整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/re ...
- 都2020年了,这5个java IDE神器你还不知道?
TIOBE的4月份编程语言排行榜出来了,java还是稳坐第一位,java最新的版本也到了13,一直以来java凭借其企业级应用的优势和大量的框架级应用俘获了大量的粉丝和企业客户. 谈到开发者,java ...
- Angular遇上CoffeeScript - NgComponent封装
CoffeeScript是基于JavaScript的一门扩展小巧语言,它需要编译成JavaScript,然后再运行与浏览器或者Nodejs平台.JavaScript由于商业原因10天时间就匆忙诞生,所 ...
- Meteor+AngularJS:超快速Web开发
为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化: 三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但 ...
- AngularJS介绍
AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...
- 使用Yeoman快速启动AngularJS项目开发
本博客停止更新,请访问新个人博客:owenchen.net 前言 博客迁移到了BAE上,http://owenchen.net/,以后的文章会首发在自己的博客上,随后在博客园发布. 很久没有写文章了, ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- ivqBlog 开源博客 (angularjs + express + mongodb)
转向做全职前端差不多一年的时间了,其中学习了构建工具grunt,gulp,angularjs,coffeescript,less,sass,自己想要做全栈开发,所以自学了mongodb,nodejs, ...
随机推荐
- HDU - 5186 - zhx's submissions (精密塔尔苏斯)
zhx's submissions Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- 【三】注入框架RoboGuice使用:(Your First Resource Injection)
上一篇我们简单的介绍了一下RoboGuice的使用([二]注入框架RoboGuice使用:(Your First View Injection)),今天我们来看下资源文件的使用注解的方法: 为了在Ac ...
- 学习英语每日一 On the house. 赠品
tp=webp" alt=""> On the house. 免费赠送.我们之前学过请客能够说I'll buy you something. 事实上还有一种说法是I ...
- PLSQL:[1]plsql中文乱码,显示问号
PLSQL运行sql语句,不识别中文.输出的中文标题显示成问号?? ?? 工具/原料 PLSQL Developer 9 方法/步骤 1 登陆plsql,运行sql语句.输出的中文标题显示成问号??? ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- scala 101
* scala 安装: 下载可以执行的文件. 注意版本. spark 0.8.0 对应的scala 为2.9.3 * scala 编译: 和java 很像: 1, 直接编译脚本: scalac H ...
- Qt Quick 组件和动态创建的对象具体的解释
在<Qt Quick 事件处理之信号与槽>一文中介绍自己定义信号时,举了一个简单的样例.定义了一个颜色选择组件,当用户在组建内点击鼠标时,该组件会发出一个携带颜色值的信号,当时我使用 Co ...
- Facebook的ATOM Editor的底层Electron
Facebook的ATOM Editor的底层Electron 开源牛人 zcbenz 事情是这样的,微软推出了Visual Studio Code,我很好奇他怎么做跨平台的,所以就找找资料,在他的网 ...
- 你可以不知道原因,但是,我们不能停止努力。httplook抓取路由配置界面信息
因为实验室的项目要求,需要动态控制路由的配置信息,我们知道.路由选择需要购买的访问后,:http://192.168.1.1 路由配置页面.配置,不须要人手工操作.甚至定时任务配置的时候,就须要进一步 ...
- awk学习总结(两) How awk works and awk CMD in a file
测试文件names Tom Savage 100 Molly Lee 200 John Doe 300 $0 代表file的整行; $1,第一列;$2,第二列...... $ awk '/Tom/{p ...