Create seperate directive

endpoints/common.py

@@ -162,15 +162,6 @@ def render_page_template(name, route_data=None, **kwargs):
     library_scripts = []
     main_scripts = ['dist/quay-frontend.min.js']
 
-  # TODO(Ian): Ordering of library script matters?
-  library_scripts.remove('lib/ngReact.min.js')
-  library_scripts.remove('lib/react.js')
-  library_scripts.remove('lib/react-dom.js')
-
-  library_scripts.append('lib/react.js')
-  library_scripts.append('lib/react-dom.js')
-  library_scripts.append('lib/ngReact.min.js')
-
   use_cdn = app.config.get('USE_CDN', True)
   if request.args.get('use_cdn') is not None:
     use_cdn = request.args.get('use_cdn') == 'true'

static/js/directives/components/testComponent.js

@@ -0,0 +1,21 @@
+/**
+ * A react component implemented using the ngReact library
+ */
+var testComponent = React.createClass({
+  propTypes: {
+    prop1: React.PropTypes.string.isRequired,
+    prop2: React.PropTypes.string.isRequired
+  },
+  render: function() {
+    return React.DOM.span(null, 
+      'This is a react component: ' + this.props.prop1 + ' ' + this.props.prop2
+    );
+  }
+});
+
+angular.module('quayPages')
+  .value('TestComponent', testComponent)
+  .directive('testComponent', function(reactDirective) {
+    return reactDirective(testComponent);
+  });
+

static/js/pages/repo-view.js

@@ -2,19 +2,6 @@
   /**
    * Repository view page.
    */
-
-  var testComponent = React.createClass({
-    propTypes: {
-      prop1: React.PropTypes.string.isRequired,
-      prop2: React.PropTypes.string.isRequired
-    },
-    render: function() {
-      return React.DOM.span( null,
-        'This is a react component: ' + this.props.prop1 + ' ' + this.props.prop2
-      );
-    }
-  });
-
   angular.module('quayPages')
     .config(['pages', function(pages) {
       pages.create('repo-view', 'repo-view.html', RepoViewCtrl, {
@@ -23,10 +10,6 @@
         'description': 'Repository {{ namespace }}/{{ name }}'
       });
     }])
-    .value('TestComponent', testComponent)
-    .directive('testComponent', function(reactDirective) {
-      return reactDirective(testComponent);
-    });
 
   function RepoViewCtrl($scope, $routeParams, $location, $timeout, ApiService, UserService, AngularPollChannel, ImageLoaderService, CookieService) {
     $scope.reactProps = {