【MVVM】- AngularJS基礎學習
阿新 • • 發佈：2019-02-28
Angular JS
AngularJS 基礎入門案例
外觀頁面
<!-- 定義angularJS程式碼的工作域：類似avalon ms-controller --> <body ng-app=""> <!-- 建立變數various並放入Scope變數，angularJS工作域裡面實現共享：input,select,textarea標籤適用 --> Your name: <input type="text" ng-model="various" placeholder="World"> <hr> <!-- 插值表示式直接取出scope域中名為various值，否則顯示預設值World! --> Hello {{various || 'World'}}!<br> <!-- ng-bind將當前html元素的text屬性和scope的various繫結,適用表示式--> ng-bind01:<span ng-bind="(various || 'span bind')"></span>!<br> <!-- 注意input select textarea的資料繫結只能適用ng-model --> ng-bind02:<input type="text" ng-model="various" placeholder="input model!"> <hr> <!-- ng-init:初始化變數，但是不會與當前html元素進行資料繫結,注意init可以初始化多個變數，';'隔開 --> ng-init:<span ng-init="name='zhangsan'"></span>{{name}}<br> ng-init value:<span ng-bind="name"></span> </body>
AngularJS 模組
模組是應用控制器的容器，Angularjs程式碼依賴Jquery，在使用angualrjs程式碼時，Jquery指令碼檔案須在AngularJS指令碼之前載入， 此外一般將指令碼程式碼放置在body元素的底部是為了提供網頁的載入速度，因 HTML 載入不受制於指令碼載入： 換句話說指令碼和html程式碼載入時分開的，為了提供網頁的載入速度，可以先將頁面顯示的html先載入完成後，再載入指令碼檔案
注意：1個html中只有1個應用，因此頁面只有一個模組，如果存在多個以第一個為準
外觀頁面
<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div>
js操作邏輯
/* * app: 模組物件 * myApp: 模組名 * []: 表示該模組依賴的模組陣列，類似Java中的jar包依賴 * * myCtrl： 表示模組下掛載的控制器 * $scope: 作用域，這裡控制器作用範圍定義2個屬性：firstName 和 lastName， 主要用於模型與檢視之間的資料同步(vm部分) */ var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "Squirrel"; $scope.lastName = "Hello"; });
AngularJS 控制器
外觀頁面
<body ng-app="myApp" ng-controller="myCtrl">
<h2>AngularJS 函式繫結</h2>
<textarea ng-model="message" cols="40" rows="10"></textarea>
<p>
<button ng-click="save()">儲存</button>
<button ng-click="clear()">清除</button>
</p>
<p>
剩餘字數: <span ng-bind="left()"></span>
</p>
<!-- AngualrJS的顯示、隱藏邏輯控制指令：類似avalon 的 ms-visible和knockout的visible指令 -->
<div ng-show="flag">
結果：<font color="red">
<span ng-bind="result"></span>
</font>
</div>
js操作邏輯
/**
* AngularJS 將屬性、函式視為controller的平等成員，可按照訪問普通屬性的方式呼叫函式
*/
var app = angular.module("myApp", []);
/*
* 定義控制器 myCtrl， 並且作用域定義普通屬性和函式
*/
app.controller("myCtrl", function($scope) {
$scope.message = "";
$scope.result="";
$scope.flag=false;
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {
$scope.message = "";
$scope.result= $scope.message;
$scope.flag = false;
};
$scope.save = function() {
$scope.result= $scope.message;
$scope.flag=true;
};
});
AngularJS 控制器作用範圍
$scope 代表檢視與資料模型的中間層：scope中的物件 model和view 共享，並且資料是雙向同步
雙向同步: $scope中的物件與檢視元素繫結，一方發生資料更新，另一方自動同步更新
controller作用域：負責controller標籤包裹的元素的資料處理，如果子元素巢狀Controller,則相應的子元素的作用Controller以距離子元素最近的為準(這種最近作用原則在Jmeter測試框架，avalon的ms-controller同樣體現)
外觀頁面
<!-- 指定應用名及控制器 -->
<body ng-app="myApp">
<div ng-controller="myCtrl01">
<p>myCtrl01的作用域</p>
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
<hr/>
<p>myCtrl02的作用域</p>
<div ng-controller="myCtrl02">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>
js操作邏輯
var app = angular.module('myApp', []);
//定義控制器myCtrl01
app.controller('myCtrl01', function($scope) {
/*
* 後臺向scope域中存放物件：頁面存放的標籤：
* ng-init 初始化變數
* ng-model:初始化變數並進行數繫結
*/
$scope.firstName= "John";
$scope.lastName= "Doe";
});
//定義控制器myCtrl02
app.controller('myCtrl02', function($scope) {
$scope.firstName= "Hello";
$scope.lastName= "Python";
});
AngularJS 運算表示式
外觀頁面
<body ng-app="">
<div ng-init="quantity=1;cost=5;array=[1,2,3,4];person={'name':'zhangsan','age':'20'}">
quantity:<span>{{quantity}}</span><br>
插值表示式等價於：<span ng-bind="quantity"></span><br><br>
<!-- angular表示式支援運算 -->
總價：<span>{{"quantity*cost="+quantity*cost}}</span><br>
<!-- < html元字元：'<' -->
邏輯運算：<span>{{quantity<2?quantity:cost}}</span><br>
陣列取值：<span>{{array[2]}}</span><br>
物件屬性取值：<span>{{person.name}}</span>
</div>
AngularJS 表格操作
css樣式
table, td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
外觀操作
<body ng-app="">
<div ng-init="persons=[{'name':'zhangsan','age':'20'},
{'name':'lisi','age':'19'},
{'name':'lisi','age':'19'}]">
<table>
<!-- $odd:下標為奇數的元素 $even:下標為偶數的元素 -->
<tr ng-repeat="x in persons">
<!-- 獲取元素的下標值 -->
<td>{{$index+1}}</td>
<!-- ng-if類似ms-if進行布林值判斷顯示 -->
<td ng-if="$odd" style="background-color:yellow"> {{ x.name }}</td>
<td ng-if="$even">{{ x.name }}</td>
<td ng-if="$odd" style="background-color:green"> {{ x.age }}</td>
<td ng-if="$even">{{ x.age }}</td>
</tr>
</table>
<span>{{persons[0]}}</span>
</body>
AngularJS 表單操作
外觀頁面
<div ng-app="myApp" ng-controller="myCtrl">
<!-- novalidate:當提交表單時不對錶單資料（輸入）進行驗證 -->
<form novalidate>
First Name:<input type="text" ng-model="user.firstName"><br>
Last Name:<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>
<font color="red">initInfo = {{initInfo}}</font>
</p>
</div>
js操作邏輯
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.initInfo = {firstName:"squirrel", lastName:"Python"};
$scope.reset = function() {
// user物件等於master物件：深複製
$scope.user = angular.copy($scope.initInfo);
};
//JS掃描指令碼時會自動呼叫reset方法進行輸入框資訊的初始化（函式自動呼叫）
$scope.reset();
});
AngualrJS 表單元素繫結
- ng-disabled: 繫結控制元件的disabled屬性
- ng-show: 顯示或者隱藏元素：ms-visible
- ng-hide: 與ng-show功能恰好相反
css樣式
div.d1{
width: 20px;
height: 20px;
background-color: pink;
}
div.d2{
width: 20px;
height: 20px;
background-color: black;
}
外觀頁面
<body ng-app="myApp" ng-controller="myctr">
<div>
請輸入：<input type="text" placeholder="....." ng-disabled="flag">{{flag}}<br>
切換輸入：<input type="button" value="switch input" ng-click="switchInput();">
</div>
<hr ng-init="checkValue=false">
input:<input type="text" ng-disabled="checkValue">{{checkValue}}<br>
<input type="checkbox" ng-model="checkValue">stop input <!-- 注意ng-model不能作用於單選框 -->
<hr>
<p>ng-show:flag</p>
<div class="d1" ng-show="flag"></div>
<p>ng-hide:checkValue</p>
<div class="d2" ng-hide="checkValue"></div>
<hr>
<!-- ng-click：後面可以直接跟表示式，表示式會直接執行，變數不支援++操作 -->
<input type="button" ng-click="count = count + 1" value="加1">：{{count}}
js操作邏輯
var app = angular.module('myApp', []);
app.controller('myctr', function($scope) {
$scope.flag=false;
$scope.count=0;
$scope.switchInput=function(){
$scope.flag=!$scope.flag;
};
});
AngularJS 表單驗證
ng-model作用：
- ng-model 指令可將輸入域的值與 AngularJS 建立的變數繫結
- 雙向繫結，在修改輸入域的值時， AngularJS 屬性的值也將修改
- 資料校驗
- ng-model 指令可為應用資料提供狀態值(invalid, dirty, touched, error)
- ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類
css樣式
/*angularJS會根據表單的狀態進行新增或者刪除對應的樣式*/
/*定義輸入框不合法的預設背景顏色*/
input.ng-invalid {
background-color: grey;
}
/*輸入框資料合法的預設背景顏色*/
input.ng-valid {
background-color: yellow;
}
外觀頁面
<body ng-app="myApp">
<div ng-controller="myCtrl">
<!-- 將表單輸入域的值與angularJS的變數繫結 -->
名字: <input ng-model="name"><br>
angularJS雙向繫結：{{name}}
</div>
<hr>
<p>表單輸入資訊校驗</p>
<form name="myForm01">
Email:<input type="email" name="myEmail01" ng-model="text">
<!-- ng-show:類似avalon的ms-if的用法，如果校驗不通過則返回true,顯示提示內容，資料校驗不太精確 -->
<span ng-show="myForm01.myEmail01.$error.email" style="color: red">郵箱地址不合法!</span><br>
資料校驗結果：<span>{{myForm01.myEmail01.$error.email}}</span>
</form>
<hr>
<p>
ng-model 指令可以為應用資料提供狀態值(invalid, dirty, touched, error)
</p>
<form name="myForm02" ng-init="myText='[email protected]'">
Email:<input type="email" name="myEmail02" ng-model="myText" required> <!-- required標識不能為空，否則不合法 -->
<h5>狀態</h5>
<!-- 通過識別表單的email控制元件按照預設的規則進行校驗 -->
資料輸入合法：{{myForm02.myEmail02.$valid}} <br>
資料改變：{{myForm02.myEmail02.$dirty}} <br>
觸屏點選： {{myForm02.myEmail02.$touched}}
</form>
<hr>
<p>ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類</p>
<form name="myForm03">
輸入你的名字:<input name="myName" ng-model="text" required>
&l