using decorators to write AngularJS in nearly identical syntax to Angular 2

static/js/directives/ui/regex-match-view.js

@@ -1,36 +0,0 @@
-/**
- * An element which displays the matches and non-matches for a regular expression against a set of
- * items.
- */
-angular.module('quay').directive('regexMatchView', function () {
-  var directiveDefinitionObject = {
-    priority: 0,
-    templateUrl: '/static/directives/regex-match-view.html',
-    replace: false,
-    transclude: true,
-    restrict: 'C',
-    scope: {
-      'regex': '=regex',
-      'items': '=items'
-    },
-    controller: function($scope, $element) {
-      $scope.filterMatches = function(regexstr, items, shouldMatch) {
-        regexstr = regexstr || '.+';
-
-        try {
-          var regex = new RegExp(regexstr);
-        } catch (ex) {
-          return null;
-        }
-
-        return items.filter(function(item) {
-          var value = item['value'];
-          var m = value.match(regex);
-          var matches = !!(m && m[0].length == value.length);
-          return matches == shouldMatch;
-        });
-      };
-    }
-  };
-  return directiveDefinitionObject;
-});

static/js/directives/ui/regex-match-view/regex-match-view.component.spec.ts

@@ -0,0 +1,14 @@
+import { RegexMatchViewComponent } from './regex-match-view.component';
+
+
+describe("RegexMatchViewComponent", () => {
+  var component: RegexMatchViewComponent;
+
+  beforeEach(() => {
+    component = new RegexMatchViewComponent();
+  });
+
+  describe("filterMatches", () => {
+
+  });
+});

static/js/directives/ui/regex-match-view/regex-match-view.component.ts

@@ -0,0 +1,67 @@
+import { Input, Component } from 'angular-ts-decorators';
+
+
+/**
+ * An element which displays the matches and non-matches for a regular expression against a set of
+ * items.
+ */
+@Component({
+  selector: 'regexMatchView',
+  template: `
+    <div class="regex-match-view-element">
+      <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
+        <i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
+      </div>
+      <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
+        <table class="match-table">
+          <tr>
+            <td>Matching:</td>
+            <td>
+              <ul class="matching match-list">
+                <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
+                  <i class="fa {{ item.icon }}"></i>{{ item.title }}
+                </li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td>Not Matching:</td>
+            <td>
+              <ul class="not-matching match-list">
+                <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
+                  <i class="fa {{ item.icon }}"></i>{{ item.title }}
+                </li>
+              </ul>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  `
+})
+export class RegexMatchViewComponent implements ng.IComponentController {
+
+  @Input('=') private regex: string;
+  @Input('=') private items: any[];
+
+  constructor() {
+
+  }
+
+  public filterMatches(regexstr: string, items: any[], shouldMatch: boolean): any[] {
+    regexstr = regexstr || '.+';
+
+    try {
+      var regex = new RegExp(regexstr);
+    } catch (ex) {
+      return null;
+    }
+
+    return items.filter(function(item) {
+      var value = item['value'];
+      var m = value.match(regex);
+      var matches: boolean = !!(m && m[0].length == value.length);
+      return matches == shouldMatch;
+    });
+  }
+}