Adopting Angular 1.5 and refactoring existing code to use Components

app/templates/bower.json

@@ -3,19 +3,19 @@
   "version": "0.0.0",
   "dependencies": {
     "jquery": "~2.1.4",
-    "angular": "~1.4.4",
+    "angular": "~1.5.x",
     "angular-bootstrap": "^1.1",
-    "angular-cookies": "~1.4.4",
-    "angular-highlightjs": "~0.4.3",
-    "angular-mocks": "~1.4.4",
-    "angular-ui-router": "~0.2.15",
+    "angular-cookies": "~1.5.x",
+    "angular-highlightjs": "^0.6.1",
+    "angular-mocks": "~1.5.x",
+    "angular-ui-router": "^1.0.0",
     "angular-ui-tinymce": "~0.0.9",
-    "angular-animate": "~1.4.4",
+    "angular-animate": "~1.5.x",
     "ngtoast": "^2.0.0",
     "angular-x2js": "https://github.com/janmichaelyu/angular-x2js.git",
     "bootstrap": "~3.3.5",
     "font-awesome": "~4.6.0",
-    "highlightjs":"~8.7.0",
+    "highlightjs": "~8.7.0",
     "lodash": "~3.10.1",
     "ml-search-ng": "~0.2.0",
     "ml-utils": "withjam/ml-utils",
@@ -27,16 +27,19 @@
   },
   "overrides": {
     "angular-highlightjs": {
-      "dependencies": {"angular" : ">1.0.8", "highlightjs":"~8.7.0"}
+      "dependencies": {
+        "angular": ">1.0.8",
+        "highlightjs": "~8.7.0"
+      }
     }
   },
   "devDependencies": {
-    "angular-mocks": "~1.4.4",
+    "angular-mocks": "~1.5.x",
     "sinon": "http://sinonjs.org/releases/sinon-1.16.1.js",
     "bardjs": "~0.1.8"
   },
   "private": true,
   "resolutions": {
-    "angular": "~1.4.4"
+    "angular": "~1.5.x"
   }
 }

app/templates/ui/app/create/create.component.js

@@ -0,0 +1,11 @@
+(function() {
+  'use strict';
+
+  angular.module('app.create')
+    .component('create', {
+      bindings: {},
+      controller: 'CreateCtrl',
+      templateUrl: 'app/create/create.html'
+    });
+
+}());

app/templates/ui/app/create/create.html

@@ -1,4 +1,4 @@
-<div class="create" ng-show="ctrl.currentUser && !ctrl.currentUser.disallowUpdates">
+<div class="create" ng-show="$ctrl.currentUser && !$ctrl.currentUser.disallowUpdates">
   <div class="row">
     <div class="col-sm-2"></div>
     <h2 class="col-sm-10">Create a Document</h2>
@@ -7,112 +7,112 @@ <h2 class="col-sm-10">Create a Document</h2>
     <div class="form-group">
       <label class="col-sm-2 control-label">Name</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" placeholder="person's name" ng-model="ctrl.person.name">
+        <input type="text" class="form-control" placeholder="person's name" ng-model="$ctrl.person.name">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">About</label>
       <div class="col-sm-10">
-        <textarea class="form-control" ui-tinymce="ctrl.editorOptions" ng-model="ctrl.person.about"></textarea>
+        <textarea class="form-control" ui-tinymce="$ctrl.editorOptions" ng-model="$ctrl.person.about"></textarea>
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Greeting</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.greeting" placeholder="How this person should be greeted on login">
+        <input type="text" class="form-control" ng-model="$ctrl.person.greeting" placeholder="How this person should be greeted on login">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Balance</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.balance" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.balance" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Picture</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.picture" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.picture" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Age</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.age" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.age" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Eye Color</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.eyeColor" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.eyeColor" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Gender</label>
       <div class="col-sm-1">
-        <label class="radio-inline"><input type="radio" value="Female" ng-model="ctrl.person.gender" placeholder="">Female</label>
+        <label class="radio-inline"><input type="radio" value="Female" ng-model="$ctrl.person.gender" placeholder="">Female</label>
       </div>
       <div class="col-sm-1">
-        <label class="radio-inline"><input type="radio" value="Male" ng-model="ctrl.person.gender" placeholder="">Male</label>
+        <label class="radio-inline"><input type="radio" value="Male" ng-model="$ctrl.person.gender" placeholder="">Male</label>
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Company</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.company" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.company" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Email</label>
       <div class="col-sm-10">
-        <input type="email" class="form-control" ng-model="ctrl.person.email" placeholder="">
+        <input type="email" class="form-control" ng-model="$ctrl.person.email" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Phone</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.phone" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.phone" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Address</label>
       <div class="col-sm-10">
