Replace JavaScript application code with TypeScript

Author: koistya

src/Web/Scripts/_references.js

@@ -0,0 +1 @@
+/// <reference path="typings/angularjs/angular.d.ts" />

src/Web/Scripts/_references.ts

@@ -1,11 +1,17 @@
-'use strict';
+'use strict';
+
+interface IAppRootScopeService extends ng.IRootScopeService {
+    $state: any;
+    $stateParams: any;
+    layout: string;
+}
 
 // Declares how the application should be bootstrapped. See: http://docs.angularjs.org/guide/module
 angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])
 
     // Gets executed during the provider registrations and configuration phase. Only providers and constants can be
     // injected here. This is to prevent accidental instantiation of services before they have been fully configured.
-    .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
+    .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider : ng.ILocationProvider) {
 
         // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
         // ------------------------------------------------------------------------------------------------------------
@@ -40,7 +46,7 @@ angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directiv
 
     // Gets executed after the injector is created and are used to kickstart the application. Only instances and constants
     // can be injected here. This is to prevent further system configuration during application run time.
-    .run(['$templateCache', '$rootScope', '$state', '$stateParams', function ($templateCache, $rootScope, $state, $stateParams) {
+    .run(['$templateCache', '$rootScope', '$state', '$stateParams', function ($templateCache: ng.ITemplateCacheService, $rootScope: IAppRootScopeService, $state, $stateParams) {
 
         // <ui-view> contains a pre-rendered template for the current view
         // caching it will prevent a round-trip to a server at the first page load
@@ -50,8 +56,7 @@ angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directiv
         // Allows to retrieve UI Router state information from inside templates
         $rootScope.$state = $state;
         $rootScope.$stateParams = $stateParams;
-
-        $rootScope.$on('$stateChangeSuccess', function (event, toState) {
+        $rootScope.$on('$stateChangeSuccess', (event, toState?): any => {
 
             // Sets the layout name, which can be used to display different layouts (header, footer etc.)
             // based on which page the user is located

src/Web/Scripts/app.js renamed to src/Web/Scripts/app.ts

@@ -1,43 +1,43 @@
-'use strict';
+'use strict';
 
 // Google Analytics Collection APIs Reference:
 // https://developers.google.com/analytics/devguides/collection/analyticsjs/
 
 angular.module('app.controllers', [])
 
     // Path: /
-    .controller('HomeCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
+    .controller('HomeCtrl', ['$scope', '$location', '$window', ($scope, $location, $window) => {
         $scope.$root.title = 'AngularJS SPA Template for Visual Studio';
-        $scope.$on('$viewContentLoaded', function () {
+        $scope.$on('$viewContentLoaded', () => {
             $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
         });
     }])
 
     // Path: /about
-    .controller('AboutCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
+    .controller('AboutCtrl', ['$scope', '$location', '$window', ($scope, $location, $window) => {
         $scope.$root.title = 'AngularJS SPA | About';
-        $scope.$on('$viewContentLoaded', function () {
+        $scope.$on('$viewContentLoaded', () => {
             $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
         });
     }])
 
     // Path: /login
-    .controller('LoginCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
+    .controller('LoginCtrl', ['$scope', '$location', '$window', ($scope, $location, $window) => {
         $scope.$root.title = 'AngularJS SPA | Sign In';
         // TODO: Authorize a user
         $scope.login = function () {
             $location.path('/');
             return false;
         };
-        $scope.$on('$viewContentLoaded', function () {
+        $scope.$on('$viewContentLoaded', () => {
             $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
         });
     }])
 
     // Path: /error/404
-    .controller('Error404Ctrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
+    .controller('Error404Ctrl', ['$scope', '$location', '$window', ($scope, $location, $window) => {
         $scope.$root.title = 'Error 404: Page Not Found';
-        $scope.$on('$viewContentLoaded', function () {
+        $scope.$on('$viewContentLoaded', () => {
             $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
         });
     }]);

src/Web/Scripts/controllers.js renamed to src/Web/Scripts/controllers.ts

@@ -1,5 +1,9 @@
-/// <reference path="_references.js" />
-/// <reference path="controllers.js" />
+/// <chutzpah_reference path="vendor/angular.js" />
+/// <chutzpah_reference path="vendor/angular-mocks.js" />
+/// <reference path="typings/jasmine/jasmine.d.ts" />
+/// <reference path="typings/angularjs/angular-mocks.d.ts" />
+/// <reference path="typings/jasmine/jasmine.d.ts" />
+/// <reference path="controllers.ts" />
 
 'use strict';
 

src/Web/Scripts/controllers.spec.js renamed to src/Web/Scripts/controllersSpec.ts

@@ -0,0 +1,9 @@
+'use strict';
+
+angular.module('app.directives', [])
+
+    .directive('appVersion', ['version', (version) => {
+        return (scope, elm, attrs) => {
+            elm.text(version);
+        };
+    }]);

src/Web/Scripts/directives.js

@@ -0,0 +1,24 @@
+/// <chutzpah_reference path="vendor/angular.js" />
+/// <chutzpah_reference path="vendor/angular-mocks.js" />
+/// <reference path="typings/jasmine/jasmine.d.ts" />
+/// <reference path="typings/angularjs/angular-mocks.d.ts" />
+/// <reference path="typings/jasmine/jasmine.d.ts" />
+/// <reference path="directives.ts" />
+
+'use strict';
+
+describe('Directives', () => {
+    beforeEach(module('app.directives'));
+
+    describe('app-version', () => {
+        it('should print current version', () => {
+            module(($provide) => {
+                $provide.value('version', 'TEST_VER');
+            });
+            inject(($compile, $rootScope) => {
+                var element = $compile('<span app-version></span>')($rootScope);
+                expect(element.text()).toEqual('TEST_VER');
+            });
+        });
+    });
+});