Updated AngularJS example to ES6 + cleanups

Author: mbiernacik

angular1/app/app.ts

@@ -6,7 +6,7 @@ angular.module('myApp', [
   'myApp.view1',
   'myApp.view2',
   'myApp.version'
-]).
-config(['$routeProvider', function($routeProvider) {
-  $routeProvider.otherwise({redirectTo: '/view1'});
-}]);
+])
+  .config(['$routeProvider', $routeProvider => {
+    $routeProvider.otherwise({ redirectTo: '/view1' });
+  }]);

angular1/app/components/version/interpolate-filter.ts

@@ -1,9 +1,6 @@
 'use strict';
 
 angular.module('myApp.version.interpolate-filter', [])
-
-.filter('interpolate', ['version', function(version) {
-  return function(text) {
-    return String(text).replace(/\%VERSION\%/mg, version);
-  };
-}]);
+  .filter('interpolate', ['version', version => {
+    return text => String(text).replace(/\%VERSION\%/mg, version);
+  }]);

angular1/app/components/version/interpolate-filter_test.ts

@@ -1,14 +1,14 @@
 'use strict';
 
-describe('myApp.version module', function() {
+describe('myApp.version module', () => {
   beforeEach(module('myApp.version'));
 
-  describe('interpolate filter', function() {
-    beforeEach(module(function($provide) {
+  describe('interpolate filter', () => {
+    beforeEach(module($provide => {
       $provide.value('version', 'TEST_VER');
     }));
 
-    it('should replace VERSION', inject(function(interpolateFilter) {
+    it('should replace VERSION', inject(interpolateFilter => {
       expect(interpolateFilter('before %VERSION% after')).toEqual('before TEST_VER after');
     }));
   });

angular1/app/components/version/version-directive.ts

@@ -1,9 +1,8 @@
 'use strict';
 
 angular.module('myApp.version.version-directive', [])
-
-.directive('appVersion', ['version', function(version) {
-  return function(scope, elm, attrs) {
-    elm.text(version);
-  };
-}]);
+  .directive('appVersion', ['version', version => {
+    return (scope, element, attributes) => {
+      element.text(version);
+    };
+  }]);

angular1/app/components/version/version-directive_test.ts

@@ -1,15 +1,16 @@
 'use strict';
 
-describe('myApp.version module', function() {
+describe('myApp.version module', () => {
   beforeEach(module('myApp.version'));
 
-  describe('app-version directive', function() {
-    it('should print current version', function() {
-      module(function($provide) {
+  describe('app-version directive', () => {
+    it('should print current version', () => {
+      module($provide => {
         $provide.value('version', 'TEST_VER');
       });
-      inject(function($compile, $rootScope) {
-        var element = $compile('<span app-version></span>')($rootScope);
+
+      inject(($compile, $rootScope) => {
+        let element = $compile('<span app-version></span>')($rootScope);
         expect(element.text()).toEqual('TEST_VER');
       });
     });

angular1/app/components/version/version.ts

@@ -4,5 +4,4 @@ angular.module('myApp.version', [
   'myApp.version.interpolate-filter',
   'myApp.version.version-directive'
 ])
-
 .value('version', '0.1');

angular1/app/components/version/version_test.ts

@@ -1,10 +1,10 @@
 'use strict';
 
-describe('myApp.version module', function() {
+describe('myApp.version module', () => {
   beforeEach(module('myApp.version'));
 
-  describe('version service', function() {
-    it('should return current version', inject(function(version) {
+  describe('version service', () => {
+    it('should return current version', inject(version => {
       expect(version).toEqual('0.1');
     }));
   });

angular1/app/view1/view1.ts

@@ -1,19 +1,14 @@
 'use strict';
 
-class View1Controller{
-    static $inject = [];
-    constructor(){
-
-    }
+class View1Controller {
+  static $inject = [];
 }
 
 angular.module('myApp.view1', ['ngRoute'])
-
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view1', {
-    templateUrl: 'view1/view1.html',
-    controller: 'View1Ctrl'
-  });
-}])
-
-.controller('View1Ctrl', View1Controller);
+  .config(['$routeProvider', $routeProvider => {
+    $routeProvider.when('/view1', {
+      templateUrl: 'view1/view1.html',
+      controller: 'View1Ctrl'
+    });
+  }])
+  .controller('View1Ctrl', View1Controller);

angular1/app/view1/view1_test.ts

@@ -1,16 +1,12 @@
 'use strict';
 
-describe('myApp.view1 module', function() {
-
+describe('myApp.view1 module', () => {
   beforeEach(module('myApp.view1'));
 
-  describe('view1 controller', function(){
-
-    it('should ....', inject(function($controller) {
-      //spec body
-      var view1Ctrl:View1Controller = $controller('View1Ctrl');
+  describe('view1 controller', () => {
+    it('should be defined', inject($controller => {
+      let view1Ctrl: View1Controller = $controller('View1Ctrl');
       expect(view1Ctrl).toBeDefined();
     }));
-
   });
 });

angular1/app/view2/view2.ts

@@ -1,19 +1,14 @@
 'use strict';
 
-class View2Controller{
-    static $inject = [];
-    constructor(){
-
-    }
+class View2Controller {
+  static $inject = [];
 }
 
 angular.module('myApp.view2', ['ngRoute'])
-
-.config(['$routeProvider', function($routeProvider) {
-  $routeProvider.when('/view2', {
-    templateUrl: 'view2/view2.html',
-    controller: 'View2Ctrl'
-  });
-}])
-
-.controller('View2Ctrl', View2Controller);
+  .config(['$routeProvider', $routeProvider => {
+    $routeProvider.when('/view2', {
+      templateUrl: 'view2/view2.html',
+      controller: 'View2Ctrl'
+    });
+  }])
+  .controller('View2Ctrl', View2Controller);

angular1/app/view2/view2_test.ts

@@ -1,16 +1,12 @@
 'use strict';
 
-describe('myApp.view2 module', function() {
-
+describe('myApp.view2 module', () => {
   beforeEach(module('myApp.view2'));
 
-  describe('view2 controller', function(){
-
-    it('should ....', inject(function($controller) {
-      //spec body
-      var view2Ctrl:View2Controller = $controller('View2Ctrl');
+  describe('view2 controller', () => {
+    it('should be defined', inject($controller => {
+      let view2Ctrl: View2Controller = $controller('View2Ctrl');
       expect(view2Ctrl).toBeDefined();
     }));
-
   });
 });

angular1/e2e-tests/scenarios.ts

@@ -2,41 +2,29 @@
 
 /* https://github.com/angular/protractor/blob/master/docs/toc.md */
 
-describe('my app', function() {
-
-
-  it('should automatically redirect to /view1 when location hash/fragment is empty', function() {
+describe('my app', () => {
+  it('should automatically redirect to /view1 when location hash/fragment is empty', () => {
     browser.get('index.html');
     expect(browser.getLocationAbsUrl()).toMatch("/view1");
   });
 
-
-  describe('view1', function() {
-
-    beforeEach(function() {
+  describe('view1', () => {
+    beforeEach(() => {
       browser.get('index.html#/view1');
     });
 
-
-    it('should render view1 when user navigates to /view1', function() {
-      expect(element.all(by.css('[ng-view] p')).first().getText()).
-        toMatch(/partial for view 1/);
+    it('should render view1 when user navigates to /view1', () => {
+      expect(element.all(by.css('[ng-view] p')).first().getText()).toMatch(/partial for view 1/);
     });
-
   });
 
-
-  describe('view2', function() {
-
-    beforeEach(function() {
+  describe('view2', () => {
+    beforeEach(() => {
       browser.get('index.html#/view2');
     });
 
-
-    it('should render view2 when user navigates to /view2', function() {
-      expect(element.all(by.css('[ng-view] p')).first().getText()).
-        toMatch(/partial for view 2/);
+    it('should render view2 when user navigates to /view2', () => {
+      expect(element.all(by.css('[ng-view] p')).first().getText()).toMatch(/partial for view 2/);
     });
-
   });
 });