AngularJS入門教程
angularjs是建立在這樣的信念上的：即聲明式編程應該用于構件用戶界面以及編輯軟件構件，而命令式編程適合表示業務邏輯。angularjs最奇妙之處在于它的自動化數據雙向綁定功能。數據綁定能夠幫助你避免書寫大量的初始化代碼從而節約開發時間，也讓開發人員從頻繁的操作DOM的痛苦深淵中解脫出來。無論是模型改變視圖，還是視圖影響模型，angularjs無疑都為靜態HTML網頁技術增添了不少色彩。當然其核心功能還包括模塊化，MVC，語義化標簽和依賴注入等。
與傳統的jQuery等類庫不同的是，angularjs更注重于我們想要什么（what），讓機器想出如何去做（how），即聲明式編程。Angularjs也是建立在這樣的信念上的：即聲明式編程應該用于構件用戶界面以及編輯軟件構件，而命令式編程適合表示業務邏輯。
Angularjs適合用來構建CRUD應用，而不適合用來開發游戲、圖形界面編輯器等類型的應用。
廢話這么多，大家也不能馬上理解，下面就通過示例講解的方式帶領大家走進angularjs的奇妙世界。
要使用angularjs就需要在頁面引入angualr.min.js文件。文件地址傳送門：https://angularjs.org/。
Html代碼如下：<!DOCTYPE HTML >
<html ng-app="Store">
<head>
<title>App</title>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
<script type="text/javascript" src="angularjs/js/app.js"></script>
</head>
<body>
<div ng-controller="StoreController as store">
<ul ng-repeat="product in store.products">
<li>
<h1>{{product.name}}</h1>
<h2>{{product.price|currency}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase">Add to Cart</button>
</li>
</ul>
</div>
</body>
</html>
app.js代碼如下：(function(){
var app = angular.module('Store',[]);
app.controller('StoreController',function($scope){
this.products = gem;
});
var gem =[{
name:'西瓜',
price:2.95,
description:'不甜不要錢哦',
canPurchase:false,
},{
name:'香蕉',
price:3.95,
description:'香蕉個巴拉',
canPurchase:true,
},{
name:'桃子',
price:2.95,
description:'吃個桃子，偷的浮生半日閑',
canPurchase:true,
},{
name:'蘋果',
price:2.95,
description:'青蘋果，酸酸甜甜就是我',
canPurchase:false,
}]
})();
首先在html頁面的html標簽里有ng-app標記，ng-app標記的是angularjs應用的邊界，告訴angularjs應該管理那一塊。一個ng-app范圍可以理解為一個模塊，一個頁面可以包含多個ng-app標記。
js創建模塊方式如下：
var app = angular.module(‘Store’,[]);
如上我們創建了一個名為Store的模塊，在頁面中我們就可以用ng-app標記來引用。接下來我們看到了ng-controller控制器標記，一個ng-controller就是一個js函數。在ng-controller里我們可以注入$scope對象，$scope為上下文對象，其范圍只在當前controller里有效。$scope對象的頂層對象是根$rootScope，定義在$rootScope的屬性和方法為全局的屬性和方法。
上面例子中，我們在controller里定義了變量products對象，在頁面中我們是通過ng-repeat、ng-show和表達式輸出products的詳細信息。ng-repeat標記用來循環遍歷數組或對象數組。ng-show標記表示是否顯示該元素，與之對應的標記是ng-hide標記，表示是否隱藏元素。在angularjs中使用雙大括號來輸出表達式的值，例如｛｛product.name｝｝。
以上就是angularjs的基本使用，就是如此的簡單，簡單的標記組合就能創造出富態的頁面。
官網：https://angularjs.org/