AngularJS實用入門

AngularJS的簡介

AngularJS 誕生於 2009 年，由 Misko Hevery 等人創建，後爲 Google 所收購。是一款優秀的前端 JS 框架，已經被用於 Google 的多款產品當中。AngularJS 有着諸多特性，最爲核心的是：MVC、模塊化、自動化雙向數據綁定、依賴注入等等

一，AngularJS 四大特徵

1.MVC模式

Angular 遵循軟件工程的 MVC 模式,並鼓勵展現，數據，和邏輯組件之間的鬆耦合.通過依賴注入（dependency injection），Angular 爲客戶端的 Web 應用帶來了傳統服務端的服務，例如獨立於視圖的控制。因此，後端減少了許多負擔，產生了更輕的 Web 應用。

2.數據的雙向綁定

雙向的數據綁定允許模型和視圖之間數據的自動同步

3.依賴注入

依賴注入(Dependency Injection,簡稱 DI)是一種設計模式, 指某個對象依賴的其他對象無需手工創建，此對象在創建時，其依賴的對象由框架來自動創建並注入進來,其實就是最少知識法則;模塊中所有的 service 和 provider 兩類對象，都可以根據形參名稱實現 DI.

4.模塊化設計

高內聚低耦合法則
1)官方提供的模塊 ng、ngRoute(主要實現路由功能)、ngAnimate(實現一些動畫效果)
2)用戶自定義的模塊 angular.module(‘模塊名’,[ ])

二，AngularJs的下載
1.下載網址：http://www.angularjs.net.cn/download/

2.AngularJS的常用屬性

ng-app 在任何元素上使用，代表 angular 應用作用域
ng-controller 指定控制器
ng-model 指定模型
ng-bind 或者 {{屬性名}} 進行屬性取值用於顯示

三，AngularJs的常用操作

1.雙向綁定 ng-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs數據雙向綁定</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<!--ng-app指令是AngularJs程序執行的入口-->
	<body ng-app>
		<input  type="text" ng-model="name"/>
		<!--AngularJs的表達式:{{變量或方法等}}等價於ng-bind指令，進行屬性取值，用於顯示數據  -->
		{{name}}
	</body>
</html>

2.初始化指令 ng-init

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs初始化指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
	</head>
	<!--ng-app指令是AngularJs程序執行的入口    ng-init:可以在頁面加載時，執行一些的操作-->
	<body ng-app ng-init="name='張三'">
		<input  type="text" ng-model="name"/>
		<!--AngularJs的表達式:{{變量或方法等}}等價於ng-bind指令，進行屬性取值，用於顯示數據  -->
		{{name}}
	</body>
</html>

3.控制器ng-controller

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs控制器</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		
		<script type="text/javascript">
			//定義一個模塊
			var app = angular.module('myApp',[]);
			
			//定義一個控制器  在定義一個控制器前，必須定義模塊 
			//$scope是視圖與控制器之間數據交換的橋樑
			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  type="text" ng-model="x"/><br />
		Y:<input  type="text" ng-model="y"/><br />
		
		結果:{{add()}}
	</body>
</html>

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

4.事件指令 ng-click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJs事件指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		
		<script type="text/javascript">
			//定義一個模塊
			var app = angular.module('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" ng-init="val='運算'">
		X:<input  type="text" ng-model="x"/><br />
		Y:<input  type="text" ng-model="y"/><br />
		
		<!--ng-bind 或者 {{屬性名}} 進行屬性取值 用於顯示-->
		<button ng-bind="val" ng-click="add()"></button><br />
		
		結果:{{z}}
	</body>
</html>

5.循環數組 ng-repeat

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJs事件指令</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>

		<script type="text/javascript">
			//定義一個模塊
			var app = angular.module('myApp', []);

			//定義一個控制器  在定義一個控制器前，必須定義模塊
			app.controller('MyController', function($scope) {
				$scope.array = [1, 2, 3, 4, 5]
			})
		</script>
	</head>
	<!--模塊名和控制器名寫上面自己定義的-->

	<body ng-app="myApp" ng-controller="MyController">
		<table>
			<tr ng-repeat="x in array">
				<td>{{x}}</td>
			</tr>
		</table>
	</body>

</html>

6.內置服務 $http

我們的數據一般都是從後端獲取的，那麼如何獲取數據呢？我們一般使用內置服務$http 來實現從後端獲取數據。博主爲了方便演示，數據不再從後端進行獲取，創建一個data.json文件，存放一些數據，用於模擬從後端獲取的數據。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJs內置服務$http</title>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>

		<script type="text/javascript">
			//定義一個模塊
			var app = angular.module('myApp', []);

			//定義一個控制器  在定義一個控制器前，必須定義模塊
			app.controller('MyController', function($http,$scope) {
				$scope.findAll = function(){
					$http.get('js/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>

7.路由模塊ngRoute的使用

我們在實際開發項目的過程中，許多頁面的head和footer都是相同的，我們只需要改變body部分的內容。AngularJS中的ngRoute模塊就是用來實現這一功能的。

在頁面引入 angular 的 js ，route 的 js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS的路由功能</title>
		<h1>頁面的Head部分</h1>
		<a href="#/JavaEE">JavaEE</a>
		<a href="#/QKL">區塊鏈</a>
		<a href="#/Python">Python</a>
		<!--引入AngularJs文件-->
		<script type="text/javascript" src="js/angular.min.js"></script>
		<!--引入ngRoute模塊的js文件-->
		<script type="text/javascript" src="js/angular-route.min.js"></script>
			
		<script type="text/javascript">
			//定義一個模塊  注意：使用路由功能，必須引入ngRoute模塊才能進行使用
			var app = angular.module('myApp',['ngRoute']);
			
			//設置路由對應的頁面  otherwise：用於設置默認想要顯示的頁面
			app.config(['$routeProvider',function($routeProvider){
				$routeProvider.when('/QKL',{
					templateUrl:'區塊鏈.html'
				}).when('/JavaEE',{
					templateUrl:'JavaEE.html'
				}).when('/Python',{
					templateUrl:'Python.html'
				}).otherwise({
					//默認顯示的頁面，必須是上面設置的路由中的其中一個
					redirectTo:'/Python'
				});
			}])
				
		</script>
	</head>
		
	<body ng-app="myApp">
		
		<!--用於顯示不同頁面的內容-->
		<!--ng-view用於顯示路由調用的頁面-->
		<div ng-view>
			
		</div>
	 
	</body>
	
		
	<footer>
		<h1>頁面的Footer部分</h1>
	</footer>
</html>

注意事項：

分享示例代碼在碼雲上的地址：https://gitee.com/xiaoguixiaogege/AngularJS

AngularJS實用入門

CAS單點登錄原理分析(一)

CAS單點登錄的實現(二)

CAS單點登錄原理分析

服務器集羣環境下session的共享問題

Redis的使用及Spring-data-redis對Redis的簡化開發

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結