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>
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.
Color Picker
