X
HOME HTML5 CSS3 JAVASCRIPT SQL PHP5 JQUERY ANGULAR BOOTSTRAP3 XML MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Web Building - AngularJS


Building a web site from scratch.   Part VIII: Using AngularJS.


What We Will Do

In this chapter we will:

  • Use AngularJS to fetch and display data on a website

Put the following code inside the file:

Customers.html

<!DOCTYPE html>
<html>

<head>
<title>Our Company</title>
<link href="Site.css" rel="stylesheet">
</head>

<body>

<nav id="nav01"></nav>

<div id="main">
  <h1>Customers</h1>
  <div id="id01"></div>
  <div ng-app="" ng-controller="customersController">
 
    <table><tr><th>Name</th><th>City</th><th>Country</th></tr>
    <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.City }}</td>
    <td>{{ x.Country }}</td>
    </tr>
    </table>

  </div>
  <footer id="foot01"></footer>
</div>

<script src="Script.js"></script>

<script>
function customersController($scope,$http) {
    $http.get("http://www.w3schools.com/website/Customers_JSON.php")
    .success(function(response) {$scope.names = response;});
}
</script>

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

</body>
</html>

Try it Yourself »

The code above is much same as in the previous chapter.

Only this time the data is fetched and displayed with AngularJS.


Read More

Read more about AngularJS in our AngularJS Tutorial.




Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook