kl个人博客 首页>>前端>>前端开发工程化之angular打造spa应用

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

前端开发工程化之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%以上的问题
kl个人博客