angularjs-sample

Angular.js 1.x sample.

Technologies

前端：

• 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

后端：

• node.js
• express

自动化工具：

• Grunt

自动化测试：

• karma + jasmine : 单元测试(unit test)
• Protractor : 端到端测试(end-to-end test)

AngularJs Architecture

    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的功能模块。

CSS Architecture

• 命名规范使用 BEM.
• css 预处理器使用 Less.
• 字体单位使用 REM, 其他元素使用px.

Sass Directory Structure

// todo

css coding style

// todo

How to use

1. 克隆本代码仓库
2. 安装sass(安装Ruby, 运行gem update --system && gem install compass)
3. npm install
4. bower install
5. 普通开发使用grunt命令；发布使用grunt dist

Automation

1. 自动注入Bower文件：grunt-wiredep
2. javascript 代码检查 ：grunt-eslint
3. css 代码检查：grunt-stylelint
4. 图片优化：grunt-image
5. caching your HTML templates with $templateCache。：grunt-angular-templates
6. 合并css/javascript文件：grunt-contrib-concat
7. angular自动注入依赖：grunt-ng-annotate
8. css后处理：grunt-postcss
9. css压缩：grunt-contrib-cssmin
10. javascript 压缩：grunt-contrib-uglify
11. 组合concat/cssmin/uglify，为它们自动生成配置，并在最后替换index.html里的对应代码块为优化后的css/js文件：grunt-usemin

More

• 管理后台模板：admin template themes | WrapBootstrap
• Coreui-angularjs