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