Latest web development tutorials

AngularJS Http

$ http AngularJS is a core service for reading data from a remote server.

Read JSON file

The following is a JSON file stored on a web server:

http://www.w3big.com/try/angularjs/data/sites.php

{ "Sites": [ { "Name": "tutorial", "Url": "www.w3big.com ", "Country": "CN" }, { "Name": "Google", "Url": "www.google.com", "Country": "USA" }, { "Name": "Facebook", "Url": "www.facebook.com", "Country": "USA" }, { "Name": "microblogging", "Url": "www.weibo.com ", "Country": "CN" } ] }

AngularJS $ http

AngularJS $ http service is used to read data on a web server.

$ Http.get (url) function is used to read the data server.

AngularJS examples

<Div ng-app = "myApp" ng-controller = "siteCtrl"> <Ul> <Li ng-repeat = "x in names "> {{x.Name + ',' + x.Country}} </ li> </ Ul> </ Div> <Script> var app = angular.module ( 'myApp', []); app.controller ( 'siteCtrl', function ($ scope, $ http) {$ http.get ( "http://www.w3big.com /try/angularjs/data/sites.php ") .success (function (response ) {$ scope.names = response.sites;});}); </ script>

try it"

Application Analysis:

? Note: get a request code above is the site server, you can not be copied directly to your local run, there will be cross-domain problem, the solution is to copy Customers_JSON.php data to your own server, with: PHP Ajax cross-domain problem the best solution.

AngularJS application defined by ng-app. Application execution in the <div> in.

ng-controller instruction set controller object name.

CustomersController function is a standard JavaScript object constructor.

The controller object has a property: $ scope.names.

$ http.get () reads the static JSON data from the web server.

Server data file: http://www.w3big.com/try/angularjs/data/sites.php .

When loading JSON data from the server, $ scope.names into an array.

Note This code can also be used to read database data.