今天在這里分享分享我個人學習angular的知識點總結。在還沒有接觸到angular的時候，還真的不知道它到底有什么作用，直到我開始學習它，並且運用到它的時候，才知道angular這么強大。作為一個前端開發人員，我們要對新知識不斷地學習，不斷的充電，對待新知識不斷地渴望，學習新技術是我們每一位程序員的必備功課，這樣我們才不會被潮流淘汰掉。希望今后的日子里，能和各位博友和大神們在技術上共勉！
什么是angularJS？
它是一個用於設計動態web應用的結構框架，首先它是一個框架，不是像Query這樣的什么類庫，它與jQuery不同之處在於，前者致力於MVC代碼解耦，采用的是model，controller以及view方式組織代碼，而后者是給你提供了很多的APi函數。那么什么是動態web應用呢，官方的解釋是擴展HTML添加動態特性，和傳統的web系統不同的是，web應用能為用戶提供豐富的操作，能夠隨用戶操作不斷更新視圖而不進行url跳轉，也就是我們所說的單頁面應用程序 (Single Page Application)，angular使得開發現代的單一頁面應用程序變得更加容易，大家可以去看看網易音樂
http://music.163.com/#，它其實就是一個單頁面操作的。在這里我自己也寫了一個頁面，也是實現的是單頁面的，托管到了Github上面了，大家有興趣的話可以下載來看看：
https://github.com/blackManbaZhu/doubanApp/tree/master
angularJS的特點特性：
1、MVC架構模式，然而，要說angularJS它是MVC模式，倒不如說它更像是MVVM模式，因為它采用了MVC的基本思想，而又不完全是MVC。讓我們來看看MVC的概念：
M: model 模型
1、存儲數據
V: view 視圖
1、展現數據給用戶
2、與用戶交互
C: Controller 控制器 調度者
1、請求數據（ajax操作）
2、將數據存儲到model中
3、將模型中的數據交給視圖顯示（通過$scope對象）
4、監視模型的變化，做出相應的動作
2、angular了里面還有一個就是雙向數據綁定，通過雙向數據綁定來消除DOM操作，在任何時候當模型改變時視圖都會得到更新。
3、模塊化與依賴注入，也就是代碼模塊化，每個模塊的代碼都獨立擁有自己的作用域scope，模型model，控制器controller，然后每個模塊之間可以相互依賴，這樣大大的提高了代碼的重用性和靈活性，它還有一個比較好的模式是，它可以把一些操作放到客戶端去操作，服務端只提供數據來源，和其他客戶端不能完成的操作，這樣盡可能的減少服務端的負擔。
實踐：
接下來的話就讓我們用實踐去一步一步的去學習angular，我個人覺得寫一些demo練習，比理解理論概念要學習的快一些，畢竟實踐是檢驗真理的唯一標准。通過一些小demo，讓我們更好的理解angularJS。在此，我申明一下，我寫的博客並不是教程，只是在學習過程中的知識點總結，可能在其中有很多不足的地方，畢竟我的知識和理解能力也是有限的，希望大家能把不足指正出來，我們一起共同進步和學習。
在使用之前，我們需要下載angularJS，然后把它引入到我們的項目中：
官方下載地址：
https://angularjs.org/
使用npm下載：打開命令窗口，輸入命令npm install angular 直接下載到我們的項目中去。
首先讓我們先來看看angularJS的基本寫法：
先看代碼，代碼如下：
<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body ng-controller="AppController"> <p></p> </body> <script> //定義一個模塊 var app=angular.module('appModule',[]); //在這個模塊中添加一個控制器 app.controller('AppController',['$scope',function($scope){ }]); </script> </html>
我們來一點點的分析，首先是引入我們下載好的angularJS文件。
1、定義一個模塊，第一個參數appModule是模塊的名字，第二個參數是個數組，數組中的值我們可以先不填，它里面的值是當前模塊需要依賴的模塊，后續再說詳細的作用。
2、給這個模塊中添加一個控制器，第一個參數是控制器的名稱，第二個參數也是一個數組，數組中的$scope是我們注入的作用域，這個作用域只作用於當前這個控制器，后面寫的是一個方法，方法中要以參數的形式寫出我們注入的這個作用域（切記，必須要這樣寫，其中還有個坑的說出來，因為我就跳進去了，以后當我們要注入東西的時候，前后的順序不能變，一定要一一對應）。
3、現在我們把模塊和模塊都定義出來了，那我們要怎么去和視圖中的HTML建立聯系呢，大家注意看，我在html標簽中寫了ng-app這個指令，這個就是引入模塊的，也就是說我把我定義出來的appModule的模塊放到了HTML中，相當於這整個HTML頁面我把它當做了是一個模塊，用我定義出來的模塊去管理整個HTML界面，在之后，當前模塊可以復用到其他的模塊中去，只需要依賴就可以。然后在整個模塊中，我把控制器寫到了body標簽中，用ng-controller來引入控制器，這時候，控制器就相當於是在控制整個body界面，去實現我們想要達到的效果。在這里我要多啰嗦一點，一個模塊中，可以有多個控制器，用多個控制器去控制不同的區域，實現不同的功能，
看看代碼就知道是怎么實現的:
<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body> <div ng-controller="AppController1"> <p>控制器1</p> </div> <div ng-controller="AppController2"> <p>控制器2</p> </div> <div ng-controller="AppController3"> <p>控制器3</p> </div> </body> <script> //定義一個模塊 var app=angular.module('appModule',[]); app.controller('AppController1',['$scope',function($scope){ }]); app.controller('AppController2',['$scope',function($scope){ }]); app.controller('AppController3',['$scope',function($scope){ }]); </script> </html>
以上代碼就可以看到，我在整個模塊中定義了三個控制器，這個控制器分別管轄着界面中的三個div，而這三個div的獨立分開的，每一個控制器值控制着自己的區域，控制不到別人的區域，互不干擾，這樣就把一個一個功能分離開來，這樣有很好的一個好處就是功能的復用性和靈活性！
以上就是angularJS的基本寫法，接下來，用demo來看看angularJS的強大之處
demo1：計數器
界面效果：如圖所示，實現功能：我在輸入框中輸入任意數字，當我點擊增加按鈕的時候，數字會依次往上加1。
我們先來看看傳統JS是怎么實現的:
<body> <input type="number" id="txt_value"/> <input type="button" value="增加" id="btn_add"/> </body> <script> (function () { var txt=document.getElementById('txt_value'); var btn=document.getElementById("btn_add"); //監聽按鈕的點擊事件 當我點擊按鈕的時候進行以下操作 btn.addEventListener('click',function(event){ var now=txt.value-0; //這是把字符串強制轉換成數字的一種簡單方法 now=now+1; txt.value=now; }); })(); </script> </html>
我們再來看看angularJS的實現方法：
<!DOCTYPE html> <html ng-app="appModule"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body> <div ng-controller="AppController"> <input type="number" ng-model="value"/> <input type="button" value="增加" ng-click="value=value+1"/> </div> </body> <script> var app=angular.module('appModule',[]); app.controller('AppController',['$scope',function($scope){ }]) </script> </html>
大家對比一下，代碼量顯著減少，實現的功能是一樣的。但是，大家不難發現，angular的語法確實有些不一樣，我們來詳細分析一下上面的寫法，在第一個input輸入框上面，用ng-model把輸入框的值記錄了下來，然后在第二個按鈕中，給按鈕綁定了一個點擊事件，在綁定事件中，我們寫的是value=value+1，這樣的意思是告訴angular把上面記錄下來的value值進行相應的運算，然后再把運算的結果賦值給當前輸入框的值。大家可以想象一下，angular里面是不是幫我們做很多的工作，在這里我們並沒有做DOM操作，都是angular幫我們默默的去做了，這樣實現了讓開發者更多的去做業務邏輯。
demo2：文字同步功能
界面效果：如果所示；實現效果：當我在輸入框中輸入文字的時候，在文本框下面同步我輸入的內容。
大家可以想象一下，如果用原生的JS來實現這樣的效果，是不是要寫比較多的js代碼，在這里我就不用原生的寫法寫了，就用angular來寫：
<!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../angular.js"></script> </head> <body ng-controller="DemoController"> <div> <input type="text" ng-model="value"/> <h1>{{value}}</h1> </div> </body> <script src="../angular.js"></script> <script> var app=angular.module('myApp',[]); app.controller('DemoController',function(){
}) </script> </html>
我們來分析一下，當前在DemoController的控制器下，我把input的value值記錄下來了，然后再把記錄下來的值賦給h1標簽中，大家可以看到這里使用了兩個大括號，這樣寫的意思是告訴angular，我這里是你要去解析的東西。
通過兩個demo可以看出來，angularJS的強大之處和他的基本的優點和特點。
我們來總結一下它的基本特點：
- angular最大程度的減少了頁面上的DOM操作，解放了傳統js中頻繁的DOM操作
- 讓我們更加專注於業務邏輯的代碼
- 代碼結構更加合理
- 維護的成本更低
以上是我今天分享的angular的基本概念，對於概念的解釋，其中肯定有不足的地方，還請各位博友和大神們能指正出來，我們大家一起共同學習！后續還會持續分享！謝謝大家！