快捷導(dǎo)航

AngularJS Ajax詳解及示例代碼

更新時(shí)間：2016年08月17日 09:58:58 作者：SandKing

本文主要講解AngularJS Ajax的知識(shí)，這里提供詳細(xì)資料及代碼示例，幫助學(xué)習(xí)AngularJS的朋友,有需要的小伙伴可以參考下

AngularJS提供$http控制，可以作為一項(xiàng)服務(wù)從服務(wù)器讀取數(shù)據(jù)。服務(wù)器可以使一個(gè)數(shù)據(jù)庫(kù)調(diào)用來(lái)獲取記錄。 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è)置針對(duì)其學(xué)生的屬性。 “學(xué)生”模型可以用來(lái)用來(lái)繪制 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>

輸出

要運(yùn)行這個(gè)例子，需要部署textAngularJS.html，data.txt到一個(gè)網(wǎng)絡(luò)服務(wù)器。使用URL在Web瀏覽器中打開(kāi)textAngularJS.html請(qǐng)求服務(wù)器?？吹浇Y(jié)果如下：

以上就是AngularJS Ajax的基礎(chǔ)資料整理，后續(xù)繼續(xù)整理相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

Angularjs 1.3 中的$parse實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
總結(jié)十個(gè)Angular.js由淺入深的面試問(wèn)題
這篇文章雖然只有10個(gè)問(wèn)題，但是覆蓋了angular開(kāi)發(fā)中的各個(gè)方面，有基本的知識(shí)點(diǎn)，也有在開(kāi)發(fā)過(guò)程中遇見(jiàn)的問(wèn)題，同時(shí)也有較為開(kāi)放性的問(wèn)題去辨別面試者的基礎(chǔ)水準(zhǔn)和項(xiàng)目經(jīng)驗(yàn)，注意答案僅供參考哦～
2016-08-08
AngularJS 最常用的八種功能(基礎(chǔ)知識(shí))
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-06-06
AngularJS實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)表單驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
Angular.JS通過(guò)指令操作DOM的方法
這篇文章主要給大家介紹了Angular.JS通過(guò)指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)
Ionic以AngularJS和ApacheCordova為基礎(chǔ),使用Node.js進(jìn)行模塊管理，使用Html5、Css(SASS)和Javascript技術(shù)進(jìn)行APP開(kāi)發(fā),這篇文章主要給大家介紹了如何通過(guò)一篇文章快速了解Angular和Ionic生命周期和鉤子函數(shù)的相關(guān)資料,需要的朋友可以參考下
2021-07-07
Angular.js自動(dòng)化測(cè)試之protractor詳解
Protractor是一個(gè)建立在WebDriverJS基礎(chǔ)上的端到端(E2E)的AngularJS JavaScript Web應(yīng)用程序測(cè)試框架，下面這篇文章主要給大家介紹了angular.js自動(dòng)化測(cè)試之protractor的相關(guān)資料，需要的朋友可以參考下。
2017-07-07
淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)
下面小編就為大家?guī)?lái)一篇淺談angularjs依賴服務(wù)注入寫法的注意點(diǎn)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)
這篇文章主要介紹了indexedDB bootstrap angularjs之 MVC DOMO (應(yīng)用示例)的相關(guān)資料,需要的朋友可以參考下
2016-06-06
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12