您的当前位置:首页Angular.JS读取数据库数据调用完整实例
广告

Angular.JS读取数据库数据调用完整实例

2023-12-06 来源:菲特宠物网

本文实例讲述了Angular.JS读取数据库数据调用。分享给大家供大家参考,具体如下:

以下是实例代码:

<!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>

更多关于AngularJS相关内容可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

小编还为您整理了以下内容,可能对您也有帮助:

angularjs怎么从数据库获取数据

function ctrl($http,$scope){

var url = '../login/save.html',

transFn=function(obj) {

var str = [];

for(var p in obj){

str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));

}

return str.join("&").toString();

};

$scope.login = function(user){

var data=transFn(user);

$http.post(url+"?"+data).success(function(data, status, headers, config){

if (data.success){

}else{

}

}).error(function(data, status, headers, config){

alert("error");

});

};

}

如何通过AngularJs从后台取数据

为了实现这一点,Angular提供了一个叫做$http的服务。它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易。它支持HTTP、JSONP和CORS方式。它还包含了安全性支持,避免JSON格式的脆弱性和XSRF。它让你可以轻松地转换请求和响应数据,甚至还实现了简单的缓存。

例如,我们打算让购物站点从服务器上获取商品信息,而不是从内存假数据获取。如何编写服务端代码已经超越了本书的范畴,所以,我们仅仅来想象一下,比方说我们已经创建了一个服务器,当查询/procts 路径时,它会以JSON格式返回一个商品列表。

返回的响应示例如下:

[

{

"id": 0,

"title": "Paint pots",

"description": "Pots full of paint",

"price": 3.95

},

{

"id": 1,

"title": "Polka dots",

"description": "Dots with that polka groove",

"price": 12.95

},

{

"id": 2,

"title": "Pebbles",

"description": "Just little rocks, really",

"price": 6.95

}

...etc...

]

我们可以像下面这样编写查询代码:

function ShoppingController($scope, $http) {

$http.get('/procts').success(function(data, status, headers, config) {

$scope.items = data;

});

}

然后在模板中这样使用它:

<body ng-controller="ShoppingController">

<h1>Shop!</h1>

<table>

<tr ng-repeat="item in items">

<td>{{item.title}}</td>

<td>{{item.description}}</td>

<td>{{item.price | currency}}</td>

</tr>

</table>

</div>

</body>

正如我们前面讲过的,从长远来看,让服务来代理与服务器交互的工作对我们有好处,这个服务可以被多个控制器共享。

在AngularJs中父子页面如何相互调用方法和接收值

因为AngularJs用的人不多,我发现网上关于这方面的文章不多,所以我分享一下在AngularJs中是如何调用和接收的。

<app-dialog></app-dialog>其中dialog是子页面文件夹的名字,只需要把这个标签放在父页面中需要的地方即可。[sessionId]='sessionId',sessionId是父页面中的值,需要传到子页面中去的,父页面中的sessionId是需要定义的,而子页面需要这样来接收父页面中的sessionId,

'#dialogfile'相当于给子页面添加了一个id,在父页面中可以直接通过这个id来接收子页面的值和调用子页面的方法(如果是调用子页面的方法的话,方法名后面是需要加括号的),在父页面中需要这样来定义,

最后是子页面调用父页面的方法。

其中'this'指的就是父页面,而[parent]则是需要在子页面定义的一个名字可以随意更改,

记住调用父页面的方法,方法名后面是需要加括号的,如果有参数的话,直接写在括号里面就好。

如何利用AngularJS服务接入外部API

如何利用AngularJS服务接入外部API

除了轻松对HTML进行扩展的能力之外,AngularJS还提供一套简便途径、帮助我们与外部API实现交互。在今天的教程中,我们将共同探讨如何利用其服务与GitHub的API相对接,进而创建一套简单的库浏览器。

第一步:准备工作

我们就以下面这套基础HTML模板为起点:

<!DOCTYPE html> <html> <head> <title>GitHub Search</title> </head> <body> </body> </html>

现在将AngularJS脚本添加到该文档的<head>当中:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>

在此之后,我们可以在将这套CCS样式添加到行内或者的文件当中:

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; } body, html { margin: 0; } p { margin: 0; } input { width: 100%; } pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } div.repo { border-bottom: 1px solid; cursor: pointer; } #search, #repo, #user { float: left; } #search { width: 20%; } #repo { width: 60%; } #user { width: 20%; }

如大家所见,其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于、用户库同样置于右侧。我们还需要将对应代码行打包至<pre>标签当中,此后我们还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。

当然,大家可以向其中添加更多样式以提升成果的视觉效果——但请注意,本教程中的截图都采取最基本的外观设计。

大家可以未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立文件,但文件仍然需要处于AngularJS脚本之下。

第二步:模块

现在我们可以为自己的应用程序创建一个模块:

var app = angular.mole('githubsearch', []);

接下来利用ngApp指令将其添加到<body>标签当中:

<body ng-app="githubsearch">

第三步:控制器

