AngularJS介紹

AngularJS是一個功能完善的JavaScript前端框架，同時是基於MVC(Model-View-Controller理念的框架，使用它能夠高效的開發桌面web app和移動端應用。AngularJS由Google公司開發而且開源出來，給所有開發者使用。前端基於Bootstrap+AngularJS框架，後端基於RESTful服務框架開發的應用越來越多。未來後端基於Docker+Microservice部署的應用也會越來越多。

AngularJS官方網站

AngularJS特點

1.客戶端模板 傳統的web應用:都是多頁面，伺服器端建立html，把html和資料裝配在一起，然後再把生成好的html頁面返回給瀏覽器。

單頁應用(Single Page Application):模板和資料都會返回給瀏覽器中，然後在瀏覽器中進行裝配。服務端僅僅為這些模板提供靜態資源，然後為這些模板提供所需的資料。

2.MVC M(Model)-V(View)-C(Controller)最早主要是在桌面應用開發中使用，強調的是介面，資料模型和控制器的三者之間的分離。檢視會從模型中獲取資料，然後展示給使用者，當用戶通過滑鼠或鍵盤操作或鍵入與應用進行互動的時候，控制器將會做出響應，並修改模型中的資料，最後模型會通知檢視，資料已經發生變化，這樣檢視就可以重新整理其中改變的內容。

3.資料雙向繫結 view層的資料和model層的資料是雙向繫結的，其中之一發生更改，另一方會隨之變化，這不用你寫任何程式碼。

4.指令 可以把模板和相關業務邏輯編寫成html標籤的形式，之所以可以實現這一點，主要是因為AngularJS引入了一款強大的DOM轉換引擎，可以用它來擴充套件HTML語法。生成的新的html標籤就是指令，AngularJS內建了非常多的質量，比如：ng-repeat,ng-app,ng-controller等等。當內建指令不夠時，開發者可以根據業務需求自定義開發指令。

5.依賴注入 Dependency Injection是一種設計模式，目的是在配置應用時定義應用所需的依賴。使用依賴注入能避免手動建立應用的依賴。初次啟動應用時，AngularJS會使用依賴注入載入模組的依賴。

Java流行框架Spring就是充分使用了依賴注入。依賴注入能提升AngularJS應用的可測試性，而且AngularJS單元測試和整合測試還有專門的測試框架。

6.可測試性 AngularJS應用藉助依賴注入的，大大提升了應用的可測試性。目前Web前端應用，一般會進行兩種測試。第一種是單元測試(Unit Test)，單元測試主要測試程式碼的一個小的單元，能在開發過程中儘早發現軟體的缺陷；第二種是端到端測試(End to End,簡稱:E2E)。端到端測試主要測試軟體中各個元件結合在一起的互動行為，從而發現軟體的缺陷。

QA主要功能測試，就是開發工程師釋出程式碼之後，測試工程師根據業務需求和功能進行功能測試。

AngularJS相比其他框架

目前主要流行的幾大框架：

1.jQuery

2.React

3.Vue.js

4.Ember.js

以上四個框架都有自己的開發者，每個框架都有自己的優點和缺點。在實際專案開發者，還是要根據團隊成員對框架的掌握程度來決定。但是我們還是推薦大家使用AngularJS。

Angular1.x和Angular2

在國內1.5.x版本開發的應用應該較多，但是2.0版本也已經發布了。對於Angular2，很多開發者都覺的要重新學習一遍。因為變動確實太大了，好在提供了從1.x遷移到2.0相關的工具。後面部落格中涉及的版本都是基於Angular1.5.X版本。等團隊成員對angular1.x相關技術和原理有一定的理解，到時才會考慮使用Angular2.0。

參考資料

1.https://zh.wikipedia.org/wiki/AngularJS

2.https://github.com/paddingme/ng-demo/blob/master/slide.md

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>