-        <input type="text" class="form-control" ng-model="ctrl.person.address" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.address" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Location</label>
       <div class="col-sm-5">
-        <input type="text" class="form-control" ng-model="ctrl.person.location.latitude" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.location.latitude" placeholder="">
       </div>
       <div class="col-sm-5">
-        <input type="text" class="form-control" ng-model="ctrl.person.location.longitude" placeholder="">
+        <input type="text" class="form-control" ng-model="$ctrl.person.location.longitude" placeholder="">
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Tags</label>
       <div class="col-sm-10">
-        <input type="text" ng-model="ctrl.newTag">
-        <button class="add-feature btn btn-default btn-sm" ng-click="ctrl.addTag()">Add</button>
+        <input type="text" ng-model="$ctrl.newTag">
+        <button class="add-feature btn btn-default btn-sm" ng-click="$ctrl.addTag()">Add</button>
       </div>
       <div class="col-sm-10 col-sm-offset-2">
-        <div class="tag btn btn-info" ng-repeat="tag in ctrl.person.tags">
+        <div class="tag btn btn-info" ng-repeat="tag in $ctrl.person.tags">
           <span>{{tag}}</span>
-          <span class="glyphicon glyphicon-remove-circle" ng-click="ctrl.removeTag($index)"></span>
+          <span class="glyphicon glyphicon-remove-circle" ng-click="$ctrl.removeTag($index)"></span>
         </div>
       </div>
     </div>
     <div class="form-group">
       <label class="col-sm-2 control-label">Active</label>
       <div class="col-sm-1">
         <label class="checkbox">
-          <input type="checkbox" ng-model="ctrl.person.isActive">
+          <input type="checkbox" ng-model="$ctrl.person.isActive">
         </label>
       </div>
     </div>
 
     <div class="row">
       <a class="col-sm-offset-10 btn btn-default" ui-sref="root.landing">Cancel</a>
-      <button class="btn btn-primary" ng-click="ctrl.submit()">Create</button>
+      <button class="btn btn-primary" ng-click="$ctrl.submit()">Create</button>
     </div>
   </form>
 </div>

app/templates/ui/app/detail/detail.component.js

@@ -0,0 +1,13 @@
+(function() {
+  'use strict';
+
+  angular.module('app.detail')
+    .component('detail', {
+      bindings: {
+        doc: '<'
+      },
+      controller: 'DetailCtrl',
+      templateUrl: 'app/detail/detail.html'
+    });
+
+}());

app/templates/ui/app/detail/detail.controller.js

@@ -1,14 +1,16 @@
 /* global X2JS,vkbeautify */
