<%@ page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
src="Script/angular.min.js"></script>
<script>
var app =
angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http) {
$scope.contacts
= {};
var response = $http
.get("ContactListProvider.jsp");
response.success(function(data, status, headers,
config) {
$scope.contacts = data;
});
response.error(function(data, status, headers,
config) {
alert("AJAX failed!");
});
});
</script>
<title>AngularJS Demo</title>
</head>
<body>
<h2>My Contact</h2>
<div ng-app="myApp"
ng-controller="myCtrl">
<div ng-repeat="contact in
contacts">{{contact.name}}
-
{{contact.phone}}</div>
</div>
</body>
</html>
_______________________________________________________________
$http : use in particular scope to call JSP / web services and bind returning JSON object with $Scope.Contacts. if you will get AJAX failed message than please try with full http:// path of contactListProvider.jsp
$http.get : call page by get method
response.success : is a fuction call when all is well with services or JSP page call and return object will bind with fuction data variable
_______________________________________________________________
ContactListProvider.jsp
<%@ page language="java" contentType="text/html;
charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
String jsonStr = "[ {name :
'Moin',phone : '123423424'},"+
"{name :
'Neamat',phone : '12312313'}, "+
"{name :
'Reha',phone : '87897987'} ]";
out.print(jsonStr);
out.close();
%>
_________________________________________________________________
Output
great
ReplyDelete