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.





SHARE THIS PAGE

Color Picker

colorpicker