SegmentFault D-Day 2016「天津站: 前端场」~ angularjs干货满满啊~~~

企业级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技术精湛~