Angularjs的重要概念
AngularJS的重要概念
MVC模式
AngularJS最早按照MVC模式設計，在這種設計模式下，AngularJS組件可以分為：
- M: Model，即模型，是應用程序中用于處理應用程序數據邏輯的部分，在AngularJS中:
- 即作用域對象(當前為$rootScope), 它可以包含一些屬性或方法；
- 充當儲存數據的容器；
- 提供操作數據的方法。
- V: View，即視圖，是應用程序中用于處理數據顯示的部分，在AngularJS中:
- 即HTML頁面，AngularJS提供了一些指令來增強HTML標簽的作用；
- 包括: html/css/directive/expression；
- 可顯示Model的數據；
- 將數據同步到Model；
- 可與用戶交互。
- C: Controller，即控制器，是應用程序中處理用戶交互的部分，在AngularJS中:
- 即AngularJS的Controller；
- 可初始化Model數據；
- 為Model添加行為方法。
MVVM模式
有另一種觀點，將AngularJS視為MVVM模式。MVVM模式將“雙向綁定”的思想作為核心，切斷了View和Model之間的聯系，View、Model完全通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數據變化會同時引起數據源數據的變化，數據源數據的變化也會立即反映到視圖上。MVVM模式和MVC模式最大的區別是：模型中的數據一旦變化，會自動影響視圖，不需要控制器協調。
- M: Model, 即數據模型, 在AngularJS中:
- 為scope中的各個數據對象;
- V: View, 即視圖, 在AngularJS中:
- 為HTML頁面;
- VM: ViewModel, 即視圖模型, 在AngularJS中:
- 為scope對象;
- 在AngularJS中controller不再是架構的核心，在MVVM中只是起輔助作用，用來輔助$scope對象，即VM層。
指令
所謂的指令就是AngularJS對HTML的更改、補丁，其中ng是AngularJS的簡寫，也是內置指令的標記。
ng-app
-
表示AngularJS操作的范圍；
-
一個頁面上僅能出現一個ng-app指令，若有多個ng-app指令，則后續的ng-app不工作；
-
ng-app若加在html標簽上，則表示AngularJS控制了全頁面，AngularJS會等待ng-app指令標簽中的所有東西都加載后再執行，所以AngularJS的JavaScript文件在head或者body導入均可。
<!DOCTYPE html>
<html ng-app>
<head>
<title>hello world</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
{{ 1 + 2 }}
</body>
</html>
ng-init
用于聲明變量，該指令的屬性值可聲明一個或者多個變量，多個變量直接用逗號隔開即可。
<div ng-init="num=5">
{{num * num}}
</div>
ng-bind
將表達式的值綁定到HTML元素上（如<span../>，<div../>等）。
<p ng-bind="2 * 5"></p>
ng-style
表示給HTML元素加上樣式，常見有如下三種寫法。
寫法一：
<div ng-style="{background:red;}"></div>
寫法二：
//...
myapp.controller("MainCtrl", [function(){
this.style = {background:red;};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
<div ng-style="mainctrl.style"></div>
</body>
寫法三：
//...
myapp.controller("MainCtrl", [function(){
this.getStyle = function{
return {background:red;};
};
}]);
//...
<body ng-controller="MainCtrl as mainctrl">
<div ng-style="mainctrl.getStyle()"></div>
</body>
注意：如果控制器中的某一個值由其他值決定，并且希望其他值改變的時候，這個值也能改變，此時要寫成函數return的形式。
ng-repeat
表示重復一個HTML標簽。
語法格式為：
<div ng-repeat="變量名 in 數組數據"></div> //變量將自動按順序迭代數組數據中的每一項。
ng-options
ng-options可以智能地從控制器中取值當做選項。注意，使用ng-options的下拉菜單必須有ng-model屬性與控制器雙向綁定。
在下面select代碼塊中實現了下拉菜單的功能，option標簽實現了下拉項，頁面顯示的是諸如“滿意”之類的文字，存入數據庫的是諸如“10”之類的value值。
<select name="" id="">
<option value="10">非常滿意</option>
<option value="8">比較滿意</option>
<option value="6">滿意</option>
<option value="4">比較不滿意</option>
<option value="2">稍微不滿意</option>
<option value="0">非常不滿意</option>
</select>
ng-options常見的幾種使用情形：
-
普通數組，語法格式：label for value in array，value是提交的值，label是顯示的值。
<body ng-controller="MainCtrl as mainctrl"> <select ng-model="mainctrl.label" ng-options="item for item in mainctrl.arr"> </select> <script type="text/javascript"> var app = angular.module('myapp', []); app.controller('MainCtrl', [function(){ this.label = "東風"; this.arr = ["東風", "幺雞", "二餅", "二條"]; }]) </script> </body> -
對象作為數組元素，語法格式：value as label for item in array，value是提交的值，label是顯示的值。
<body ng-controller="MainCtrl as mainctrl"> <select ng-model="mainctrl.value" ng-options="item.id as item.city for item in mainctrl.arr"> </select> <script type="text/javascript"> var app = angular.module('myapp', []); app.controller('MainCtrl', [function(){ this.value = ""; this.arr = [ {"id": "010", "city": "北京"}, {"id": "029", "city": "西安"}, {"id": "0311", "city": "石家莊"}, {"id": "0312", "city": "保定"}]; }]) </script> </body> -
普通對象，語法格式value as label for (label, value) in array，value是提交的值，label是顯示的值。
<body ng-controller="MainCtrl as mainctrl"> <select ng-model="mainctrl.value" ng-options="value as key for (key, value) in mainctrl.arr"> </select> <script type="text/javascript"> var app = angular.module('myapp', []); app.controller('MainCtrl', [function(){ this.value = ""; this.arr = { "廣東":"粵", "福建":"閩", "江西":"贛", "山東":"魯", "河北":"冀" } }]) </script> </body>
表達式
{{}}是AngularJS的表達式模板定位符，主要用于在HTML頁面上產生輸出，里面可以填寫AngularJS的表達式，表達式只能是簡單運算，包括加、減、乘、除、求模、三目運算等，但不能是函數、循環、判斷、賦值等復雜語句。
模塊
AngularJS的模塊加載分為兩種情況。
-
匿名模塊
就是沒有為ng-app指定屬性值或屬性值為空字符串），此時AngularJS可以自動加載并創建AngularJS模塊。
-
命名模塊
為 ng-app 指定了屬性值，該屬性值就是該模塊的名稱），此時必須調用angular對象的module（）方法來創建AngularJS模塊。
控制器
-
AngularJS使用裝飾者模式創建控制器，即首先創建一個對象，然后不斷豐富對象的內容；
-
控制器是一個對象，是我們View與Model之間的橋梁；
-
當我們使用了ng-controller指令， 內部就會創建控制器對象；
-
每定義一個ng-controller指令， 內部就會創建一個新的作用域對象（$scope）, 并自動注入構造函數中,在函數內部可以直接使用$scope對象；
-
jQuery向外暴露了"$"這個底層變量；underscore向外暴露了"_"這個底層變量；AngularJS向外暴露了"angular"這個底層變量。
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>Angular程序</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
<!-- 實例化控制器MainCtrl類，并起一個別名mainctrl，控制器接管的范圍為此div區域。 -->
<div ng-controller="MainCtrl as mainctrl">
<h1>{{mainctrl.a}}</h1>
<input type="button" value="點擊" ng-click="mainctrl.add()">
</div>
<script type="text/javascript">
//創建一個名為app的模塊，第一個參數是ng-app的名稱，第二個參數是一個數組，數組里存儲該模塊所需的依賴。
var app = angular.module('myapp', []);
//創建一個名為MainCtrl的控制器類，第一個參數是控制器的名稱，第二個參數是一個數組，描述依賴項和順序注入到函數里面用的，數組最后一個元素是控制器的函數主程序。
app.controller('MainCtrl', [function(){
//定義一個變量a并賦值100。
this.a = 100;
//做個備份。
var self = this;
//定義一個方法。
this.add = function(){
//每運行一次自增1。
self.a++;
}
}]);
</script>
</body>
</html>
數據綁定
AngularJS只關心數據，數據的變化會自動引起視圖的變化，并且視圖是局部刷新，不是整個頁面刷新，AngularJS會自動識別哪里用到了這個更新的數據，這個過程叫做臟檢查。
數據綁定
數據從一個地方A轉移(傳遞)到另一個地方B的過程稱為數據綁定, 這個過程由框架來完成。
- View-->Model；
- Model-->View。
雙向數據綁定
數據可以從View(視圖層)流向Model（模型）, 也可以從Model流向View。
- Model<-->View：
- 當改變View中的數據, Model對象的對應屬性也會隨之改變: ng-model指令 數據從View==>Model；
- 當Model域對象的屬性發生改變時, 頁面對應數據隨之更新: {{}}表達式 數據從Model==>View。
- ng-model是雙向數據綁定, 而{{}}是單向數據綁定。
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>雙向綁定</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as mainctrl">
{{mainctrl.a}}
<br/><input type="text" ng-model="mainctrl.a">
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.a = 100;
}])
</script>
</body>
</html>
單向數據綁定
數據只能單方向流動。
- View-->Model ： ng-init；
- Model-->View : {{name}}；
- ng-init用來初始化當前的作用域變量。
依賴注入
依賴對象：完成某個特定的功能需要某個對象才能實現，這個對象就是依賴對象。
依賴注入：依賴的對象以形參的形式被注入進來使用，這種方式就是依賴注入。
<script type="text/javascript">
function(event) {
alert(event.clientX);
}
</script>
上圖所示代碼塊中，event對象就是以依賴注入的方式進來使用的依賴對象。
AngularJS的 ‘$scope’對象就是依賴對象，并且是依賴注入的形式進行使用，這其中形參必須是特定的名稱（‘$scope’）, 否則AngularJS無法注入，將拋出異常。
<script type="text/javascript">
function MyController($scope) {
}
</script>
AngularJS中如果要發出Ajax請求，此時需要使用內置$http服務，所有的內置服務都是$開頭的，使用依賴注入的語法引入到控制器中。
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', ["$http", function($http){}]);
</script>
聲明式編程和命令式編程
命令式編程
命令“機器”如何去作事情(how)，這樣無論你想要的是什么(what)，它都會按照你的命令實現，更注重執行的過程，可類比為解答題。
var arr = [1,2,3,4,5];
var newArr = [];
for(var i=0;i<arr.length;i++){
var num = arr[i]*2;
newArr.push(num);
}
console.log(newArr);
聲明式編程
告訴“機器”你想要的是什么(what)，讓機器想出如何去作(how) ，更注重執行的結果，可類比為填空題。
var newArr2 = arr.map(function (item) {
return item*2;
});
console.log(newArr2);
案例集錦
調色板
通過滑塊和文本框改變色塊顏色。
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>調色板</title>
<meta charset="utf-8"/>
<style type="text/css">
.box{
width:200px;
height:200px;
border:1px solid #333;
}
</style>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<div class="box" ng-style="mainctrl.getColor()"></div>
<p>
r:
<input type="range" min="0" max="255" ng-model="mainctrl.r">
<input type="number" min="0" max="255" ng-model="mainctrl.r">
</p>
<p>
g:
<input type="range" min="0" max="255" ng-model="mainctrl.g">
<input type="number" min="0" max="255" ng-model="mainctrl.g">
</p>
<p>
b:
<input type="range" min="0" max="255" ng-model="mainctrl.b">
<input type="number" min="0" max="255" ng-model="mainctrl.b">
</p>
<p>
a:
<input type="range" min="0" max="1" step="0.01" ng-model="mainctrl.a">
<input type="number" min="0" max="1" step="0.01" ng-model="mainctrl.a">
</p>
<script type="text/javascript">
var app = angular.module("myapp", []);
app.controller('MainCtrl', [function(){
this.r = 100;
this.g = 100;
this.b = 100;
this.a = 0.38;
this.getColor = function(){
return {"background-color":"rgb(" + this.r + "," + this.g + "," + this.b + "," + this.a + ")"};
}
}]);
</script>
</body>
</html>
模擬微博發布框
限制發送字數最多為140字，并且能夠實時提醒用戶寫了多少個字，當超過140字時，數字變紅，同時發布按鈕無法點擊。
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>模擬微博發布框</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<p>
<textarea cols="30" rows="10" placeholder="請輸入內容" ng-model="mainctrl.txt"></textarea>
<span ng-style="mainctrl.getColor()">{{mainctrl.txt.length}}/140字</span>
</p>
<p>
<input type="button" value="發布" ng-disabled="mainctrl.txt.length > 140"/>
<input type="button" value="清空" ng-click="mainctrl.reset()" ng-disabled="mainctrl.txt.length == 0"/>
</p>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.txt = "";
var self = this;
this.getColor = function(){
return self.txt.length >= 140 ? {"color": "red"} : {"color": "#333"};
};
this.reset = function(){
self.txt = "";
}
}]);
</script>
</body>
</html>
模擬表格
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>模擬表格</title>
<meta charset="utf-8" />
<style type="text/css">
.table_wrap{
width: 600px;
margin: 0 auto;
}
table, tr, td, th{
border-bottom: 1px solid #333;
border-collapse: collapse;
}
th{
cursor: pointer;
}
th, td{
width: 20%;
line-height: 150%;
}
tr:nth-child(2n){
background-color: #eee;
}
.form_box{
background-color: skyblue;
padding: 10px;
width: 400px;
margin-top: 10px;
}
</style>
<script type="text/javascript" src="js/lib/angularjs/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
<div class="table_wrap">
<table>
<tr>
<th ng-click="mainctrl.changeSort('sid')">
學號
<span ng-show="mainctrl.sortBy == 'sid'">{{mainctrl.getSortSign()}}
</span>
</th>
<th ng-click="mainctrl.changeSort('name')">
姓名
<span ng-show="mainctrl.sortBy == 'name'">{{mainctrl.getSortSign()}}
</span>
</th>
<th ng-click="mainctrl.changeSort('Chinese')">
語文成績
<span ng-show="mainctrl.sortBy == 'Chinese'">{{mainctrl.getSortSign()}}
</span>
</th>
<th ng-click="mainctrl.changeSort('Math')">
數學成績
<span ng-show="mainctrl.sortBy == 'Math'">{{mainctrl.getSortSign()}}
</span>
</th>
<th ng-click="mainctrl.changeSort('English')">
英語成績
<span ng-show="mainctrl.sortBy == 'English'">{{mainctrl.getSortSign()}}
</span>
</th>
<th>刪除</th>
</tr>
<tr ng-repeat="item in mainctrl.data">
<td>{{item.sid}}</td>
<td>{{item.name}}</td>
<td>{{item.Chinese}}</td>
<td>{{item.Math}}</td>
<td>{{item.English}}</td>
<td><input type="button" value="刪除" ng-click="mainctrl.delete(item.sid)"></td>
</tr>
</table>
</div>
<div class="form_box">
<p>
學號：<input type="text" ng-model="mainctrl.form_obj.sid">
</p>
<p>
姓名：<input type="text" ng-model="mainctrl.form_obj.name">
</p>
<p>
語文：<input type="text" ng-model="mainctrl.form_obj.Chinese">
</p>
<p>
數學：<input type="text" ng-model="mainctrl.form_obj.Math">
</p>
<p>
英語：<input type="text" ng-model="mainctrl.form_obj.English">
</p>
<p>
<input type="button" value="插入" ng-click="mainctrl.add()">
</p>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.data = [
{"sid":1002, "name":"小黎", "Chinese":102, "Math":134, "English":109},
{"sid":1003, "name":"小東", "Chinese":112, "Math":114, "English":112},
{"sid":1004, "name":"小董", "Chinese":132, "Math":105, "English":111},
{"sid":1005, "name":"小烈", "Chinese":92, "Math":134, "English":144},
]
//表單對象，供雙向數據綁定用的。AngularJS不能碰DOM，它改變的是數據，數據變化了，DOM自動變化。
this.form_obj = {};
//數據備份。
var self = this;
//增加
this.add = function(){
self.data.push(self.form_obj);
self.form_obj = {};
};
//刪除
this.delete = function(sid){
for(var i = 0; i < self.data.length; i++){
if(self.data[i].sid == sid){
self.data.splice(i, 1);
}
}
};
//按誰排序
this.sortBy = "sid";
//升序還是降序,true表示升序
this.asc = true;
this.getSortSign = function(){
return self.asc ? "▼" : "▲";
};
//排序
this.changeSort = function(key_name){
if(key_name == self.sortBy){
self.asc = !self.asc;
}else{
self.sortBy = key_name;
self.asc = true;
}
self.data.sort(function(a, b){
if(a[self.sortBy] > b[self.sortBy]){
return self.asc ? 1 : -1;
}else{
return self.asc ? -1 : 1;
}
})
};
}]);
</script>
</body>
</html>
表單驗證
兩個條件
- 需要驗證的控件必須有ng-model屬性；
- form必須有name屬性。
要想驗證表單，必須符合上面兩個條件；只要符合上面兩個條件，表單就開始驗證了。
<body ng-controller="MainCtrl as mainctrl">
<form name="myform">
<p>
姓名：<input type="text" required ng-model="mainctrl.formobj.name">
</p>
</form>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('MainCtrl', [function(){
this.formobj = {};
}])
</script>
</body>
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>表單驗證</title>
<meta charset="utf-8" />
<style type="text/css">
body {
font-size: 16px;
font-family: "微軟雅黑";
}
span {
font-size: 12px;
}
.passwordstrengthbar {
width: 100px;
height: 20px;
}
.s1 {
background-color: red;
}
.s2 {
background-color: orange;
}
.s3 {
background-color: yellow;
}
.s4 {
background-color: lightseagreen;
}
.s5 {
background-color: green;
}
</style>
<script
type="text/javascript"
src="js/lib/angularjs/angular.min.js"
></script>
</head>
<body ng-controller="MainCtrl as mainctrl">
{{mainctrl.formobj}}
<form name="myform">
<p>
*姓名：<input
type="text"
required
name="name"
ng-model="mainctrl.formobj.name"
ng-pattern="/^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/"
/>
<span ng-show="myform.name.$dirty && myform.name.$error.required"
>請填寫用戶名</span
>
<span ng-show="myform.name.$error.pattern">不合法的姓名</span>
</p>
<p>
*年齡：
<input
type="number"
name="age"
required
ng-model="mainctrl.formobj.age"
min="7"
max="18"
/>
<span ng-show="myform.age.$dirty && myform.age.$error.required"
>請填寫年齡</span
>
<span ng-show="myform.age.$error.max">最大為18歲</span>
<span ng-show="myform.age.$error.min">最小為7歲</span>
</p>
<p>
*密碼：
<input
type="password"
name="password"
required
ng-model="mainctrl.formobj.password"
ng-minlength="6"
/>
<span
ng-show="myform.password.$dirty && myform.password.$error.required"
>請填寫密碼</span
>
<span ng-show="myform.password.$error.minlength">最短長度6位</span>
<span ng-show="mainctrl.passwordScore < 3">密碼強度不夠</span>
</p>
<p
class="passwordstrengthbar"
class="s5"
ng-class="mainctrl.getStrengthClass()"
ng-show="myform.password.$valid"
>
{{mainctrl.passwordtip}}
</p>
<p>
網址：
<input type="url" name="url" ng-model="mainctrl.formobj.url" />
<span ng-show="myform.url.$error.url">網址格式不正確</span>
</p>
<p>
<input
type="button"
value="提交"
ng-disabled="myform.$invalid || mainctrl.passwordScore < 3"
/>
</p>
</form>
<script type="text/javascript">
var app = angular.module("myapp", []);
function checkStrength(password) {
var lv = 0;
if (!password) {
return;
}
if (password.match(/[a-z]/g)) {
lv++;
}
if (password.match(/[0-9]/g)) {
lv++;
}
if (password.match(/([A-Z])/g)) {
lv++;
}
if (password.match(/([\!\@\#\$\%\^\&\*\?\/\|\\])/g)) {
lv += 2;
}
if (password.length < 6) {
lv = 0;
}
if (lv > 5) {
lv = 5;
}
return lv;
}
app.controller("MainCtrl", [
function () {
this.formobj = {};
this.passwordtip = "";
this.getStrengthClass = function () {
this.passwordScore = checkStrength(this.formobj.password);
console.log(this.passwordScore);
if (this.passwordScore == 1) {
this.passwordtip = "不安全";
} else if (this.passwordScore == 2) {
this.passwordtip = "較不安全";
} else if (this.passwordScore == 3) {
this.passwordtip = "安全";
} else if (this.passwordScore == 4) {
this.passwordtip = "較安全";
} else if (this.passwordScore == 5) {
this.passwordtip = "特別安全";
}
return "s" + this.passwordScore;
};
},
]);
</script>
</body>
</html>
浙公網安備 33010602011771號