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技術精湛~