Wiki source code of Phone Search with AngularJS

Last modified by Ludovic Dubost on 2015/09/01 11:50
Show last authors
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
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).
6
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 = ""
13 $scope.xwikiQuery = $resource('/xwiki/bin/get/Phones/PhonesLiveTableResults',
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) {
22 $scope.xwikiDocQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName',
23 {docName: "", media: "json"},
24 {get:{method:'GET'}});
25 $scope.xwikiObjectQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/objects/Phones.PhonesClass/0',
26 {docName: "", media: "json"},
27 {get:{method:'GET'}});
28 $scope.xwikiAttachQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/attachments',
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}}