前端开发工程化之angular打造spa应用

前言碎语

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%以上的问题