前言碎语
ps:这篇博文是博主在公司内部分享的一个流程梳理的文档，仅供参考
soa/微服务架构，前后端分离，前后端通过http通讯json交换数据这个是未来的趋势
后端开发我们都熟悉，今天分享前端开发工程化？
软件开发，从无到有，从陌生到熟悉，怎么最快的上手开发呢？我觉得应该了解他的开发方式，重要的事情三遍，开发方式，开发方式，开发方式！
然而所谓的spa单页面应用如何工程化开发，他的开放方式如何呢，请继续看下文，使用angular打造spa应用
1.相关的关键字（yeoman，node,npm,bower,grunt,gulp,ruby,gem,scss,compass）
yeoman : google开发的项目构造器，项目打造神器
node.js : 是服务器端Javascript运行环境(runtime),
npm :是NodeJS包管理和分发工具
bower: 是js/css的包管理和分发工具
grunt/gulp: 前端项目构建工具（压缩js图片，打包项目）
ruby :脚本语言
gem :ruby的包管理和分发工具
scss :css预处理器，丰富css的语法
compass :ruby的一个包，scss的预处理需要这个组件支持
2.工作环境搭建
（1）安装node 下载安装
（2）安装yeoman （ npm install -g yo）
（3）安装grunt/gulp （npm install -g gulp/grunt）
（4）安装bower （ npm install -g bower ）
（5）安装angular生成器（npm install -g generator-jhipster）
ps:如果使用了scss，需要安装ruby环境，以及compass包
（6）安装ruby 下载安装
（7）安装compass （gem install sass compass）
3.使用yeoman指令yo angular 搭建项目骨架，
yeoman搭建的项目骨架一般都是热门技术的一些最佳实践，如generator-react-webpack（react-webpack应用），
JHipster generator（spring boot angular微服务应用）当然还有今天要分享的generator-angular（angular的spa应用）
4.分析yeoman生成的骨架，四个重要的点
（1）app目录
我们的工程业务文件目录,下面有四个文件夹，images(图片资源目录),scripts（脚本资源目录）,styles（样式目录）,view（html视图目录）,
以及你的spa应用入口文文件index.html
（2）bower.json （js依赖描述文件，需要第三方js组件，直接写在这个文件即可）使用 bower install下载依赖到本地bower_components文件夹下
（3）package.json （grunt构建依赖的组件描述文件，如grunt-contrib-watch，grunt-contrib-cssmin等）使用npm install 下载依赖到本地node_modules文件夹下
（4）Gruntfile.js （grunt构建任务描述文件，如，serve，build）
5.angular的常用相关概念
controller: 视图控制器，作用于一对标签内的视图
service ：注册服务（Factory，Service，Provider），可在Controller中注入使用
Filter ：过滤器，做枚举数据的转换等，内置过滤器（date，number，lowercase，uppercase，limitTo等）
directive ：指令，通用组件开发，操作DOM对象，丰富的内置指令（ng-if,ng-class,ng-repeat,ng-bind,ng-click,ng-show,ng-hide等等）
constant ：全局常量对象，定义配置内容
$scope : controller作用域内的数据绑定
$rootScope: $scope对象的父作用域，作用于所有的Controller
$stateProvider ：路由器，可以类比spring mvc的HandlerMapping，它可以定义url和resource（Controller，view）的关系
还有很多诸如（事件监听注册，拦截器）等概念，angular内容远不止这些，而且还有很多第三方扩展，这些都有待我们开发的时候去发现
6.app下scripts文件结构讨论
两种：
1.按业务功能点划分，相关的功能的Controller和service都放一起
2.按资源服务定义划分，controller和service分开，在各自按业务模块组织
7.angular 拓展整理
图表数据展示：angular morris chart https://angular-morris-chart.stpa.co/
http请求进度条 angular-loading-bar https://github.com/chieffancypants/angular-loading-bar/
左右滑块 angular.panels https://github.com/eu81273/angular.panels
文件上传 ng-file-upload https://github.com/danialfarid/ng-file-upload
angular扩展大全 https://github.com/angular-ui 其中 http://angular-ui.github.io/bootstrap/ 项目基本能解决90%以上的问题
