Angular框架

1、如何安裝Angular

　　在文件夾中打開cmd，輸入nmp init建立一個package.json。這個能夠一路回車跳過（若是沒有特別要註明）。nmp是前臺的包，用於管理後臺。成功建立package.json後再輸入nmp install bower -g，bower推薦安裝到全局，這裏bower是須要Git的支持，因此須要安裝一個Git軟件，而後在配置一下計算機的環境變量，將Git的路徑複製到PATH變量的後面（不配置有時候會出錯）。而後在cmd中輸入bower install angular --save安裝Angular，安裝成功後在script標籤中引用就能夠了。

2、Angular簡介

　　Angular屬於一個全新的框架，它是完成一整個應用的。它與jQuery、bootstrap、easyUI這些框架不一樣，jQuery稱之爲類庫，是基於DOM操做的，而操做DOM是效率最低的。類庫和框架的區別：MVVM、MVC；

M(模塊)、V(視圖)、C(控制器)、VM（視圖模塊），一般咱們也稱爲MV*框架。

Angular的特性：

------雙向數據綁定

------模塊化

------語義化標籤

------依賴注入

Angular有四個版本，1.x、2.x、4.x、6.x，這四個版本之間沒有任何關係，它們都是屬於谷歌的產品，是由四個團隊自行研發的。

3、Angular經常使用指令

①ng-app  初始化一個Angular JS應用程序

上面代碼表示，在你想要開始使用Angular執行的元素，在標籤裏面添加ng-app屬性，它的屬性值能夠任意填。

② ng-bind 綁定HTML元素到程序中。

　　不過一般咱們都是直接用 {{}} 來替換它，直接在{{值}}，而不是在標籤中加入ng-bind。

這兩種形式均可以展示出數據，不一樣的是咱們刷新頁面的時候，用 {{  }} 形式表現出的值會閃爍出來，這是由於當瀏覽器在翻譯執行的時候，{{ }}會當成DOM展示出來，而後再由Angular 執行的時候纔會編譯這種格式，因此，想要避免這種小bug只有寫上 ng-bind 或者 ng-bind-template='{{movie}}'，這兩種方式都能避免花括號的閃爍。

③ ng-init 初始化數據

上面代碼中，ng-init中的替換了咱們在控制器中設定變量的值，控制器中的變量，都會被ng-init中的變量所替代。

④ ng-model 綁定控制器中的值到應用數據中

上面的代碼中，在輸入框中輸入的值會以h1標籤的格式展示出來，這個是實時進行的。

⑤ ng-repeat 定義集合中每項數據的模板

　　也就是說咱們能夠用ng-repeat把數組或者對象遍歷出來，拿到咱們想用到的信息。

 上面的代碼中，用ng-repeat循環輸出數組中的對象，用 . 的形式將對象中的具體信息提取出來。若是也想獲得對象在數組的位置也能夠經過（key,val） in arr 的形式。

⑥ ng-src 指定<img>元素的src屬性

　　這個也能夠實現動態更換src屬性的路徑來達到更換圖片的效果。

⑦ ng-class 指定HTML元素使用的CSS類。

　　ng-class用於給HTML元素綁定一個或者多個CSS類。

上面的代碼中，給一個HTML元素綁定多個CSS類時，咱們能夠用true/false來切換，也能夠用0/1來切換。

在表格中，若是咱們想要一種隔行變色的效果，能夠用ng-class-even。它跟ng-class的用法相同，可是ng-class-even是做用在偶數行中，在單數行中能夠用ng-class-odd。

上面代碼就是經過even和odd 給表格的單雙行更換不一樣的背景色。

⑧ ng-disabled 規定一個元素是否被禁用至關於input中的disabled屬性，參數是布爾值。

⑨ ng-readonly 規定一個元素的只讀模式，至關於input中的readonly屬性，參數是布爾值。

⑩ ng-checked 規定元素是否被選中，多用於單選和多選中，至關於默認選中，參數是布爾值。

⑪ ng-selected 下拉列表中的默認選中，參數是布爾值。

⑫ ng-click 元素被點擊時的行爲，參數是執行後的表達式。

上面代碼表示，當我點擊按鈕時count就會自動加1。

⑬ ng-dblclick 元素被雙擊時的行爲，參數是執行後的表達式。

上面代碼的效果跟單擊時的效果相同，這個是雙擊時count加1。

⑭ ng-mouseenter 、ng-mouseleave

　　ng-mouseenter 鼠標移入元素髮生的行爲，ng-mouseleave 鼠標移出元素髮生的行爲。參數是執行後的表達式

上面代碼表示，當鼠標移入以後，count加1，移出後，count減1。

以上都是一些較爲經常使用的Angular指令，寫法與咱們以前學習的jQuery、bootstrap等等略有不一樣，但總的來講仍是較爲方便的。