Angularjs簡單的$http通訊

時間 2019-11-08

原文原文鏈接

關於Angularjs的簡單通訊，Angularjs主要是由$http服務和後端進行通訊，而Controller主要是控制界面的展現，demo代碼以下：javascript

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title ng-bind="title"></title>
	</head>
	<body ng-controller="demoCtrl">
		<table border="1" cellspacing="1" cellpadding="1">
			<tr>
				<th>序號</th>
				<th>url</th>
				<th>name</th>
			</tr>
			<tr ng-repeat="dt in dataTotal track by $index">
				<td ng-bind="$index + 1"></td>
				<td ng-bind="dt.url"></td>
				<td ng-bind="dt.name"></td>
			</tr>
		</table>
	</body>
</html>
<script type="text/javascript" src="js/angular/angular.js"></script>
<script>
	var app = angular.module('myApp', []);
	app.controller('demoCtrl', ['$rootScope', '$scope', 'demoService', function($rootScope, $scope, demoService) {
		$rootScope.title = '測試例子';
		console.log($rootScope.title);
		demoService.info().then(function(data) {
			console.log(data.data.data[0].url)
			$scope.dataTotal = data.data.data;
			console.log("dataTotal:");
			console.log($scope.dataTotal);
		});
	}]);
	app.service('demoService', ['$http', function($http) {
		var user = {};
		
		user.info = function() {
			return $http.get('test.json').success(function(resp) {
				console.log("data is:")
				console.log(resp.data)
				var data1 = {
					name: '谷歌',
					url: 'www.google.com'
				}
				return resp.data.push(data1);
			});
		};
		
		return user;
	}]);
</script>

　　Angularjs用的是MV*模式，Controller + Model + View ，這和java裏面的spring框架很像，若是學過Java再來學習前端框架Angularjs，相信會很容易，Angularjs裏面的service至關於spring 裏的bean文件。並且其兩者的中心思想都是依賴注入，對於我這樣的前端小白來講，簡單的應用實現，仍是沒什麼問題，真正的深刻Angularjs，可能還要一段時間，這段時間更新下相關的demo，給本身加深印象吧。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。