Wiki source code of Phone Search with AngularJS

Last modified by Ludovic Dubost on 2015/09/01 11:50

version	line-number	content
4.1	1
	2	This is a demo of AngularJS integration with XWiki. The backend data is in XWiki and AngularJS is used to display data from XWiki.
	3	With this integration, AngularJS code can be directly editing in XWiki pages and the result is immediately visible.
	4
6.1	5	The code of this demo is available as an [[XWiki Extension>>http://extensions.xwiki.org/xwiki/bin/view/Extension/AngularJSDemo]] (the code is also commented there).
4.1	6
1.1	7	{{angular app="xwiki" css="1"}}
	8	<script type="text/javascript">
	9	angular.module('xwiki', ['ngResource'])
	10
	11	function XWikiSearchCtrl($scope, $resource) {
	12	$scope.searchTerm = ""
2.1	13	$scope.xwikiQuery = $resource('/xwiki/bin/get/Phones/PhonesLiveTableResults',
1.1	14	{"doc.title":"", outputSyntax: "plain", transprefix : "phones.livetable.", classname: "Phones.PhonesClass", collist : "_image,doc.title,os,os_version,screen_size,hardware_cpu,details", offset: "1", limit: "15", reqNo: "1", sort : "doc.title", dir: "asc"},
	15	{get:{method:'GET'}});
	16
	17	$scope.doSearch = function () {
	18	$scope.xwikiQueryResult = $scope.xwikiQuery.get({"doc.title": $scope.searchTerm});
	19	};
	20
	21	$scope.doGet = function(docName, docDetails) {
2.1	22	$scope.xwikiDocQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName',
1.1	23	{docName: "", media: "json"},
	24	{get:{method:'GET'}});
2.1	25	$scope.xwikiObjectQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/objects/Phones.PhonesClass/0',
1.1	26	{docName: "", media: "json"},
	27	{get:{method:'GET'}});
2.1	28	$scope.xwikiAttachQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/attachments',
1.1	29	{docName: "", media: "json"},
	30	{get:{method:'GET'}});
	31
	32	$scope.mainImageUrl = "";
	33	$scope.phone = docName;
	34	$scope.details = docDetails;
	35	$scope.properties = {};
	36	$scope.images = [];
	37	$scope.doc = $scope.xwikiDocQuery.get({docName: docName});
	38	$scope.attachments = $scope.xwikiAttachQuery.get({docName: docName}, function(attachments) {
	39	for (var i=0;i<attachments.attachments.length;i++) {
	40	if (i==0) {
	41	$scope.mainImageUrl = attachments.attachments[i].xwikiAbsoluteUrl;
	42	}
	43	$scope.images.push(attachments.attachments[i].xwikiAbsoluteUrl);
	44	}
	45	});
	46	$scope.object = $scope.xwikiObjectQuery.get({docName: docName}, function(object) {
	47	for (var i=0;i<object.properties.length;i++) {
	48	var property = object.properties[i];
	49	$scope.properties[property["name"]] = property.value
	50	}
	51	});
	52	};
	53
	54	$scope.setImage = function(img) {
	55	$scope.mainImageUrl = img;
	56	}
	57
	58	// launch a first search
	59	$scope.doSearch();
	60	}
	61
	62	//XWikiSearchCtrl.$inject = ['$scope', '$resource'];
	63
	64	</script>
	65	<div ng-controller="XWikiSearchCtrl">
	66	<table border="0" width="100%">
	67	<tr><td width="20%" style="vertical-align: top;">
	68	<form class="form-horizontal">
	69	<input type="text" ng-model="searchTerm">
	70	<button class="btn" ng-click="doSearch()"><i class="icon-search"></i>Search</button>
	71	</form>
	72	<table class="table table-striped" border="0">
	73	<tr ng-repeat="doc in xwikiQueryResult.rows">
	74	<td><a href="" ng-click="doGet(doc.doc_name, doc.details)" ng-bind-html-unsafe="doc._image"></a></td><td><a href="" ng-click="doGet(doc.doc_name, doc.details)">{{doc.doc_title}}</a>
	75	</td>
	76	</tr>
	77	</table>
	78	</td>
	79	<td ng-show="phone">
	80	<table>
	81	<tr>
	82	<td style="vertical-align: top;">
	83	<img ng-src="{{mainImageUrl}}" class="phone">
	84	<br />
	85	<ul class="phone-thumbs">
	86	<li ng-repeat="img in images">
	87	<img ng-src="{{img}}" ng-click="setImage(img)">
	88	</li>
	89	</ul>
	90	</td>
	91	<td style="vertical-align: top;">
	92	<h2>{{phone}}</h2>
	93	<span ng-bind-html-unsafe="details"></span>
	94	<ul>
	95	<li>CPU: {{properties.hardware_cpu}}</li>
	96	<li>USB: {{properties.usb}}</li>
	97	<li>OS: {{properties.os}} {{properties.os_version}}</li>
	98	<li>Screen size: {{properties.screen_size}} inches</li>
	99	<li>Screen resolution: {{properties.screen_resolution}}</li>
	100	<li>RAM: {{properties.ram}}GB</li>
	101	<li>Storage: {{properties.storage}}GB</li>
	102	<li>Weight: {{properties.weigth}}g</li>
	103	</ul>
	104	</td>
	105	</tr>
	106	</table>
	107	</td>
	108	</tr>
	109	</table>
	110	</div>
	111	</div>
	112	{{/angular}}