Added office ui fabric responsive classes (note: still facing responsive issues) and added a office ui fabric refresh icon. The icon for some reason isn't displaying (same issue with the property pane)

samples/angular-search/src/webparts/angularSearch/AngularSearch.module.scss

@@ -19,3 +19,8 @@
     text-decoration: none;
   }
 }
+
+//removes the checkbox from the hover event of ms-ListItem's
+:global .ms-ListItem.is-selectable:hover:before {
+  border: none !important;
+}

samples/angular-search/src/webparts/angularSearch/app/DataService.ts

@@ -13,7 +13,8 @@ export default class DataService implements IDataService {
     const deferred: ng.IDeferred<ISearchResults> = this.$q.defer();
 
     this.$http({
-          url: `${webUrl}/_api/search/query?queryText='ContentType:"${contentType}"'`,
+          url: `${webUrl}/_api/search/query?queryText='ContentType:"${contentType}"
+            Path:${webUrl}'&selectproperties='Title,Author,HitHighlightedSummary,PublishingImage,Url'`,
           method: 'GET',
           headers: {
             'Accept': 'application/json;odata=verbose'

samples/angular-search/src/webparts/angularSearch/app/HomeController.ts

@@ -12,6 +12,7 @@ export default class HomeController {
   public styles: any = null;
   public searchNotConfigured: boolean = true;
   public items: any[] = [];
+  public searching: boolean = false;
 
   private _web: string = null;
   private _contentType: string = undefined;
@@ -19,7 +20,7 @@ export default class HomeController {
   constructor(private dataService: IDataService, private $rootScope: ng.IRootScopeService, private $scope: ng.IScope, private $attrs: ng.IAttributes) {
     const vm: HomeController = this;
 
-    vm.styles = $attrs['style'];
+    vm.styles = angular.fromJson($attrs['style']);
     vm._web = $attrs['web'];
     vm._contentType = $attrs['contenttype'] === "" ? undefined : $attrs['contenttype'];
 
@@ -55,11 +56,15 @@ export default class HomeController {
   }
 
   public getSearchResults(): void {
-    this.status = 'Loading search results...';
+    //display searching message
+    this.searching = true;
     this.dataService.getSearchResults(this._web, this._contentType)
       .then((results: ISearchResults): void => {
         this.items = this._setSearchResults(results.PrimaryQueryResult.RelevantResults.Table.Rows.results);
         console.log(this.items);
+
+        //hide searching message
+        this.searching = false;
       });
 
   }
@@ -71,7 +76,20 @@ export default class HomeController {
         var val: Object = {};
 
         result.Cells.results.forEach((cell: ICellValue) => {
+          if (cell.Key == 'HitHighlightedSummary'){
+            //need to replace <ddd> markup
+            val[cell.Key] = cell.Value.replace(/ <ddd\/>/g, '.');
+          }
+          else if (cell.Key == 'PublishingImage' && cell.Value !== null) {
+            //need to pull image url out of PublishingImage field
+            let div = document.createElement('div');
+            div.innerHTML = cell.Value;
+            let img = div.getElementsByTagName('img')[0];
+            val[cell.Key] = img.src;
+          }
+          else {
           val[cell.Key] = cell.Value;
+          }
         });
 
         temp.push(val);

samples/angular-search/src/webparts/angularSearch/app/home-template.html

@@ -1,30 +1,40 @@
-
+<div class="ms-Grid">
-<div class="{{::vm.styles.angularTemplate}}">
+	<div class="">
-  <div class="{{::vm.styles.container}}">
+		<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white {{::vm.styles.row}}">
-    <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white {{::vm.styles.row}}">
+			<div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
-      <div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
+				<span class="ms-font-xl ms-fontColor-white">
-        <span class="ms-font-xl ms-fontColor-white">
           Sample SharePoint Search in Angular
         </span>
-      </div>
+        <uif-button type="button" ng-click="vm.getSearchResults()" ng-disabled="vm.searchNotConfigured">
-    </div>
+          <i class="ms-Icon ms-Icon--Refresh" title="Refresh" aria-hidden="true"></i>
-    <div class="ms-Grid-row ms-bgColor-themeDark mg-fontColor-white ${::vm.styles.row}">
+				</uif-button>
-      <div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
+			</div>
-        <uif-button ng-click="vm.getSearchResults()" ng-disabled="vm.searchNotConfigured">
+		</div>
-          Refresh Search Results
+		<div class="ms-Grid-row" ng-show="vm.searching">
-        </uif-button>
+			<div class="ms-Grid-col ms-u-smPush6 ms-u-mdPush6 ms-u-lgPush6 ms-u-xlPush6">
-      </div>
+				<uif-spinner uif-size="large">Searching...</uif-spinner>
-    </div>
+			</div>
-    <div class="ms-Grid-row ms-bgColor-themeDark mg-fontColor-white ${::vm.styles.row}">
+		</div>
-      <div class="ms-Grid-col ms-u-lg10 ms-u-x-18 ms-u-xlPush2 ms-u-lgPush1">
+		<div class="ms-Grid-row">
-        <div class="ms-fontColor-white">{{vm.status}}</div>
+			<div class="ms-Grid-col ms-u-sm-12">
-      </div>
+				<div ng-show="!vm.searching">
-    </div>
+					<uif-list uif-item-select-mode="single">
-    <uif-list>
+						<uif-list-item ng-repeat="item in vm.items" uif-item="item">
-      <uif-list-item ng-repeat="item in vm.items">
+							<div class="ms-Grid-row">
-        <uif-list-item-primary-text>{{item.Title}}</uif-list-item-primary-text>
+								<div class="ms-Grid-col ms-u-sm-12">
-        <uif-list-item-secondary-text>By: {{item.Author}}</uif-list-item-secondary-text>
+									<uif-link ng-href="{{item.Url}}" style="text-decoration: none;">
-        <uif-list-item-tertiary-text>{{item.HitHighlightedSummary}}</uif-list-item-tertiary-text>
+										<uif-list-item-image>
-    </uif-list>
+											<img ng-src="{{item.PublishingImage}}" style="width: 80%" />
-  </div>
+										</uif-list-item-image>
+										<uif-list-item-primary-text>{{item.Title}}</uif-list-item-primary-text>
+										<uif-list-item-secondary-text>By: {{item.Author}}</uif-list-item-secondary-text>
+										<uif-list-item-tertiary-text>{{item.HitHighlightedSummary}}</uif-list-item-tertiary-text>
+									</uif-link>
+								</div>
+							</div>
+					</uif-list>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>