AngularJS學習筆記

最近換了工做，新環境主推AngularJS4，學習其餘之餘，看了AngularJS的教程，有備無患。
筆記主要基於Angular2，其中觀點只是目前的感覺，也許通過正式項目以後，會有更全面的見解。

1. AngularJS的優勢

  1) 規範了HTML元素的綁定方式與頁面上的數據傳遞，頁面元素的全部操做都被限制在框架內，以規定的語法結構進行處理。
  2) 分離出了單獨的前端進程，專門用於處理不涉及服務器存儲數據的頁面交互，分流了服務器上本來的後端進程的負載。

AngularJS以完善的框架抹平了不一樣開發人員對於DOM、jQuery等的理解，全部業務代碼都是基於相同的運行環境，也許細節上仍會存在編程風格的不一樣，但並不影響全局結構的類似，代碼的長期可維護性獲得了很大的提高。
以目前來看，這麼重的框架，更適合團隊開發，用於我的項目有大材小用，本末倒置之感。

 

2. AngularJS框架結構
AngularJS的設計結構相似MVC，經過聲明不一樣的結構類，將對應的代碼註冊到進程事件循環的不一樣階段，來實現模塊加載、數據處理、數據綁定直至HTML渲染，頁面顯示。
以框架結構切割代碼，業務代碼的聚合則是出如今單獨某一個結構類中。

主要的結構類有Component、Module和Service三種，以目前的理解，業務代碼的執行主要依靠項目的入口Component(app.component.ts)的模板中引用業務Component所定義的HTML標籤，進而引用業務HTML模板和對應的交互邏輯來實現。
而相對的，AngularJS項目中的index.html文件，存在的意義彷佛只是爲了引用項目的主標籤app-root，也許存在同時運行多個app的場景？待驗證。

AngularJS中的結構類主要有如下幾種：

1) Component
定義了頁面HTML模板和主要的頁面交互邏輯，數據綁定過程的直接執行者。
定義在Component子類中的屬性和方法能夠直接在HTML模板中引用，實現數據的雙向綁定和HTML元素的交互事件(onclick, mouseover等HTML元素事件，在AngularJS中都有對應的directive)
Component的子類須要註冊到Module中才能夠被主Component引用。
Component主要負責將數據處理成適合進行展現的格式，或是收集頁面數據聚集成適合後臺邏輯處理的格式，並不負責直接進行數據存取，這部分工做主要由Service進行。

2) Service
Service的設計目的是爲了進行數據存取過程，不管是位於本地仍是遠程，Service在工做過程當中，以單例模式被多個Component共用。
定義爲Service的類，都須要被@Injectable()裝飾器進行修飾，內部原理暫時不明，猜想是爲了實現Service單例共用而定義的框架內部邏輯。

3) Module
一個項目中只有一個NgModule，其中定義了業務Component、公共Service和其餘第三方AngularJS插件的引用接口，只有在Module中聲明過的模塊，才能在Component中被引用。

其中各部分執行不一樣程序的引用
imports 主要定義AngularJS內核以及插件中的各種模塊
bootstrap 定義項目的主Component(通常是AppComponent)
declarations 定義業務Component，也須要包括AppComponent
providers 定義各種共用的Service

 

3. angular-cli的使用
在Angular2中，可使用angular-cli以命令行的方式建立項目和各類組件

ng new {project_name} 新建項目，自動生成目錄和基本的結構文件
ng server 使用預設配置文件中的配置啓動項目
ng generate component {component-name} 新建一個Component，生成基本的Component聲明代碼，並將該Component註冊到NgModule中
ng generate service {service-name} [--module={component-name}] 生成新的Service，若是指定了--module，會將該Service註冊到指定的NgModule中

 

4. 其餘Angular1和Angular2的學習筆記，雜七雜八記了兩個文檔，真正拿出來時，能系統整理的就只剩下這麼一點。其餘的HTML模板語法、directives甚至TypeScript，如今仍是隻知其一;不知其二，就算寫代碼也仍是須要不時對照文檔，沒有系統性的認知，還須要深刻學習。