Using Ajax APIs with AngularJS is easy if you use Angular-Resource. Angular-Resource is not a default add-on for AngularJS. You don't have to download it since Google's CDNs also serve it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js"></script> <script type="text/javascript" src="js/tangled.js"></script>
The tangled.js script there is where we write the interesting parts. Here's a partial of that script:
angular.module('tangled-app',['ngResource'])
.controller('tangledCtrl', function($scope, $resource){
var Customer = $resource('http://localhost\\:8080/tangled/rest/customers');
$scope.appName = "Tangled App"; // App name
$scope.customers = Customer.query(); // Calls our Resteasy-Tapestry REST API /GET customers
})
........
The script basically just means that I'm working with a Angular app called "tangled-app" and then AngularJS inits to also load the Angular-Resource library so we can use the $resource variable. The whole thing then just hinges on the var Customer = $resource('http://localhost\\:8080/tangled/rest/customers'); line. Think of this line as a "promise", it promises to return data when you call the query or equivalent function.
After the script all you have to do is add the tangled-app value to the ng-app directive and the tangledCtrl to a ng-controller:
<!DOCTYPE html>
<html ng-app="tangled-app">
<head>
.........
</head>
<body>
<div class="container" ng-controller="tangledCtrl">
<div class="row-fluid">
<h3>Abstract</h3>
<p>This a simple customer ajax app with
<a href="http://tynamo.org/tapestry-resteasy+guide">Tapestry-resteasy</a> as the backend
and <a href="http://angularjs.org/">AngularJS</a> on the front. It also uses
<a href="http://twitter.github.io/bootstrap/">Twitter-Bootstrap</a>.</p>
</div>
<div class="customer-table">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Country</th>
<th>Code</th>
<th>Credit Limit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.customerNumber}}</td>
<td>{{customer.customerName}}</td>
<td>{{customer.addressLine1}} {{customer.addressLine2}}</td>
<td>{{customer.city}}</td>
<td>{{customer.country}}</td>
<td>{{customer.postalCode}}</td>
<td>{{customer.creditLimit}}</td>
</tr>
</tbody>
</table>
</div>
</div>
........
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.js"></script>
<script type="text/javascript" src="js/tangled.js"></script>
</body>
</html>
BTW, if you're using Chrome, you'll get an "access-control-allow-origin" error. To fix this and allow you to continue developing in a local machine then just run Chrome with --disable-web-security. Don't do this though when browsing the internetz.
No comments:
Post a Comment