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