Angularjs - XML Bind data - bind first element from xml file.
Hello It's easy to bind data from JSON in html using Angularjs. but now a days people are not using XML file for communicate between client and server.
We have one API service which will return XML object.
Above API return word of the day
HTML Will like below
<html>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope, $http) {
$http.get("http://api.wordnik.com/v4/words.xml/wordOfTheDay?api_key=a2a73e7b926c924fad7001ca3111acd55af2ffabf50eb4ae5").success(function (xml) {
$scope.word = $(xml).find('word').text();
$scope.defination = $(xml).find('definition text').text();
$scope.example = $(xml).find('example text:first').text();
$scope.date = $(xml).find('publishDate').text();
}).error(function (status) {
alert(status);
});
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myController">
Word : <b>{{word}} </b><b>{{date | date:'MM/dd/yyyy'}}</b>
<br />
Defination <b>{{defination}}</b>
<br />
Example : <b>{{example}}</b>
<br />
Example : <b>{{example2}}</b>
<h3></h3>
</div>
</body>
</html>