-(function () {
+(function() {
   'use strict';
   angular.module('app.detail')
-  .controller('DetailCtrl', DetailCtrl);
+    .controller('DetailCtrl', DetailCtrl);
 
-  DetailCtrl.$inject = ['doc', '$stateParams'];
-  function DetailCtrl(doc, $stateParams) {
+  DetailCtrl.$inject = ['$stateParams'];
+
+  function DetailCtrl($stateParams) {
     var ctrl = this;
 
     var uri = $stateParams.uri;
+    var doc = this.doc;
 
     var contentType = doc.headers('content-type');
 
@@ -27,20 +29,26 @@
       /* jscs: enable */
     } else if (contentType.lastIndexOf('text/plain', 0) === 0) {
       ctrl.xml = doc.data;
-      ctrl.json = {'Document' : doc.data};
+      ctrl.json = {
+        'Document': doc.data
+      };
       ctrl.type = 'text';
-    } else if (contentType.lastIndexOf('application', 0) === 0 ) {
+    } else if (contentType.lastIndexOf('application', 0) === 0) {
       ctrl.xml = 'Binary object';
-      ctrl.json = {'Document type' : 'Binary object'};
+      ctrl.json = {
+        'Document type': 'Binary object'
+      };
       ctrl.type = 'binary';
     } else {
       ctrl.xml = 'Error occured determining document type.';
-      ctrl.json = {'Error' : 'Error occured determining document type.'};
+      ctrl.json = {
+        'Error': 'Error occured determining document type.'
+      };
     }
 
     angular.extend(ctrl, {
-      doc : doc.data,
-      uri : uri
+      doc: doc.data,
+      uri: uri
     });
   }
 }());

app/templates/ui/app/detail/detail.controller.spec.js

@@ -1,8 +1,8 @@
 /* jshint -W117, -W030 */
-(function () {
+(function() {
   'use strict';
 
-  describe('Controller: DetailCtrl', function () {
+  describe('Controller: DetailCtrl', function() {
 
     var controller;
     var doc;
@@ -12,20 +12,24 @@
       bard.inject('$controller', '$rootScope');
     });
 
-    beforeEach(function () {
+    beforeEach(function() {
       // stub the document
-      var headers = function() { return 'application/json'; };
+      var headers = function() {
+        return 'application/json';
+      };
       doc = {
         headers: headers,
         data: {
           name: 'hi'
         }
       };
-      controller = $controller('DetailCtrl', { doc: doc });
+      controller = $controller('DetailCtrl', {}, {
+        doc: doc
+      });
       $rootScope.$apply();
     });
 
-    it('should be created successfully', function () {
+    it('should be created successfully', function() {
       expect(controller).to.be.defined;
     });
 

app/templates/ui/app/detail/detail.html

@@ -2,24 +2,24 @@
   <div class="col-sm-8">
     <uib-tabset type="pills">
       <uib-tab active="true">
-        <uib-tab-heading>{{ctrl.type | uppercase}}</uib-tab-heading>
+        <uib-tab-heading>{{$ctrl.type | uppercase}}</uib-tab-heading>
         <div class="col-sm-9 bottom-buffer">
-          <json-explorer ng-if="ctrl.type==='json'" data="ctrl.json"></json-explorer>
-          <pre ng-if="ctrl.type!=='json'" class="pre-xml">{{ctrl.xml}}</pre>
+          <json-explorer ng-if="$ctrl.type==='json'" data="$ctrl.json"></json-explorer>
+          <pre ng-if="$ctrl.type!=='json'" class="pre-xml">{{$ctrl.xml}}</pre>
 
-          <a ng-if="ctrl.type==='binary'" target="_blank" ng-href="/v1/documents?uri={{ctrl.uri}}&transform=download" class="btn btn-default">Download</a>
+          <a ng-if="$ctrl.type==='binary'" target="_blank" ng-href="/v1/documents?uri={{$ctrl.uri}}&transform=download" class="btn btn-default">Download</a>
         </div>
       </uib-tab>
-      <uib-tab ng-if="ctrl.type!=='json'">
+      <uib-tab ng-if="$ctrl.type!=='json'">
         <uib-tab-heading>JSON</uib-tab-heading>
         <div class="col-sm-9 bottom-buffer">
-          <json-explorer data="ctrl.json"></json-explorer>
+          <json-explorer data="$ctrl.json"></json-explorer>
         </div>
       </uib-tab>
-      <uib-tab ng-if="ctrl.type==='json'">
+      <uib-tab ng-if="$ctrl.type==='json'">
         <uib-tab-heading >XML</uib-tab-heading>
         <div class="col-sm-9">
-          <pre class="pre-xml">{{ctrl.xml}}</pre>
+          <pre class="pre-xml">{{$ctrl.xml}}</pre>
         </div>
       </uib-tab>
     </uib-tabset>
@@ -29,7 +29,7 @@
     <div class="panel panel-default">
       <div class="panel-heading">Similar</div>
       <div class="panel-body">
-        <ml-similar uri="{{ctrl.uri}}" limit="5"></ml-similar>
+        <ml-similar uri="{{$ctrl.uri}}" limit="5"></ml-similar>
       </div>
     </div>
   </div>

app/templates/ui/app/detail/similar-directive.html → app/templates/ui/app/detail/similar-component.html

@@ -1,8 +1,8 @@
 <div class='similar-items'>
   <!--h3>Similar Documents</h3-->
   <ul>
-    <li ng-repeat="uri in similar">
+    <li ng-repeat="uri in $ctrl.similar">
       <a ui-sref="root.view({uri: uri})">{{ uri }}</a>
     </li>
   </ul>
-</div>
+</div>

app/templates/ui/app/detail/similar-component.js

@@ -0,0 +1,31 @@
+(function() {
+
+  'use strict';
+
+  angular.module('app.similar')
+    .component('mlSimilar', {
+      bindings: {
+        uri: '@',
+        limit: '@'
+      },
+      controller: MlSimilar,
+      templateUrl: 'app/detail/similar-component.html'
+    });
+
+  MlSimilar.$inject = ['MLRest'];
+
+  function MlSimilar(mlRest) {
+    var ctrl = this;
+
+    mlRest.extension('extsimilar', {
+      method: 'GET',
+      params: {
+        'rs:uri': ctrl.uri,
+        'rs:limit': ctrl.limit ? ctrl.limit : 10
+      }
+    }).then(function(response) {
+      ctrl.similar = response.data.similar;
+    });
+  }
+
+}());