Step 2

.gitignore

@@ -6,4 +6,5 @@ tmp
 .DS_Store
 .idea
 src/libs
+src/dist
 data/db.json

README.md

@@ -18,4 +18,34 @@ To run the application we type
 
 `npm start` - this loads the application using a local webserver, check the console for the port number to use.
 
-The application is a simple contacts application where you can search, create or edit a contact.
+The application is a simple contacts application where you can search, create or edit a contact.
+
+## Steps
+
+### Step 1 - Style guide
+
+- Ensure all entities are in separate files
+
+### Step 2 - TypeScript & build tools
+
+*Files*
+- Renamed all js files into ts files and added `index.ts` files to make importing easier.
+- Copy packages from `bower.json` into `package.json`, run `npm install` and fix some issues are we go along
+    - "ngInfiniteScroll" => "ng-infinite-scroll"
+    - "AngularJS-Toaster" => "angularjs-toaster"
+    - "angular-auto-validate": "^1.19.6" => "angular-auto-validate": "^1.19.0"
+- Created entry point `src/main.ts` which contains imports for all required packages, which webpack uses to figure out what to bundle.
+
+*Tooling*
+- Installed packages for build tooling `rimraf`, `ts-loader`, `typescript`  and `webpack` via package.json
+- Added `tsconfig.json` and `webpack.config.js` to configure typescript compilation and bundling via webpack.
+- Added build script in `package.json` so we can run the build tools using `npm run build`. 
+- Fix any problems which we had when running the above command.
+    - Some errors with contacts service due to stricter checking 
+    - Add `import * as angular from 'angular';` so that typescript knows where to load angular from.
+    - Add `"@types/angular": "^1.4.0"` to `package.json` to remove any typescript errors
+
+*Consuming*
+- Replace all the js files in index.html with just one script tag `<script src="dist/bundle.js"></script>`
+
+

package.json

@@ -6,14 +6,35 @@
   "scripts": {
     "server": "cp ./data/orig-db.json ./data/db.json && json-server --watch ./data/db.json",
     "setup": "bower install",
-    "start": "cd src && serve"
+    "start": "cd src && serve",
+    "build": "rimraf src/dist && webpack --bail --progress --profile"
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {},
+  "dependencies": {
+    "angular": "^1.4.0",
+    "angular-animate": "^1.4.0",
+    "angular-auto-validate": "^1.19.0",
+    "angular-ladda": "^0.4.3",
+    "angular-resource": "^1.4.0",
+    "angular-strap": "^2.3.12",
+    "angularjs-toaster": "^2.1.0",
+    "bootstrap": "3.3.2",
+    "bootstrap-additions": "0.3.1",
+    "font-awesome": "4.3.0",
+    "jquery": "2.1.3",
+    "ng-infinite-scroll": "1.2.1",
+    "angular-ui-router": "^0.4.2",
+    "angular-spinner": "^1.0.1"
+  },
   "devDependencies": {
+    "@types/angular": "^1.4.0",
     "bower": "^1.8.0",
     "json-server": "^0.9.6",
-    "serve": "^5.1.2"
+    "serve": "^5.1.2",
+    "rimraf": "^2.6.0",
+    "ts-loader": "^2.0.1",
+    "typescript": "^2.2.1",
+    "webpack": "^2.2.1"
   }
 }

src/app/app.main.js → src/app/app.main.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular.module('codecraft', [
   'ngResource',
   'infinite-scroll',

src/app/app.routes.js → src/app/app.routes.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .config(function ($stateProvider, $urlRouterProvider) {

src/app/controllers/index.ts

@@ -0,0 +1,4 @@
+import "./person-create.controller";
+import "./person-edit.controller";
+import "./person-list.controller";
+import "./search.controller";

src/app/controllers/person-create.controller.js → src/app/controllers/person-create.controller.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .controller('PersonCreateController', function ($scope, $state, ContactService) {

src/app/controllers/person-edit.controller.js → src/app/controllers/person-edit.controller.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .controller('PersonEditController', function ($scope, $stateParams, $state, ContactService) {

src/app/controllers/person-list.controller.js → src/app/controllers/person-list.controller.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .controller('PersonListController', function ($scope, ContactService) {

src/app/controllers/search.controller.js → src/app/controllers/search.controller.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .controller('SearchController', function ($scope, ContactService) {

src/app/directives/card.directive.js → src/app/directives/card.directive.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .directive('ccCard', function () {

src/app/directives/index.ts

@@ -0,0 +1,2 @@
+import "./card.directive";
+import "./spinner.directive";

src/app/directives/spinner.directive.js → src/app/directives/spinner.directive.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .directive('ccSpinner', function () {

src/app/filters/default-image.filter.js → src/app/filters/default-image.filter.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .filter('defaultImage', function () {

src/app/filters/index.ts

@@ -0,0 +1 @@
+import "./default-image.filter";

src/app/main.ts

@@ -0,0 +1,18 @@
+import 'angular';
+import 'angular-resource';
+import 'angular-animate';
+import 'ng-infinite-scroll';
+import 'angular-spinner';
+import 'angular-auto-validate/dist/jcs-auto-validate';
+import 'angular-ladda';
+import 'angular-strap';
+import 'angularjs-toaster';
+import 'angular-ui-router';
+
+import './app.main';
+import './services';
+import './directives';
+import './filters';
+import './controllers';
+import './app.routes';
+

src/app/services/contact.resource.js → src/app/services/contact.resource.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .factory("Contact", function ($resource) {

src/app/services/contact.service.js → src/app/services/contact.service.ts

@@ -1,3 +1,5 @@
+import * as angular from 'angular';
+
 angular
     .module('codecraft')
     .factory('ContactService', function (Contact, $rootScope, $q, toaster) {
@@ -14,6 +16,7 @@ angular
         },
         'page'         : 1,
         'hasMore'      : true,
+        'isDeleting'    : false,
         'isLoading'    : false,
         'isSaving'     : false,
         'persons'      : [],
@@ -76,7 +79,7 @@ angular
         'removeContact': function (person) {
           var d = $q.defer();
           self.isDeleting = true;
-          name = person.name;
+          var name = person.name;
           person.$remove().then(function () {
             self.isDeleting = false;
             var index = self.persons.indexOf(person);

src/app/services/index.ts

@@ -0,0 +1,3 @@
+import "./contact.service";
+import "./contact.resource";
+