學習AngularJS有這一篇就好了
技術標籤：AngularJSangularjsangularjs學習angularjs指令前後端資料互動資料互動
一、AngularJS簡介
AngularJS 誕生於2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、依賴注入等等。
二、AngularJS四大特徵
2.1 MVC模式
Angular遵循軟體工程的MVC模式,並鼓勵展現，資料，和邏輯元件之間的鬆耦合.通過依賴注入（dependency injection），Angular為客戶端的Web應用帶來了傳統服務端的服務，例如獨立於檢視的控制。 因此，後端減少了許多負擔，產生了更輕的Web應用。
Model:資料,其實就是angular變數($scope.XX);
View: 資料的呈現,Html+Directive(指令);
Controller:操作資料,就是function,資料的增刪改查;
2.2 雙向繫結
AngularJS是建立在這樣的信念上的：即宣告式程式設計應該用於構建使用者介面以及編寫軟體構建，而指令式程式設計非常適合來表示業務邏輯。框架採用並擴充套件了傳統HTML，通過雙向的資料繫結來適應動態內容，雙向的資料繫結允許模型和檢視之間的自動同步。因此，AngularJS使得對DOM的操作不再重要並提升了可測試性。
2.3 依賴注入
依賴注入(Dependency Injection,簡稱DI)是一種設計模式, 指某個物件依賴的其他物件無需手工建立，只需要“吼一嗓子”，則此物件在建立時，其依賴的物件由框架來自動建立並注入進來,其實就是最少知識法則;模組中所有的service和provider兩類物件，都可以根據形參名稱實現DI.
2.4 模組化設計
高內聚低耦合法則
1)官方提供的模組 ng、ngRoute、ngAnimate
2)使用者自定義的模組 angular.module(‘模組名’,[ ])
三、入門學習
3.1 angularjs表示式
表示式的寫法是{{表示式 }} 表示式可以是變數或是運算式
ng-app 指令 作用是告訴子元素一下的指令是歸angularJs的,angularJs會識別的
ng-app 指令定義了 AngularJS 應用程式的 根元素。
ng-app 指令在網頁載入完畢時會自動引導（自動初始化）應用程式。
<!DOCTYPE html> 3.2 雙向繫結
ng-model 指令用於繫結變數,這樣使用者在文字框輸入的內容會繫結到變數上，而表示式可以實時地輸出變數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs的雙向繫結</title>
<!-- 匯入angularjs的基礎檔案 -->
<script src="js/plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app>
<h1>angularjs的雙向繫結</h1>
<h2>雙向--【html頁面元素/angularjs變數】</h2>
<h2>雙向繫結--將html頁面元素與angularjs中定義的某一個變數關聯起來</h2>
<h2>雙向繫結效果--1.當html頁面元素中的資料發生變化，那麼與之對應angularjs中定義的變數的資料值就會發生變化；
2.當angularjs中定義的變數的資料值發生變化，那麼與之對應的html頁面元素中的資料就會發生變化；
【同步】
</h2>
<h2>ng-model指令--雙向繫結</h2>
請輸入姓名:<input type="text" ng-model="myname"/><br>
輸出姓名:{{myname}}
</body>
</html>
3.3 初始化指令
如果希望有些變數具有初始值，可以使用ng-init指令來對變數初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs的初始化指令</title>
<!-- 匯入angularjs的基礎檔案 -->
<script src="js/plugins/angularjs/angular.min.js"></script>
</head>
<body ng-app ng-init="myname='zhangsan'">
<h1>angularjs的初始化指令【ng-init】</h1>
<h2>作用:在html頁面內開啟的時候需要完成的動作，就要新增得到初始化指令</h2>
<h2>位置:body元素中</h2>
請輸入姓名:<input type="text" ng-model="myname"/><br>
</body>
</html>
3.4 控制器
ng-controller用於指定所使用的控制器。
理解 $ scope：是一個控制器與檢視之間的進行資料互動的橋樑物件。
$scope 的使用貫穿整個 AngularJS App 應用,它與資料模型相關聯,同時也是表示式執行的上下文.有了 $ scope 就在檢視和控制器之間建立了一個通道,基於作用域檢視在修改資料時會立刻更新 $scope,同樣的 $ scope 發生改變時也會立刻重新渲染檢視.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs的控制器</title>
<!-- 匯入angularjs的基礎檔案 -->
<script src="js/plugins/angularjs/angular.min.js"></script>
<script>
//建立模組
var myapp=angular.module('myapp',[]);
//建立控制器
myapp.controller('mycontroller',function ($scope) {
$scope.sum=function () {
//parseInt()---將文字資料轉換成數字
return parseInt($scope.num1)+parseInt($scope.num2);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<h1>angularjs的控制器</h1>
<h2>angularjs的控制器--定義儲存變數和函式</h2>
<h2>1.控制器是需要由模組來建立，因此我們要會建立angularjs模組</h2>
<h2>2.建立模組的格式:angular.module('模組名稱',[引數列表]);</h2>
<h2>3.建立控制器的格式:模組物件.controller('控制器名稱'，function($scope){});</h2>
<h2>4.$scope==全域性</h2>
<h2>5.控制器中定義變數：$scope.myname="zhangsan"</h2>
<h2>6.控制器中定義函式：$scope.insert=function(){ };</h2>
第一個運算數字<input type="text" ng-model="num1"/><br>
第二個運算數字<input type="text" ng-model="num2"/><br>
加法運算結果:{{sum()}}
</body>
</html>
3.5 事件指令
ng-click 是最常用的單擊事件指令，再點選時觸發控制器的某個方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs的點選事件</title>
<!-- 匯入angularjs的基礎檔案 -->
<script src="js/plugins/angularjs/angular.min.js"></script>
<script>
//建立模組
var myapp=angular.module('myapp',[]);
//建立控制器
myapp.controller('mycontroller',function ($scope) {
$scope.sum=function () {
//parseInt()---將文字資料轉換成數字
$scope.res=parseInt($scope.num1)+parseInt($scope.num2);
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<h1>angularjs的點選事件</h1>
<h2>ng-click:點選事件</h2>
<h2>ng-click="函式"</h2>
第一個運算數字<input type="text" ng-model="num1"/><br>
第二個運算數字<input type="text" ng-model="num2"/><br>
<input type="button" value="計算加法" ng-click="sum()"/><br>
運算結果:{{res}}
</body>
</html>
3.6 迴圈陣列
這裡的ng-repeat指令用於迴圈陣列變數。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angularjs的迴圈</title>
<!-- 匯入angularjs的基礎檔案 -->
<script src="js/plugins/angularjs/angular.min.js"></script>
<script>
//建立模組
var myapp=angular.module('myapp',[]);
//建立控制器
myapp.controller('mycontroller',function ($scope) {
//定義一個數組【String】
$scope.namearray=["zhangsan","lisi","wangwu"];
//定義一個物件型的陣列【集合】
$scope.stulist=[
{stuid:1001,stuname:'zhangsan',stuage:23,stuaddress:'西安'},
{stuid:1002,stuname:'lisi',stuage:24,stuaddress:'北京'},
{stuid:1003,stuname:'wangwu',stuage:25,stuaddress:'上海'}
];
});
</script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<h1>angularjs的迴圈</h1>
<h2>ng-repeat指令用於迴圈陣列/集合資料</h2>
<h2>ng-repeat="變數 in 陣列/集合"</h2>
<h2>遍歷陣列</h2>
<ol>
<li ng-repeat="name in namearray">{{name}}</li>
</ol>
<h2>遍歷物件陣列[集合]</h2>
<table border="1px" width="300px">
<tr align="center">
<td>學生編號</td>
<td>學生姓名</td>
<td>學生年齡</td>
<td>學生地址</td>
</tr>
<tr align="center" ng-repeat="student in stulist">
<td>{{student.stuid}}</td>
<td>{{student.stuname}}</td>
<td>{{student.stuage}}</td>
<td>{{student.stuaddress}}</td>
</tr>
</table>
</body>
</html>