前端框架：第一章：AngularJS

前端框架AngularJS入門
AngularJS簡介

AngularJS  誕生于2009年，由Misko Hevery 等人(一幫熱血青年)創(chuàng)建，后為Google所收購。是一款優(yōu)秀的前端JS框架，已經被用于Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動化雙向數據綁定、依賴注入等等。目前企業(yè)開發(fā)使用最多的是版本一
 AngularJS四大特征

AngularJS的設計思想與jquery完全不同,前者操作的是變量$scope $http,后者操作的DOM
MVC 模式

Angular遵循軟件工程的M(數據)V(視圖)C(控制器)模式,并鼓勵展現，數據，和邏輯組件之間的松耦合.通過依賴注入（dependency injection），Angular為客戶端的Web應用帶來了傳統(tǒng)服務端的服務，例如獨立于視圖的控制。 因此，后端減少了許多負擔，產生了更輕的Web應用。

 

 

Model:數據,其實就是angular變量($scope.XX);

View: 數據的呈現,Html+Directive(指令);

Controller:操作數據,就是function,數據的增刪改查;
雙向綁定

AngularJS是建立在這樣的信念上的：即聲明式編程應該用于構建用戶界面以及編寫軟件構建，而指令式編程非常適合來表示業(yè)務邏輯?？蚣懿捎貌U展了傳統(tǒng)HTML，通過雙向的數據綁定來適應動態(tài)內容，雙向的數據綁定允許模型和視圖之間的自動同步。因此，AngularJS使得對DOM的操作不再重要并提升了可測試性。這里是區(qū)別于Jquery的，jq操作的是dom對象，angularJS操作的是變量

 
依賴注入

依賴注入(Dependency Injection,簡稱DI)是一種設計模式, 指某個對象依賴的其他對象無需手工創(chuàng)建，只需要“吼一嗓子”，則此對象在創(chuàng)建時，其依賴的對象由框架來自動創(chuàng)建并注入進來,其實就是最少知識法則;模塊中所有的service和provider兩類對象，都可以根據形參名稱實現DI.控制器就是通過依賴注入的方式實現對服務的調用
模塊化設計

高內聚低耦合法則

高內聚：每個模塊的具體功能具體實現

低耦合：模塊之間盡可能的少用關聯和依賴

1)官方提供的模塊  ng(最核心)、ngRoute(路由)、ngAnimate（動畫）

   2)用戶自定義的模塊     angular.module('模塊名',[ ])
入門小Demo
 表達式

<html>

<head>

<title>入門小Demo-1</title>

<script src="angular.min.js"></script>

</head>

<body ng-app>

{{100+100}}

</body>

</html>

執(zhí)行結果如下：

表達式的寫法是{{表達式 }} 表達式可以是變量或是運算式

ng-app 指令 作用是告訴子元素以下的指令是歸angularJs的,angularJs會識別的,也是使用angularJS必須要使用的指令,是anguarJS的啟動引擎

ng-app 指令定義了 AngularJS 應用程序的 根元素。

ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
雙向綁定

<html>

<head>

<title>入門小Demo-1  雙向綁定</title>

<script src="angular.min.js"></script>

</head>

<body ng-app>

請輸入你的姓名：<input ng-model="myname">

<br>

{{myname}},你好

</body>

</html>

運行效果如下：

ng-model 指令用于綁定變量,這樣用戶在文本框輸入的內容會綁定到變量上，而表達式可以實時地輸出變量。

即:當前文本框的內容和變量進行了雙向綁定
 初始化指令

我們如果希望有些變量具有初始值，可以使用ng-init指令來對變量初始化

<html>

<head>

<title>入門小Demo-3  初始化</title>

<script src="angular.min.js"></script>

</head>

<body ng-app   ng-init="myname='陳大海'">

請輸入你的姓名：<input ng-model="myname">

<br>

{{myname}},你好

</body>

</html>
 控制器

