小猿圈解读利用Angular.JS读取数据库数据调用完整实例
学习web前端的小伙伴越来越多，学习中遇到的问题也随之而来，不管是学习方法上面还是学习知识点上面都会遇到很多，今天小猿圈web前端讲师就分享利用Angular.JS读取数据库数据调用完整实例，希望对于学习web前端的你有所帮助。https://upload-images.jianshu.io/upload_images/15397392-cc297ef44b0bb0fa.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240以下是实例代码：<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><style>table{position:relative;}table, th , td {border: 1px solid grey;border-collapse: collapse;padding: 10px 20px;}table tr:nth-child(odd) {background-color: #f1f1f1;}table tr:nth-child(even) {background-color: #ffffff;}i{display:block;background:url(buffer.gif) no-repeat;position:absolute;left:50%;margin-left:-16px;top:50px;width:32px;height:32px;}</style></head><body><center style="margin-top:100px;"><div ng-app="myApp" ng-controller="customersCtrl"><h3>数据统计</h3><table><tr><th>活动编号</th><th>活动名称</th><th>点击量</th><th>最后访问时间<i id="buffer"></i></th><th>所属栏目</th></tr><tr ng-repeat="x in names"><td>{{ x.sid }} </td><!--活动编号--><td>{{ x.sname }} </td><!--活动名称--><td>{{ x.sclick }} 次</td><!--点击量--><td>{{ x.stime | date:'yyyy-MM-dd HH:mm:ss' }}</td><!--最后访问时间--><td>{{ x.sproject }}</td><!--所属栏目--></tr></table></div></center><script>var buffer = document.getElementById("buffer");buffer.style.display = 'block';var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {$http.get("Customers_MySQL.php").success(function (response) { $scope.names = response; buffer.style.display = 'none';//成功调取数据之后});//成功调取mysql数据，将response.records改为response,因为它是个对象});</script></body></html>以上就是关于小猿圈web前端讲师对于Angular.JS读取数据库数据调用完整实例的全部内容，你是否对学习前端有一定的兴趣了呢？但是很对人在学习前端的过程中web前端自学②群：738735873，极大部分刚入门或者在从事前端的小伙伴，在学习的过程中遇到很多难题难以解决，或者很难发现自己的问题所在，耗费很大精力也无法得到提升。可以到小猿圈为你解决问题，并且帮助你提升职业技能。
页:
[1]