企业级AngularJS 应用架构 & 开发经验漫谈

干货

AngularJS作为前端框架的优缺点

优点

1. "富二代", 我爸是GOOGLE

2. "强家族", 我哥是Chrome

3. 先进生产力

4. 双向数据绑定

5. 用户体验

6. 非常完善的"生态系统"

7. 良好的架构编码规范

8. 相对更成熟的技术社区

缺点

1. SEO问题

2. 学习成本略高, 曲线较陡峭

3. 性能问题

4. 浏览器兼容性

哪些项目适合使用AngularJS

1. 前后端架构分离

2. 不希望JS进行过多的DOM访问/操作

3. 前端进行数据逻辑处理(REST API)

4. 用户体验更好的单页面应用

5. 团队有一个统一的架构编码规范

6. 单元测试

7. 放弃低端浏览器(IE6,7,8)

项目采用的技术栈

1. vue（当时就是冲着这个来的~）

2. webpack（当时是唐老师负责组内分享~）

3. es6（当时寇大大分享了箭头函数等~）

4. sass（当时是鄙人负责组内分享~）

异乡好居工程化架构

• Gulp ------- 前端工程化

  • ProxyMiddleware -------开发环境跨域请求

  • Server ModRewrITe ------- SPA url 静态化

  • gulp-angular-templatecache ------- 模板缓存

  • gulp-ng-annotate ------- 依赖注入

  • 代码混淆&压缩 预上线打包 & 静态文件cdn拆分

• Webpack -------- 静态资源模块化封装 (TODO)

SEO 问题

SEO 解决方案

• 使用PRerender服务

  • 官方在线服务 (有页面数量限制)

  • 自己搭建Prerender服务

• 页面head增加<;meta name="fragment" content="!">

• AngularJS开启html5Mode

• Nginx配置针对爬虫的_escaPEd_fragment_=参数重定向至Prerender服务

组件化

国际化

Angular-translate
ng-translate
gulp
angular-gettext

浏览器调试

• Angular watchers

• ng-inspector

• AngularJS Batarang

  • 检查作用域树

  • 控制台输出指定元素作用域数据

  • 控制台输出指定元素作用域依赖的某Service

  • 控制台输出指定元素(dirctive)作用域的Controller

AngularJS 开发项目技能升级攻略

AngularJS 新手要先弄懂这些

• 如何区分Controller, Directive 和Service的应用场景?

• Provider, Service 和 Factory 傻傻分不清楚?

• 不同作用域之间的数据通信如何解决?

• 如何管理和规划$scope作用域?

• 修改$scope为什么不及时生效?

高手进阶之路

• AngularJS依赖注⼊入的原理是什么?

• 了解AngularJS数据绑定机制 & 实现原理.

• 如何解决AngularJS复杂项⺫⽬目的性能问题?

• 合理规划全站模块间关系以及命名空间

• 对AngularJS整体"⽣生态环境"了如指掌

• AngularJS框架完整启动渲染流程是怎样的?

• 通读GitHub上的全部内容

大神介绍（有问题可以尽情骚扰嘻嘻嘻~~~）

李彬(彬Go) ，
异乡好居PC站前端负责人
非极客 - 非专家 - 非高手
爱生活 - 爱运动 - 爱健身
从事前端行业的业余足球运动员
http://blog.bingo929.com

吐槽大神

彬哥是分享讲师中最风趣的了~
ppt最后一页写的是《程序员颈椎康复指南》和《程序员肌无力偏方大全》啊哈哈~~
没想到身经百炼的彬哥，上台后也有点小紧张啊哈哈~~
平时是超级风趣幽默，angular技术精湛~