【Angular】技術入門
前言
在專案中應用了前端工程化，從而實現了前後端分離，即前後端共同開發互不影響。經過架構組的討論，最後專案中使用Angular作為前端框架。目前Angular的版本已經升級到6了，專案中為了穩定開發使用的是Angular4。Angular語言是基於TypeScript的。
擴充套件
- JavaScript：JavaScript(以下簡稱JS)是一種面向物件的解釋型的程式設計語言，基於物件和事件驅動並具有相對安全性的客戶端指令碼語言。【JavaScript】01入門；
- ECMAScript：是JavaScript的核心之一，定義JS語言的基礎；
- ES5：ECMAScript 5.1 (或僅 ES5) 是ECMAScript(基於JavaScript的規範)標準最新修正。 與HTML5規範程序本質類似，ES5通過對現有JavaScript方法新增語句和原生ECMAScript物件做合併實現標準化。
- ES6：ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式釋出了。它的目標，是使得 JavaScript 語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。（參考：http://es6.ruanyifeng.com/）
- TypeScript：TypeScript具有型別系統，且是ES5、ES6的超集。 它可以編譯成普通的JavaScript程式碼。 TypeScript支援任意瀏覽器，任意環境，任意系統並且是開源的。
1、定義
特徵
Angular 2比Angular 1更快更容易。
它支援最新版本的瀏覽器，還支援舊版瀏覽器，包括IE9 +和Android 4.1+。
它是一個跨平臺框架。
Angular 2主要關注移動應用。
程式碼結構比以前版本的Angular非常簡單。
優點
如果應用程式是一個重負載，那麼Angular 2保持它完全UI響應。
它使用伺服器端渲染在移動裝置上獲得快速檢視。
它適用於ECMAScript和其他編譯為JavaScript的語言。
它使用依賴注入來維護應用程式，而不用寫太長的程式碼。
一切都將是基於元件的方法。
為什麼要用Angular?
1.開發快速 & 程式碼生成
2.程式碼組織 & 程式碼生成率
3.動態頁面
4.跨平臺
5.嵌入單元測試
2、工作原理
模板 (Templates)是由 Angular 擴充套件的 HTML 語法組成，元件 (Components)類用來管理這些模板，應用邏輯部分通過服務 (Services)來完成，然後在模組中打包服務與元件，最後通過引導根模組來啟動應用
3、環境搭建
node.js
cnpm
TypeScript和typings
@angular/cli——腳手架
開發IDE
webstorm、vscode
命令
參考：https://blog.csdn.net/yxf15732625262/article/details/78578038
4、架構
1、模組 (Modules)
2、元件 (Components)
元件類：用以維護元件的資料模型及功能邏輯
3、模板 (Templates)
模板檢視：與使用者直接互動，模板檢視並不是獨立的模組。html
4、元資料 (Metadata)
5、資料繫結 (Data Binding)
1.屬性繫結：是一種單向的資料繫結，資料從元件類流向模板。
2.事件繫結：是一種單向資料繫結形式，資料從模板流向元件類。
3.雙向繫結：將以上二者結合起來就是雙向繫結。
6、指令 (Directives)
指令：與模板相互關聯，最重要的作用是增強模板特性，間接擴充套件了模板的語法。
7、服務 (Services)
服務：是封裝若干功能邏輯的單元，這個功能邏輯可以通過依賴注入機制引入到元件內部，作為元件功能的擴充套件。
8、依賴注入 (Dependency Injection)
9、路由
路由：是控制組件的建立和銷燬，從而驅使應用介面跳轉切換。
參考部落格：https://blog.csdn.net/yxf15732625262/article/details/70552358
使用者和模板直接進行互動 模板接收使用者的操作後，通過資料繫結和相應的元件類進行互動 元件類完成處理後更新模板檢視 服務來擴充套件元件類，指令來擴充套件模板
5、實踐
將前端生產構建好的包放在Nginx裡，配置nginx.conf檔案即可實現部署。
https://blog.csdn.net/yxf15732625262/article/details/79140642
6、最後的話
- 本文知識理論依據angular2，此版本較基礎，而本人最早在專案中應用時使用的是Angular4，現在很多專案已經升級到Angular5、Angular6了。
- 巨集觀把控的能力，只有有一張大的知識網體系，在遇到問題時，有對應的解決思路。
- 站在巨人的肩膀上，看更高的風景。文中出現了大量的分享連結，大部分是大牛們的寶貴經驗，將這些整合基本上就是自己的知識了。快速學習的渠道之一就該是如此了吧。
- 最後分享一波：
前端開發工程化探討--基礎篇（長文）： https://blog.coding.net/blog/frontend-engineering
angular資源： https://blog.csdn.net/yxf15732625262/article/details/77624388