WIP - first pass at using ES6 classes on front-end (no transpiling)

Author: jjhampton

bs-config.js

@@ -2,6 +2,7 @@ module.exports = {
 	files: [
 		'public/index.html',
 		'public/app.js',
+		'public/template.js',
 		'public/stylesheets/styles.css'
 	],
     proxy: {

public/javascripts/angular-app.js

@@ -1,10 +1,6 @@
-(function() {
-    angular.module('app', ['ngRoute'])
-    .config(config);
+class AppConfig {
 
-    config.$inject = ['$routeProvider', '$locationProvider'];
-
-    function config($routeProvider, $locationProvider) {
+    constructor ($routeProvider, $locationProvider) {
 
         // routing
         $locationProvider.html5Mode(true);
@@ -21,11 +17,17 @@
                 template: `
                     <h1>MEAN Squad Library</h1>
                     <p>Welcome to <em>MEAN Squad Library</em>, a library web application built with the MEAN Stack.
-                    <records-counts><records-counts>
+                    <records-counts></records-counts>
                 `
             })
     }
-})();
+    
+}
+
+angular.module('app', ['ngRoute'])
+    .config(AppConfig);
+
+
 
 
 

public/javascripts/components/records/records-counts.html

@@ -3,5 +3,5 @@ <h1>Library Records</h1>
 <p>The library has the following record counts:</p>
 
 <ul>
-    <li><strong>Books:</strong> {{count}}</li>
+    <li><strong>Books:</strong> {{$ctrl.count}}</li>
 </ul>

public/javascripts/components/records/records-counts.js

@@ -1,19 +1,13 @@
-(function() {
-
-	angular.module('app').directive('recordsCounts', Directive);
-
-	function Directive() {
-		return {
-            restrict: 'E',
-			controller: Controller,
-            templateUrl: '/records/records-counts.html',
-		}
-	}
-
-    Controller.$inject = ['$scope'];
-
-	function Controller($scope) {
-        $scope.count = 11; 
-	}
-
-})();
+class RecordsCountsController {
+    $onInit() {
+      this.count = 28;
+    }
+}
+
+const RecordsCountsComponent = {
+    restrict: 'E',
+    controller: RecordsCountsController,
+    templateUrl: '/records/records-counts.html'
+};
+
+angular.module('app').component('recordsCounts', RecordsCountsComponent);