Angular.js 1.x sample.
前端:
-
javascript前端框架: Angular.js
-
javascript编码规范: Airbnb JavaScript Style Guide
-
angular.js编码规范: Angular.js code style
-
javascript 代码检查: eslint
- plugin: eslint-plugin-angular
- config: eslint-config-airbnb-base
-
css 命名规范: BEM
-
css 初始化: Normalize.css
-
css 代码检查: stylelint
后端:
自动化工具:
自动化测试:
- karma + jasmine : 单元测试(unit test)
- Protractor : 端到端测试(end-to-end test)
app.module.js
|
|-- blocks/
| |
| |-- exception/
| |-- logger/
| \-- ..
|
|-- widgets/
|
|-- core/
|
\-- features/
|
|-- app.feature1
|-- app.feature2
|-- app.feature3
\-- ...
angualr.js框架总体上分为三个部分:app功能模块,app通用模块,跨app通用模块。
app.module.js
: 存放app启动逻辑和模块依赖。blocks/
:跨app的通用模块。如 blocks.exception,blocks.logger。core/
widgets
:此app的通用的模块。features/
:app的功能模块。
// todo
// todo
- 克隆本代码仓库
- 安装sass(安装Ruby, 运行
gem update --system && gem install compass
) npm install
bower install
- 普通开发使用
grunt
命令;发布使用grunt dist
- 自动注入Bower文件:grunt-wiredep
- javascript 代码检查 :grunt-eslint
- css 代码检查:grunt-stylelint
- 图片优化:grunt-image
- caching your HTML templates with $templateCache。:grunt-angular-templates
- 合并css/javascript文件:grunt-contrib-concat
- angular自动注入依赖:grunt-ng-annotate
- css后处理:grunt-postcss
- css压缩:grunt-contrib-cssmin
- javascript 压缩:grunt-contrib-uglify
- 组合concat/cssmin/uglify,为它们自动生成配置,并在最后替换index.html里的对应代码块为优化后的css/js文件:grunt-usemin