AngularJS

angularjs介紹

angularjs是谷歌的一款前端框架

作用：前端mvc三層體系架構,，可以在前端大量寫業務代碼，分層開發。低耦合，方便擴展。

前端MVC：

Model:數據,其實就是angular變量($scope.XX);
$scope是angularjs的內置對象, $scope中有請求的數據有響應的數據, 還有方法也都放進去. 它的作用域範圍是當前頁面
View: 數據的呈現,Html+Directive(指令);
view=html頁面 + 指令(也就是頁面上的事件)
Controller:操作數據,就是function,數據的增刪改查;

angularjs表達式

如果需要用angularjs必須在頁面引入核心包<script src="angular.min.js"></script>
如果使用angularjs必須在頁面body標籤上寫上ng-app，表示使用angularjs應用
表達式, 頁面如果需要展示數據需要用兩個大括號{{表達式或者變量}}

例子

<html>
<head>
	<meta charset="utf-8" >
	<title>入門小Demo-1(表達式)</title>
	<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>

結果

angularjs雙向綁定

ng-model指令是給input框起名, 後臺如果接收表單數據, 就可以根據ng-model中的屬性名獲取值, 頁面也可以根據ng-model來獲取這個input框對象, ng-model中的值是放入當前頁面的$scope中保存（相當於id和name屬性二合一）
$scope是angularjs的內置對象, $scope中有請求的數據有響應的數據, 還有方法也都放進去. 它的作用域範圍是當前頁面

例子

<html>
<head>
	<title>入門小Demo-1  (雙向綁定)</title>
	<meta charset="utf-8" >
	<script src="angular.min.js"></script>
</head>
<body ng-app>
請輸入你的姓名：<input ng-model="myname">
<br>
{{myname}},你好
</body>
</html>

在對話框中輸入值，下面也會跟着變化

angularjs初始化指令

ng-init指令: angularjs中只要頁面一加載首先執行ng-init中的操作

例子：

<html>
<head>
    <meta charset="utf-8" >
	<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>

頁面一加載，輸入框中就會出現陳大海

angularjs控制器

var app=angular.module('myApp',[]); 定義了一個叫myApp的模塊, 定義後在body標籤上聲明使用的模塊名稱
app.controller('myController',function($scope)在模塊中聲明控制器, 定以後需要在body標籤上聲明使用的控制器

例子

<html>
<head>
    <meta charset="utf-8" >
	<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>

可以進行加法運算

angularjs事件指令

ng-click鼠標單擊指令: 就是鼠標單擊事件

例子

<html>
<head>
    <meta charset="utf-8" >
	<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>

點擊按鈕，進行加法運算

angularjs循環數組

<tr ng-repeat="qqq in list">循環遍歷: ng-repeat是循環指令, 裏面in關鍵字後面是需要遍歷的集合變量,in前面是我們自己起名的一個臨時變量, 每一次循環都會將循環出來的數據賦值給我們的臨時變量, 在循環下就可以使用兩個大括號將循環出來的值展示到頁面上.

一、 angularjs循環數組

<html>
<head>
    <meta charset="utf-8" >
	<title>入門小Demo-6  (循環數據)</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="aaa in list">
	<td>{{aaa}}</td>
</tr>
</table>
</body>
</html>

二、angularjs循環對象數組

<html>
<head>
    <meta charset="utf-8" >
	<title>入門小Demo-7  (循環對象數組)</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>

三、向數組中添加或刪除元素

創建數組

$scope.selectIds=[];//選中的ID集合

添加元素push

$scope.selectIds.push( id);

刪除元素splice

var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx, 1);//刪除

angularjs內置服務

$http是angularjs的內置對象, 主要做發送http請求並且是ajax請求, $http.get是發送get請求, $http.post是發送post請求.
$event是angularjs中的內置對象, 作用是從$event當中可以獲取當前操作的事件是什麼.例如如果是複選框那麼可以中裏面知道是勾選還是取消勾選

<html>
<head>
    <meta charset="utf-8" >
	<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>

angularjs分頁

一、引入分頁插件

<!-- 分頁組件開始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分頁組件結束 -->

二、構建app模塊時引入pagination模塊

var app=angular.module('pinyougou',['pagination']);//定義品優購模塊

三、放置分頁組件

 <!-- 分頁 -->
<tm-pagination conf="paginationConf"></tm-pagination>

四、在brandController中添加分頁的js代碼

//重新加載列表 數據
$scope.reloadList=function(){
	 //切換頁碼  
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分頁控件配置 
$scope.paginationConf = {
		 currentPage: 1,
		 totalItems: 10,
		 itemsPerPage: 10,
		 perPageOptions: [10, 20, 30, 40, 50],
		 onChange: function(){
		        	 $scope.reloadList();//重新加載
		 }
}; 
//分頁
$scope.findPage=function(page,rows){	
	$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
			function(response){
				$scope.list=response.rows;	
				$scope.paginationConf.totalItems=response.total;//更新總記錄數
			}			
	);
}

五、編寫後端代碼，獲取總條數和所有的brand數據

JavaEE學習日誌(一百一十四): 前端框架AngularJS入門

AngularJS

angularjs介紹

angularjs表達式

angularjs雙向綁定

angularjs初始化指令

angularjs控制器

angularjs事件指令

angularjs循環數組

angularjs內置服務

angularjs分頁

[轉帖]

python列出centos7內存使用前50的進程信息

Garnet：微軟官方基於.NET開源的高性能分佈式緩存存儲數據庫

Java響應式編程

評估統計算法在銀行僞造鈔票檢測中的價值

nginx負載均衡器的部署與配置

品優購項目筆記（十四）：微信支付

Mycat數據庫集羣中間件

品優購項目筆記（十三）：購物車解決方案

品優購項目筆記（十二）：用戶中心之cas單點登錄

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結