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

前端之家收集整理的这篇文章主要介绍了SegmentFault D-Day 2016「天津站: 前端场」~ angularjs干货满满啊~~~前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

干货

AngularJS作为前端框架的优缺点

@H_301_6@优点
  1. "富二代",我爸是Google

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

  3. 先进生产力

  4. 双向数据绑定

  5. 用户体验

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

  7. 良好的架构编码规范

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

@H_301_6@缺点
  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技术精湛~

猜你在找的Angularjs相关文章