angular學習筆記1

Angular發展史：

12年，angularJS1.0.0正式版推出：亮點功能基本齊備，如雙向綁定、依賴注入、指令等；

AngularJS1.3.x放棄支持IE8，推出了單次綁定語法；

AngularJS1.5.x增長相似組件式書寫體驗，主要爲過渡angular2作鋪墊；

 

Angular1.x困境：

性能問題、落後於當前web發展理念，如組件式開發方式、對手機端支持不夠友好

 

Angular2新特性：

移除controller+$scope設計，改用組件式開發，更易上手；

性能更好（渲染更快，變化檢測效率更高）；

優先爲移動應用設計，如angular Mobile Toolkit插件；

更加貼合將來的設計，如ES六、webComponent

 

Angular2無縫升級方案-UpgradeAdapter

經過UpgradeAdapter，將angular2的組件化代碼加載到angular1代碼中

 

 

Angular2核心：

組件(最重要)、元數據、模板、數據綁定、服務、指令、依賴注入、模塊

 

每一個組件都能完成各自的獨立功能，如一個通信錄頁面能夠當作最大的組件，下面由3個子組件構成，包括頭部、聯繫人部分、尾部，而聯繫人部分又包括好多聯繫人，每個聯繫人部分均可以當作一個更小的組件。組件能夠經過JavaScript、HTML、css實現。

 

父組件=》子組件（經過輸入接口）

子組件=》父組件（經過輸出接口）

 

完整的生命週期鉤子

全生命週期支持：

Constructor   構造器初始化

OnChanges    第一次觸發數據變化鉤子

OnInit        組件初始化

OnChanges    運行期間觸發數據變化鉤子

OnDestroy     組件銷燬前

 

 

 

元數據與裝飾類：

普通類=>裝飾器=>組件

裝飾器賦予一個類更豐富的信息，而這個信息就是元數據

 

 

 

 

 

 

 

 

 

 

 

 

 

組件是繼承於指令，但組件自身是帶有模板的，而指令沒有。

 

 

 

ElementRef用來獲取模板對象的引用；Renderer起到輔助渲染的做用，跟DOM有關，，作一層包裝是爲了與dom解耦，能夠適用於非瀏覽器的場景，如服務器端渲染。

 

 

服務：

 

服務能夠理解爲普通的服務類，服務類裏定義了一些函數

 

依賴注入，是組件引入外部構建的一種機制，最經常使用的是服務，實際上引用的是這個服務類的實例。管理實例化正是依賴注入所實現的。

 

 

 

 

 

 

模塊：

 

 

 

 

          

 

 

應用模塊，對零散的組件、指令、服務進行包裝。在默認狀況下，一個組件不能直接使用其餘組件，也不能直接使用其餘指令的功能，，要使用必須先導入，而這個導入過程就是應用模塊所實現的。贊成模塊內的組件能夠使用同模塊內的其餘組件、指令等，而跨模塊的組件間不能相互使用，若要跨模塊使用，則要結合模塊的導入導出功能。

做用到模塊裏的服務，能夠在應用全局裏使用，而注入到組件的，則只能在該組件及它的子組件裏使用。

導入其餘模塊時，則能夠使用其餘模塊暴露出來的組件和值等。

 

 

 

模塊間關係:

 

 

Ps：服務並不在導入導出的範疇內。模塊裏注入的服務是全局的。所以，只要在某個模塊內注入服務，則該服務就能夠使用在應用模塊的全部組件內。

Ps：文件模塊關注的是代碼層面，應用模塊關注的是功能層面。

 

Angular2要想成功的運行，至少要定義一個模塊。由於須要一個模塊，做爲應用啓動的入口.

 

 

 

 

 

Ps:與用戶直接交互的是模板,模板接收來自用戶的操做,經過數據綁定與對應的組件類進行交互,組件類完成數據處理後更新模板視圖,來反饋給用戶.組件處於angular2比較核心的部分,而服務和指令都做爲輔助

 

 

實踐是檢驗真理的惟一標準:

TypeScript:微軟開發的編程語言,JavaScript的超集,兼容JavaScript;運行前需編譯生成JavaScript代碼,由於TypeScript不能直接在瀏覽器中運行.;加入類型判斷,編譯時進行類型檢查;TypeScript有本身的文件擴展名.ts

eg.

var book: string = 「Angular 2」;

var num: number = 123;

 

function log(msg: string): void{

   console.log(msg);

}

 

TypeScript在編譯時會分析並判斷運行時的變量類型，若是判斷運行時的類型與定義時的類型不同，則會拋出編譯錯誤；

 

 

 

TypeScript提供了另外一種獨有的特性，便是裝飾器。                   

 

 

 

 

 

 

 

 

Webpack把項目中用到的靜態資源都視爲模塊，模塊之間會相互依賴，當咱們指定一個入口模塊後，webpack會挖掘出以這個入口模塊爲根節點的整個依賴模塊鏈，從而把這個依賴鏈打包到一個文件裏，而後不一樣的模塊會調用不一樣的解釋器（在webpack裏稱爲loader），這些loader須要本身手動配置，這些配置在文件webpack.configure.js（webpack的主要配置文件）文件裏，

 

 

git下安裝：

$ npm install angular

$ npm install style-loader css-loader url-loader sass-loader raw-loader

$ npm install ts-loader

$ npm install @angular/common @angular/compiler @angular/compiler-cli @angular/core @angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic @angular/platform-server @angular/router @angular/animations typescript --save

 

cmd管理員模式下全局安裝：

 

npm install webpack -g

cnpm install typescript -g

 

新建webpack.config.js

新建tsconfig.json

新建index.html

新建app文件夾

新建app.component.ts

……

當運行npm start，命令行出現bundle is now valid，則表示代碼編譯成功。

 

 2.x升級爲4.x，只需更新依賴，運行npm serve或npm start

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

 

參考：

http://www.imooc.com/learn/789

http://geek.csdn.net/news/detail/193631?utm_source=tuicool&utm_medium=referral

 

。。。。。。

大山啊大山。。