我们还需要为自己的应用程序准备一套控制器。为了简化创建流程,我们将只为应用准备一套控制器,这样我们就不必考虑如何在不同控制器之间进行信息传递了:

app.controller('SearchController', function SearchController($scope) { });

第四步:基础服务

我们需要对自己的GitHub服务进行定义:

app.factory('GitHub', function GitHub($http) { return { }; });

我们将使用app.factory()方法,这样就能保证返回对象附带几个以后将会用到的方法。我们将使用$http服务从GitHub的API中获取数据。

第五步:搜索库

我们服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单(这项函数能够进入由制造函数返回的对象):

searchRepos: function searchRepos(query, callback) { $http.get('https://api.github.com/search/repositories', { params: { q: query } }) .success(function (data) { callback(null, data); }) .error(function (e) { callback(e); }); }

$http.get()方法是执行GET请求的一种捷径。第一条参数是我们希望访问的URL。第二条参数则代表一个具备选项的对象。这里我们只需要params对象——它是一个查询参数散列,将被添加到该请求当中(其中q参数属于搜索字符串,大家可以点击此处了解更多相关信息)。

$http.get()会返回一项承诺。我们可以将附加在success()与error()上,并且据此调用回调函数。

第六步:搜索栏

为了使用我们在之前几步中定义完成的函数,我们需要在自己的HTML当中添加搜索栏。相关代码非常简单,如下所示:

<div id="search"> <input ng-model="query" placeholder="search" ng-keyup="$event.keyCode == 13 && executeSearch()"> <div class="repo" ng-repeat="repo in repos" ng-click="openRepo(repo.full_name)"> <strong>{{ repo.full_name }}</strong> <p>{{ repo.description }}</p> </div> </div>

我们使用ngModel指令将该输入栏中的值指向至Scope query变量,并在用户按下回车键后利用ngKeyup调用executeSearch()函数(这样$event.keyCode == 13就会进行比较)。我们无法在AngularJS表达式中使用条件语句,但一条简单的逻辑运算符(AND)足以很好地完成这项任务。

在输入域下面,我们使用ngRepeat来显示搜索结果。我们将显示该库的完整名称与描述(如果需要显示其它不同内容,大家可以点击此处查看GitHub API说明文档中的可用域)。

我们还使用ngClick通过该库的完整名称来调用openRepo()函数,这样我们就能显示与之相关的信息。我们稍后再对该函数进行定义。

第七步:使用搜索功能

现在我们终于可以使用自己创建完成的服务了。首先,将GitHub参数添加至控制器函数(这样该服务就能被注入到AngularJS当中):

