本篇轉(zhuǎn)載于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下載地址：https://angularjs.org/
一、AngularJs簡(jiǎn)介
image.png
AngularJS是由谷歌開發(fā)出來的像云，為了克服HTML在構(gòu)建上的不足而設(shè)計(jì)的。AngularJS通常使用我們稱為標(biāo)識(shí)符(directives)的結(jié)構(gòu)，讓瀏覽器能夠識(shí)別新的語法。例如：
（1）使用雙大括號(hào){{}}語法進(jìn)行數(shù)據(jù)綁定谱俭；
（2）使用DOM控制結(jié)構(gòu)來實(shí)現(xiàn)迭代或隱藏DOM片段履肃；
（3）支持表單和表單驗(yàn)證；
（4）能將邏輯代碼關(guān)聯(lián)到相關(guān)的DOM元素上斤程；
（5）能將HTML分組成可復(fù)用的組件。
AngularJS可以認(rèn)為是一個(gè)MVC模式的框架菩混。（Model-View-Contorller）M代碼scope忿墅，V代表Html展示元素，C代表Controller沮峡，也可以看成是一個(gè)MVVW模式的框架（Model-View-ViewModel）疚脐，其中M代表scope中的數(shù)據(jù)，V代表Html展示元素邢疙，VW代表scope棍弄。
二、特性
1.數(shù)據(jù)綁定（ng-model）
2.模板（templete）
3.MVC
4.依賴注入（Dependency Injection疟游，即DI）
AngularJS 擁有內(nèi)建的依賴注入子系統(tǒng)呼畸，可以幫助開發(fā)人員更容易的開發(fā)、理解和測(cè)試應(yīng)用颁虐。
5.Directives（指令）
用來裝飾元素或者操作DOM屬性蛮原。
三、實(shí)例
（1）入門實(shí)例一
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入門學(xué)習(xí)</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body>
<p><input type="text" ng-model="inputValue">請(qǐng)輸入內(nèi)容</p>
<h1>您輸入的內(nèi)容是：{{inputValue}}</h1>
</body>
</html>
結(jié)果：
20160406204651506.gif
（2）入門實(shí)例2 （帶Controller）
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入門學(xué)習(xí)</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body ng-controller="myController">
<p><input type="text" ng-model="inputValue">請(qǐng)輸入內(nèi)容</p>
<h1>您輸入的內(nèi)容是：{{inputValue}}</h1>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]); //獲得整個(gè)angularJS影響的html元素另绩。
//控制器
app.controller('myController',function($scope){
$scope.inputValue="林炳文Evankaka"儒陨；
})；
</script>
</html>
注意笋籽，ng-app="myApp",這個(gè)不能少蹦漠，還有ng-controller=""也不能少,這兩個(gè)分別批明了AngularJS有效的范圍和Controller層有效的范圍。
效果如下：
image.png
myCOntroller———控制器方法的名字和<body>標(biāo)簽里面的ngController指令的值相匹配车海。
input的數(shù)據(jù)此時(shí)與注入到我們控制器函數(shù)的作用域（$scope）相關(guān)聯(lián)笛园。當(dāng)應(yīng)用啟動(dòng)之后，會(huì)有一個(gè)根作用域被創(chuàng)建出來侍芝，而控制器的作用域是根作用域的一個(gè)典型后繼喘沿。這個(gè)控制器的作用域?qū)λ?lt;body ng-controller="myController">標(biāo)記內(nèi)部的數(shù)據(jù)綁定有效。
（3）入門實(shí)例3
<!DOCTYPE html>
<html lang-="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>AngularJS入門學(xué)習(xí)</tilte>
<script type="text/javascript" src="./1.5.3/angular.min.js"></script>
</head>
<body ng-controller="myController">
<button ng-click="myClick()"></button>
<h1 ng-if = "!flag"> 我是林炳文Evankaka</h1>
</body>
<script type="text/javascript">
var app=angular.module('myApp',[]); //獲得整個(gè)angularJS影響的html元素竭贩。
//控制器
app.controller('myController',function($scope){
$scope.flag=false;
$scope.myClick=function(){
console.log($scope.flag);
$scope.flag=!$scope.flag;
}
})蚜印；
</script>
</html>
20160406210943327.gif
