Angularjs简单的$http通信

关于Angularjs的简单通信,Angularjs主要是由$http服务和后端进行通信,而Controller主要是控制界面的展示,demo代码如下:

 

<!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,给自己加深印象吧。

      

posted @ 2017-08-18 11:36  糖粑粑  阅读(198)  评论(0编辑  收藏  举报