Reorganizing code using single responsibility principle

README.md

@@ -18,4 +18,14 @@ 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.

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

@@ -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.js

@@ -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.js

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

src/app/controllers/search.controller.js

@@ -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.js

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

src/app/directives/spinner.directive.js

@@ -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.js

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

src/app/services/contact.resource.js

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

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

@@ -1,16 +1,5 @@
 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) {
     var self = {
       getPerson: function(email) {

src/index.html

@@ -65,13 +65,17 @@
   <script src="libs/angular-strap/dist/angular-strap.tpl.min.js"></script>
   <script src="libs/AngularJS-Toaster/toaster.min.js"></script>
   <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
-
   <!-- App -->
   <script src="app/app.main.js"></script>
-  <script src="app/services.js"></script>
-  <script src="app/controllers.js"></script>
-  <script src="app/directives.js"></script>
-  <script src="app/filters.js"></script>
+  <script src="app/services/contact.resource.js"></script>
+  <script src="app/services/contact.service.js"></script>
+  <script src="/app/controllers/person-create.controller.js"></script>
+  <script src="/app/controllers/person-edit.controller.js"></script>
+  <script src="/app/controllers/person-list.controller.js"></script>
+  <script src="/app/controllers/search.controller.js"></script>
+  <script src="app/directives/card.directive.js"></script>
+  <script src="app/directives/spinner.directive.js"></script>
+  <script src="app/filters/default-image.filter.js"></script>
   <script src="app/app.routes.js"></script>
 
 </body>