<html>

<head>

<title>入門小Demo-3  初始化</title>

<script src="angular.min.js"></script>

    <!—控制層-->

<script>

var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊

//定義控制器

app.controller('myController',function($scope){

$scope.add=function(){

return parseInt($scope.x)+parseInt($scope.y);

}

});

</script>

</head>

<!—視圖層-->

<body ng-app="myApp" ng-controller="myController">

x:<input ng-model="x" >

y:<input ng-model="y" >

運算結果：{{add()}}

</body>

</html>

運行結果如下：

ng-controller用于指定所使用的控制器。

理解 $scope：

$scope 的使用貫穿整個 AngularJS App 應用,它與數據模型相關聯,同時也是表達式執(zhí)行的上下文.有了$scope 就在視圖和控制器之間建立了一個通道,基于作用域視圖在修改數據時會立刻更新 $scope,同樣的$scope 發(fā)生改變時也會立刻重新渲染視圖.同時也是依賴注入的一種體現

 
事件指令

<html>

<head>

<title>入門小Demo-5  事件指令</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊

//定義控制器

app.controller('myController',function($scope){

$scope.add=function(){

$scope.z= parseInt($scope.x)+parseInt($scope.y);

}

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

x:<input ng-model="x" >

y:<input ng-model="y" >

<button ng-click="add()">運算</button>

結果：{{z}}

</body>

</html>

運行結果：

ng-click  是最常用的單擊事件指令，在點擊時觸發(fā)控制器的某個方法
循環(huán)數組

<html>

<head>

<title>入門小Demo-6  循環(huán)數據</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊

//定義控制器

app.controller('myController',function($scope){

$scope.list= [100,192,203,434 ];//定義數組

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

<table>

<tr ng-repeat="x in list">

<td>{{x}}</td>

</tr>

</table>

</body>

</html>

這里的ng-repeat指令用于循環(huán)數組變量。

運行結果如下：

 
 循環(huán)對象數組

<html>

<head>

<title>入門小Demo-7  循環(huán)對象數組</title>

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊

//定義控制器

app.controller('myController',function($scope){

$scope.list= [

{name:'張三',shuxue:100,yuwen:93},

{name:'李四',shuxue:88,yuwen:87},

{name:'王五',shuxue:77,yuwen:56}

];//定義數組

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController">

<table>

<tr>

<td>姓名</td>

<td>數學</td>

<td>語文</td>

</tr>

<tr ng-repeat="entity in list">

<td>{{entity.name}}</td>

<td>{{entity.shuxue}}</td>

<td>{{entity.yuwen}}</td>

</tr>

</table>

</body>

</html>

運行結果如下：

 
 內置服務

我們的數據一般都是從后端獲取的，那么如何獲取數據呢？我們一般使用內置服務$http來實現。注意：以下代碼需要在tomcat中運行。

<html>

<head>

<title>入門小Demo-8  內置服務</title>

<meta charset="utf-8" />

<script src="angular.min.js"></script>

<script>

var app=angular.module('myApp',[]); //定義了一個叫myApp的模塊

//定義控制器

app.controller('myController',function($scope,$http){

$scope.findAll=function(){

$http.get('data.json').success(

function(response){

$scope.list=response;

}

);

}

});

</script>

</head>

<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">

<table>

<tr>

<td>姓名</td>

<td>數學</td>

<td>語文</td>

</tr>

<tr ng-repeat="entity in list">

<td>{{entity.name}}</td>

<td>{{entity.shuxue}}</td>

<td>{{entity.yuwen}}</td>

</tr>

</table>

</body>

</html>

建立文件 data.json

[

{"name":"張三","shuxue":100,"yuwen":93},

{"name":"李四","shuxue":88,"yuwen":87},

{"name":"王五","shuxue":77,"yuwen":56},

{"name":"趙六","shuxue":67,"yuwen":86}

]

項目分享：angular