Step 2 ts webpack

.gitignore

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

README.md

@@ -18,4 +18,38 @@ 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 for Migration.
+
+Preparing for migration:
+
+STEP 1:
+
+Follow the step 1 of angular style guide https://github.com/johnpapa/angular-styleguide
+
+Single Responsibility: Organize the code in such a maner that 1 file contains only one component.
+
+STEP 2:
+
+Move all the dependencies from bower to npm with approprate npm naming and version in package.json and run npm install.
+
+Convert all the JS files to TS files.
+Add index.ts files in each directory importing all the entities.
+
+install following dev dependencies: rimraf, ts-loader, typescript, webpack, @types/angular
+npm install rimraf ts-loader typescript webpack @types/angular --save-dev
+
+run tsc --init in project dir to generate tsconfig.json file and set appropriate ts configuration options.
+
+Create webpack.config.js file and configure webpack options accordingly.
+
+add amin.ts file containing all the imports corresponding to the scripts in index.html file and remove scripts from index.html file.
+
+add bundle.js file in script tag in index.html file.
+
+add build script in package.json rimraf src/dist && webpack --bail --progress --profile
+
+run build scipt start the app and verify if everything works file.
+
+optionally can add dist folders to .gitignore file.

package.json

@@ -6,14 +6,36 @@
   "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-spinner": "^1.0.1",
+    "angular-strap": "^2.3.12",
+    "angular-ui-router": "^0.4.2",
+    "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"
+  },
   "devDependencies": {
+    "@types/angular": "^1.8.4",
     "bower": "^1.8.0",
     "json-server": "^0.9.6",
-    "serve": "^5.1.2"
+    "rimraf": "^3.0.2",
+    "serve": "^5.1.2",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0"
   }
 }

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

@@ -11,10 +11,10 @@ angular
     "ui.router"
   ])
   .config(function(
-    $httpProvider,
-    $resourceProvider,
-    laddaProvider,
-    $datepickerProvider
+    $httpProvider: any,
+    $resourceProvider: any,
+    laddaProvider: any,
+    $datepickerProvider: any
   ) {
     laddaProvider.setOption({
       style: "expand-right"

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

@@ -1,6 +1,6 @@
 angular
   .module("codecraft")
-  .config(function($stateProvider, $urlRouterProvider) {
+  .config(function($stateProvider: any, $urlRouterProvider: any) {
     $stateProvider
       .state("list", {
         url: "/",

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.ts

@@ -0,0 +1,17 @@
+angular
+  .module("codecraft")
+  .controller("PersonCreateController", function(
+    $scope,
+    $state,
+    ContactService
+  ) {
+    $scope.contacts = ContactService;
+    $scope.person = {};
+
+    $scope.save = function() {
+      console.log("createContact");
+      $scope.contacts.createContact($scope.person).then(function() {
+        $state.go("list");
+      });
+    };
+  })

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

@@ -0,0 +1,23 @@
+angular
+  .module("codecraft")
+  .controller("PersonEditController", function(
+    $scope,
+    $stateParams,
+    $state,
+    ContactService
+  ) {
+    $scope.contacts = ContactService;
+    $scope.person = $scope.contacts.getPerson($stateParams.email);
+
+    $scope.save = function() {
+      $scope.contacts.updateContact($scope.person).then(function() {
+        $state.go("list");
+      });
+    };
+
+    $scope.remove = function() {
+      $scope.contacts.removeContact($scope.person).then(function() {
+        $state.go("list");
+      });
+    };
+  })

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

@@ -0,0 +1,5 @@
+angular
+  .module("codecraft")
+  .controller("PersonListController", function($scope, ContactService) {
+    $scope.contacts = ContactService;
+  })

src/app/controllers/search.controller.ts

@@ -0,0 +1,9 @@
+angular
+  .module("codecraft")
+  .controller("SearchController", function($scope, ContactService) {
+    $scope.contacts = ContactService;
+
+    $scope.loadMore = function() {
+      $scope.contacts.loadMore();
+    };
+  });

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

@@ -18,13 +18,3 @@ angular
       }
     };
   })
-  .directive("ccSpinner", function() {
-    return {
-      restrict: "AE",
-      templateUrl: "templates/spinner.html",
-      scope: {
-        isLoading: "=",
-        message: "@"
-      }
-    };
-  });

src/app/directives/index.ts

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

src/app/directives/spinner.directive.ts

@@ -0,0 +1,12 @@
+angular
+  .module("codecraft")
+  .directive("ccSpinner", function() {
+    return {
+      restrict: "AE",
+      templateUrl: "templates/spinner.html",
+      scope: {
+        isLoading: "=",
+        message: "@"
+      }
+    };
+  });

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

@@ -0,0 +1,12 @@
+angular.module("codecraft").filter("defaultImage", function() {
+    return function(input: any, param: any) {
+      if (!param) {
+        param = "/img/avatar.png";
+      }
+      if (!input) {
+        return param;
+      }
+      return input;
+    };
+  });
+

src/app/filters/index.ts

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

src/app/main.ts

@@ -0,0 +1,19 @@
+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 './filters';
+import './directives';
+import './controllers';
+import './app.routes';

src/app/services/contact.resource.ts

@@ -0,0 +1,13 @@
+angular
+  .module("codecraft")
+  .factory("Contact", function($resource : any) {
+    return $resource(
+      "http://localhost:3000/contacts/:id",
+      {id: "@id"},
+      {
+        update: {
+          method: "PUT"
+        }
+      }
+    );
+  })

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

@@ -1,22 +1,11 @@
 angular
   .module("codecraft")
-  .factory("Contact", function($resource) {
-    return $resource(
-      "http://localhost:3000/contacts/:id",
-      {id: "@id"},
-      {
-        update: {
-          method: "PUT"
-        }
-      }
-    );
-  })
-  .factory("ContactService", function(Contact, $rootScope, $q, toaster) {
+  .factory("ContactService", function(Contact: any, $rootScope: any, $q: any, toaster: any) {
     var self = {
-      getPerson: function(email) {
+      getPerson: function(email: any) {
         console.log(email);
         for (var i = 0; i < self.persons.length; i++) {
-          var obj = self.persons[i];
+          var obj: any = self.persons[i];
           if (obj.email == email) {
             return obj;
           }
@@ -26,10 +15,11 @@ angular
       hasMore: true,
       isLoading: false,
       isSaving: false,
-      persons: [],
+      persons: [] as any[],
       search: null,
       sorting: "name",
       ordering: "ASC",
+      isDeleting: false,
       doSearch: function() {
         self.hasMore = true;
         self.page = 1;
@@ -53,7 +43,7 @@ angular
             q: self.search
           };
 
-          Contact.query(params, function(data) {
+          Contact.query(params, function(data: any) {
             console.debug(data);
             angular.forEach(data, function(person) {
               self.persons.push(new Contact(person));
@@ -72,7 +62,7 @@ angular
           self.loadContacts();
         }
       },
-      updateContact: function(person) {
+      updateContact: function(person: any) {
         var d = $q.defer();
         self.isSaving = true;
         person.$update().then(function() {
@@ -82,10 +72,10 @@ angular
         });
         return d.promise;
       },
-      removeContact: function(person) {
+      removeContact: function(person: any) {
         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);
@@ -95,7 +85,7 @@ angular
         });
         return d.promise;
       },
-      createContact: function(person) {
+      createContact: function(person: any) {
         var d = $q.defer();
         self.isSaving = true;
         Contact.save(person).$promise.then(function() {