AngularJS Ajax詳解及示例代碼
更新時間：2016年08月17日 09:58:58 作者：SandKing
本文主要講解AngularJS Ajax的知識，這里提供詳細(xì)資料及代碼示例，幫助學(xué)習(xí)AngularJS的朋友,有需要的小伙伴可以參考下
AngularJS提供$http控制，可以作為一項服務(wù)從服務(wù)器讀取數(shù)據(jù)。服務(wù)器可以使一個數(shù)據(jù)庫調(diào)用來獲取記錄。 AngularJS需要JSON格式的數(shù)據(jù)。一旦數(shù)據(jù)準(zhǔn)備好，$http可以用以下面的方式從服務(wù)器得到數(shù)據(jù)。
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
在這里，data.txt中包含的學(xué)生記錄。 $http服務(wù)使Ajax調(diào)用和設(shè)置針對其學(xué)生的屬性。 “學(xué)生”模型可以用來用來繪制 HTML 表格。
例子
data.txt
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]
testAngularJS.html
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url="data.txt";
$http.get(url).success( function(response) {
$scope.students = response;
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
輸出
要運行這個例子，需要部署textAngularJS.html，data.txt到一個網(wǎng)絡(luò)服務(wù)器。使用URL在Web瀏覽器中打開textAngularJS.html請求服務(wù)器?？吹浇Y(jié)果如下：
以上就是AngularJS Ajax的基礎(chǔ)資料整理，后續(xù)繼續(xù)整理相關(guān)資料，謝謝大家對本站的支持！
相關(guān)文章
本文通過實例代碼給大家介紹了angularjs $parse的相關(guān)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章雖然只有10個問題，但是覆蓋了angular開發(fā)中的各個方面，有基本的知識點，也有在開發(fā)過程中遇見的問題，同時也有較為開放性的問題去辨別面試者的基礎(chǔ)水準(zhǔn)和項目經(jīng)驗，注意答案僅供參考哦～2016-08-08
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)
Ionic以AngularJS和ApacheCordova為基礎(chǔ),使用Node.js進(jìn)行模塊管理，使用Html5、Css(SASS)和Javascript技術(shù)進(jìn)行APP開發(fā),這篇文章主要給大家介紹了如何通過一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-07-07
Protractor是一個建立在WebDriverJS基礎(chǔ)上的端到端(E2E)的AngularJS JavaScript Web應(yīng)用程序測試框架，下面這篇文章主要給大家介紹了angular.js自動化測試之protractor的相關(guān)資料，需要的朋友可以參考下。2017-07-07
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務(wù)注入寫法的注意點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)的相關(guān)資料,需要的朋友可以參考下2016-06-06
@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12