1. Using $ http We can use the built-in $ http service to communicate directly with the outside world. The $ http service simply encapsulates the browser's native XMLHttpRequest object. The $ http service is a function that can only accept one parameter. This parameter is an object that contains the configuration content used to generate the HTTP request. This function returns a promise object with two methods, success and error.
The most basic usage scenarios of these two methods are as follows:
$ http ({
method: 'GET',
url: '/api/users.json'
}). success (function (data, status, headers, config) {
// Called when the corresponding is ready
}). error (function (data, status, headers, config) {
// Called when the response returns in an error state
});
Second, AngularJS gets JSON data instance code
1.data.json:
[
{
"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%"
}
]
2. index.html:
<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> angular_learn </ title>
<script src = "js / angular-1.3.0.js"> </ script>
</ head>
<body>
<div class = "dataList" ng-app = "myApp" ng-controller = "myController">
<ul>
<!-Add ng-repeat in the read data area->
<li ng-repeat = "student in students">
<span> {{student.Name}} </ span>
<span> {{student.RollNo}} </ span>
<span> {{student.Percentage}} </ span>
</ li>
</ ul>
</ div>
<script src = "js / angular-1.3.0.js"> </ script>
<script>
var myApp = angular.module ("myApp", []);
myApp.controller ("myController", function ($ scope, $ http) {
var dataUrl = "json / data.json";
//retrieve data
$ http.get (dataUrl) .success (function (data) {
$ scope.students = data;
}). error (function () {
alert ("Error");
});
});
</ script>
</ body>
</ html>
3. Method summary
1. Configure the corresponding controller and inject $ scope and $ http services into the controller;
2. Use $ http.get () to write the url of the data file to be read;
3. Use the callback function. When successful, assign the resulting data to the variable products under the scope of $ scope.
4. Use the ng-repeat command to traverse the data one by one at the front desk.
Part of the content is reproduced from: Mask Goblin's Blog