app.controller('SearchController', function SearchController($scope) {

现在定义executeSearch()函数:

$scope.executeSearch = function executeSearch() { GitHub.searchRepos($scope.query, function (error, data) { if (!error) { $scope.repos = data.items; } }); }

如大家所见,我们利用来自$scope.query的搜索字符串从当中调用GitHub.searchRepos(),而后在回调中将搜索结果(来自data.items)加入$scope.repos变量。

只要执行以上步骤,我们就能顺利显示出搜索结果。在浏览器中打开我们的HTML文件并尝试进行搜索:

第八步:获取库中的数据

现在我们已经获得了搜索功能,可以显示出库中用户所选定的信息内容。下面我们再创建一条函数,旨在通过自己的服务获取来自库的数据:

getRepo: function getRepo(name, callback) { $http.get('https://api.github.com/repos/'+ name) .success(function (data) { callback(null, data); }) .error(function (e) { callback(e); }); }

被传递至此函数的名称必须为完整名称(结构为:作者名称、斜杠、库名称——例如angular/angular.js),这是因为我们需要将其传递至GitHub

API(点击此处查看更多说明)。

第九步:获取库中的README文件

README文件中的内容并未被包含在我们利用以上函数获取到的数据当中。相反,大家需要利用另一个API进行调用及获取,因此我们需要创建以下函数:

getReadme: function getReadme(name, callback) { $http.get('https://api.github.com/repos/'+ name +'/readme') .success(function (data) { callback(null, atob(data.content)); }) .error(function (e) { callback(e); }); }

这条函数与之前我们创建完毕的两条基本相同,只不过对URL进行了变更。我们还要利用atob()函数解码README文件的内容,因为它采用base64编码机制。大家可以点击此处查看GitHub

API说明文档中与获取README文件内容相关的信息。

我们之所以没有将这两条请求塞进同一个函数当中,是因为某些库根本不具备 README文件。如果我们将二者强行结合,应用程序可能因此发生故障。

第十步:显示库信息

我们将在另一个元素<div>当中显示库的完整名称、查看过该库的人数以及README文件:

<div id="repo" ng-show="activeRepo"> <strong>{{ activeRepo.full_name }}</strong> <em>Watched by {{ activeRepo.watchers_count }} people.</em> <pre>{{ activeRepo.readme }}</pre> </div>

我们将把该信息保存在控制器Scope内的activeRepo变量当中。只要存在可以显示的数据,ngShow就会将该元素显示出来(如果不存在可以显示的数据,我们将只能看到‘Watched

by people’文本,而且没有任何库被选中)。

第十一步:更新控制器

我们还需要对控制器进行更新,从而保证其切实获取到库数据并将其纳入Scope当中。下面创建我们之前附加至ngClick指令的openRepo()函数:

$scope.openRepo = function openRepo(name) { GitHub.getRepo(name, function (error, data) { if (!error) { $scope.activeRepo = data; GitHub.getReadme(name, function (error, data) { if (!error) { $scope.activeRepo.readme = data; } else { $scope.activeRepo.readme = 'No README found!'; } }); } }); }

如大家所见,我们首先使用GitHub.getRepo()方法、检查错误而后将该数据引入activeRepo变量。接下来,我们获取README文件——如果该文件不存在,我们需要向用户提示该情况。

现在大家可以再次运行自己的应用程序并查看其实际效果:

第十二步:获取用户的库

为了将更多功能引入到我们的应用程序当中,我们将为屏幕右方已被选定库的持有者显示其所有可用库。这要求我们向服务中引入另一个方法:

getUserRepos: function getUser(name, callback) { $http.get('https://api.github.com/users/'+ name +'/repos') .success(function (data) { callback(null, data); }) .error(function (e) { callback(e); }); }

其内容与此前的几条几乎无甚差别(大家可以点击此处查看更多与此API请求相关的信息)。

第十三步:显示用户的库

这基本上相当于重现HTML中的搜索栏机制,不过我们实际需要显示的是用户名称与user对象中的库,而非输入域或者Scope本身:

<div id="user"> <strong>{{ user.login }}</strong> <div class="repo" ng-repeat="repo in user.repos" ng-click="openRepo(repo.full_name)"> <strong>{{ repo.name }}</strong> <p>{{ repo.description }}</p> </div> </div>

到了这一步,大家应该已经拥有了一套能够切实运作的AngularJS应用程序——它可以根据搜索字符串获取GitHub库。大家可以进一步对其进行迭代,例如向其中添加更多功能或者为其设计完全不同的外观样式。

转载,仅供参考,祝你愉快,满意请采纳。 

菲特宠物网还为您提供以下相关内容希望对您有帮助:

angularjs怎么从数据库获取数据

function ctrl($http,$scope){ var url = '../login/save.html',transFn=function(obj) { var str = [];for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));} ret...

如何通过AngularJs从后台取数据

例如,我们打算让购物站点从服务器上获取商品信息,而不是从内存假数据获取。如何编写服务端代码已经超越了本书的范畴,所以,我们仅仅来想象一下,比方说我们已经创建了一个服务器,当查询/products 路径时,它会以JSON格式...

关于angularjs读取json文件数据并分页显示html

// 第一步,获取JSON数据$http.get("xxx.json").success(function(data){ $scope.currentData = data;//定义变量存储获取到的JSON数据;});$scope.tableData = []; // 定义表格展示用到的数据;$scope.curre...

如何用angular获取json文件

angularjs读取json中的某个字段的方法是利用json的api实现的。思路:先把js字符串转化成json结构,然后利用取属性运算符获取各个属性。1、例如有以下json数据:var data = {"resultList": ["{\"lookupKey\":2,\"clientKe...

怎么在js里面获取数据库的数据

js是无法直接读取数据库中的数据,但是可以用服务器端脚本与js搭配使用。如:&lt;% String testStr = "HelloJava";%&gt; alert('&lt;%=testStr%&gt;'); 因为服务端脚本是先运行的,Js是后运行在客户端的。所以可以先用服务端脚...

如何用angularjs读取本地json

success()方法里面的freetrial实际上代表的是json的所有数据,所以你后面要取那个数组的时候这样是取不到的。应该这样取:function dataController($http,$scope) { http.get("json/text.json").success(function(data) { ...

angularjs怎么能直接跨域获取数据

1.通过服务器或者后端语言去把一个跨域的地址代理到本域中,这个方法适用于大多数的跨域问题;2.如果提供数据的方面支持js的回调函数的话可以通过js文件的跨域加载来获取数据,这个方法对于返回的数据有一定的要求!

在AngularJs中父子页面如何相互调用方法和接收值

'#dialogfile'相当于给子页面添加了一个id,在父页面中可以直接通过这个id来接收子页面的值和调用子页面的方法(如果是调用子页面的方法的话,方法名后面是需要加括号的),在父页面中需要这样来定义,最后是子页面调用父页面...

angularjs 获取table行数据

= [];for( var k in data){ bak.push(data[k].bak);} 差不多这样吧,data是ng-repeat用到的JSON数组,通过遍历把每个json中bak(即“备份目录”中的值)取出放到一个数组bak里,也不知你要求的是不是这样。

angularjs怎么获取到单选框的值

使用Angularjs获取数组中的值并传值到html页面中显示出来 js页面的数组如下:var freetrial = [{ goodsid:"xy0001",imgurl:"img/178.jpg",goodstitle:"好娃娃牌安全椅",quantity:"10份",cost:896,linkt:"sdcx()",...

Top