Step 4

README.md

@@ -51,3 +51,20 @@ The application is a simple contacts application where you can search, create or
 ### Step 3 - AngularJS 1.5+
 
 - Upgrade "angular", "angular-animate" and "angular-resource" to the latest 1.x version of angualr (1.6.2 in this example)
+
+### Step 4
+
+*Controllers => Components*
+- Rename folder `controllers` to `components`
+- Rename `*.controller.ts` to `*.component.ts`
+- Change all controllers to be components using a component definition object
+    - Remove relevant template files and inline in component
+    - Components use controller as syntax by default so in template remember to now use `$ctrl`
+    - Note: selector in component will be converted to snake case when used in template, so `personList` will be used as `person-list`
+    - Change `templates/form.html` this is used in edit and create components and now needs to use `$ctrl`
+
+*Directives => Components*
+- Move the `card.directive` and `spinner.directive` to the component folder and rename to components
+- Convert both of these to components as well
+
+- Changed `app.routes.ts` to use components as HTML tags i.e. `template: '<person-list></person-list>'`    

src/app/app.routes.ts

@@ -5,33 +5,29 @@ angular
     .config(function ($stateProvider, $urlRouterProvider) {
       $stateProvider
           .state('list', {
-            url  : "/",
+            url: "/",
             views: {
-              'main'  : {
-                templateUrl: 'templates/list.html',
-                controller : 'PersonListController'
+              'main': {
+                template: '<person-list></person-list>',
               },
               'search': {
-                templateUrl: 'templates/searchform.html',
-                controller : 'SearchController'
+                template: '<search></search>',
               }
             }
           })
           .state('edit', {
-            url  : "/edit/:email",
+            url: "/edit/:email",
             views: {
               'main': {
-                templateUrl: 'templates/edit.html',
-                controller : 'PersonEditController'
+                template: '<person-edit></person-edit>'
               }
             }
           })
           .state('create', {
-            url  : "/create",
+            url: "/create",
             views: {
               'main': {
-                templateUrl: 'templates/create.html',
-                controller : 'PersonCreateController'
+                template: '<person-create></person-create>'
               }
             }
           });

src/app/components/card.component.ts

@@ -0,0 +1,71 @@
+import * as angular from 'angular';
+
+let CardComponent = {
+  selector: 'ccCard',
+  template: `<div class="col-md-6">
+  <div class="well well-sm">
+    <div class="row">
+      <div class="col-md-4">
+        <img ng-src="{{ $ctrl.user.photo  | defaultImage }}"
+             alt=""
+             class="img-rounded img-responsive" />
+      </div>
+      <div class="col-md-8">
+        <h4>{{ $ctrl.user.name }}
+          <i class="fa"
+             ng-class="{'fa-female':$ctrl.user.sex == 'F', 'fa-male': $ctrl.user.sex == 'M'}"></i>
+        </h4>
+        <small>{{ $ctrl.user.city }}, {{ $ctrl.user.country }}
+          <i class="fa fa-map-marker"></i>
+        </small>
+        <p>
+          <i class="fa fa-envelope-o"></i>
+          {{ $ctrl.user.email }}
+          <br />
+          <i class="fa fa-gift"></i>
+          {{ $ctrl.user.birthdate | date:"longDate"}}
+        </p>
+        <button type="button"
+                class="btn btn-default btn-sm"
+                ui-sref="edit({email:$ctrl.user.email})">
+          <i class="fa fa-pencil"></i>
+          &nbsp;Edit
+        </button>
+        <button type="button"
+                class="btn btn-danger btn-sm"
+                ladda="$ctrl.isDeleting"
+                ng-click="$ctrl.deleteUser()">
+          <i class="fa fa-trash"></i>
+          &nbsp;Delete
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`,
+  bindings: {
+    'user': '='
+  },
+  controller: class CardController {
+    private ContactService;
+    private isDeleting;
+    private user;
+
+    constructor(ContactService) {
+      this.ContactService = ContactService;
+      this.isDeleting = false;
+    }
+
+    deleteUser() {
+      this.isDeleting = true;
+      this.ContactService.removeContact(this.user).then(() => {
+        this.isDeleting = false;
+      });
+    };
+  }
+};
+
+
+angular
+    .module('codecraft')
+    .component(CardComponent.selector, CardComponent);

src/app/components/index.ts

@@ -0,0 +1,6 @@
+import "./person-create.component";
+import "./person-edit.component";
+import "./person-list.component";
+import "./card.component";
+import "./spinner.component";
+import "./search.component";

src/app/components/person-create.component.ts

@@ -0,0 +1,54 @@
+import * as angular from 'angular';
+
+export let PersonCreateComponent = {
+  selector: 'personCreate',
+  template: `
+<div class="col-md-8 col-md-offset-2">
+  <form class="form-horizontal"
+        ng-submit="$ctrl.save()"
+        novalidate>
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        Create
+        <div class="pull-right">
+          <button class="btn btn-primary btn-sm"
+                  ladda="$ctrl.contacts.isSaving"
+                  type="submit">Create
+          </button>
+        </div>
+        <div class="clearfix"></div>
+
+      </div>
+      <div class="panel-body">
+        <ng-include src="'templates/form.html'"></ng-include>
+      </div>
+    </div>
+  </form>
+</div>
+`,
+  bindings: {},
+  controller: class PersonCreateController {
+    public contacts = null;
+    public person = {};
+
+    private $state = null;
+
+    constructor($state, ContactService) {
+      this.$state = $state;
+      this.contacts = ContactService;
+      this.person = {};
+    }
+
+    save() {
+      console.log("createContact");
+      this.contacts.createContact(this.person)
+          .then(() => {
+            this.$state.go("list");
+          })
+    }
+  }
+};
+
+angular
+    .module('codecraft')
+    .component(PersonCreateComponent.selector, PersonCreateComponent);

src/app/components/person-edit.component.ts

@@ -0,0 +1,73 @@
+import * as angular from 'angular';
+
+
+export let PersonEditComponent = {
+  selector: 'personEdit',
+  template: `
+<div class="col-md-8 col-md-offset-2" >
+	<form class="form-horizontal"
+	      ng-submit="$ctrl.save()"
+	      novalidate >
+		<div class="panel panel-default" >
+			<div class="panel-heading" >
+				Edit
+				<div class="pull-right" >
+					<button class="btn btn-primary btn-sm"
+					        ladda="$ctrl.contacts.isSaving"
+					        type="submit" >
+						<span >Save</span >
+					</button >
+
+					<button class="btn btn-danger btn-sm"
+					        ladda="$ctrl.contacts.isDeleting"
+					        ng-click="$ctrl.remove()" >Delete
+					</button >
+				</div >
+				<div class="clearfix" ></div >
+
+			</div >
+			<div class="panel-body" >
+
+				<ng-include src="'templates/form.html'" ></ng-include >
+
+			</div >
+		</div >
+	</form >
+</div > 
+`,
+  bindings: {},
+  controller: class PersonCreateController {
+
+    public contacts = null;
+    public person = {};
+
+    private $state = null;
+    private $stateParams = null;
+
+    constructor($stateParams, $state, ContactService) {
+      this.$stateParams = $stateParams;
+      this.$state = $state;
+      this.contacts = ContactService;
+      this.person = this.contacts.getPerson(this.$stateParams.email);
+    }
+
+    save() {
+      this.contacts.updateContact(this.person)
+          .then(() => {
+            this.$state.go("list");
+          })
+    }
+
+    remove() {
+      this.contacts.removeContact(this.person)
+          .then(() => {
+            this.$state.go("list");
+          })
+    }
+
+  }
+};
+
+angular
+    .module('codecraft')
+    .component(PersonEditComponent.selector, PersonEditComponent);

src/app/components/person-list.component.ts

@@ -0,0 +1,43 @@
+import * as angular from 'angular';
+
+
+export let PersonListComponent = {
+  selector: 'personList',
+  template: `
+<div class="col-md-12" >
+
+	<div class="row"
+	     infinite-scroll="$ctrl.contacts.loadMore()"
+	     infinite-scroll-immediate-check="false"
+	     infinite-scroll-distance="1"
+			>
+
+		<cc-card ng-repeat="person in $ctrl.contacts.persons"
+				     user="person" >
+		</cc-card>
+
+	</div >
+
+	<div ng-show="$ctrl.contacts.persons.length == 0 && !$ctrl.contacts.isLoading" >
+		<div class="alert alert-info" >
+			<p class="text-center" >No results found for search term '{{ $ctrl.search }}'</p >
+		</div >
+	</div >
+
+	<cc-spinner is-loading="$ctrl.contacts.isLoading"
+	            message="Loading..." ></cc-spinner >
+</div >
+`,
+  bindings: {},
+  controller: class PersonListController {
+    public contacts = null;
+
+    constructor(ContactService) {
+      this.contacts = ContactService;
+    }
+  }
+};
+
+angular
+    .module('codecraft')
+    .component(PersonListComponent.selector, PersonListComponent);

src/app/components/search.component.ts

@@ -0,0 +1,52 @@
+import * as angular from 'angular';
+
+
+export let SearchComponent = {
+  selector: 'search',
+  template: `
+<form class="navbar-form navbar-left">
+
+  <div class="form-group">
+    <input type="text"
+           class="form-control"
+           id="name"
+           ng-model="$ctrl.contacts.search"
+           ng-model-options="{ debounce: 300 }"
+           placeholder="Search name..."
+           ng-change="$ctrl.contacts.doSearch()"
+    />
+  </div>
+
+  <div class="form-group">
+    <select class="form-control"
+            ng-model="$ctrl.contacts.sorting"
+            ng-change="$ctrl.contacts.doSearch()">
+      <option value="name">Name</option>
+      <option value="email">Email</option>
+    </select>
+  </div>
+
+  <div class="form-group">
+    <select class="form-control"
+            ng-model="$ctrl.contacts.ordering"
+            ng-change="$ctrl.contacts.doSearch()">
+      <option value="ASC">ASC</option>
+      <option value="DESC">DESC</option>
+    </select>
+  </div>
+</form>
+`,
+  bindings: {},
+  controller: class SearchController {
+    private contacts = null;
+
+    constructor(ContactService) {
+      this.contacts = ContactService;
+    }
+  }
+};
+
+
+angular
+    .module('codecraft')
+    .component(SearchComponent.selector, SearchComponent);

src/app/components/spinner.component.ts

@@ -0,0 +1,22 @@
+import * as angular from 'angular';
+
+export let SpinnerComponent = {
+  selector: 'ccSpinner',
+  template: `
+<div class="spinner"
+     ng-show="$ctrl.isLoading">
+  <span us-spinner="{radius:8, width:5, length: 3, lines:9}"></span>
+  <p>{{ $ctrl.message }}</p>
+</div>
+`,
+  bindings: {
+    'isLoading': '=',
+    'message': '@'
+  },
+  controller: class SpinnerController {
+  }
+};
+
+angular
+    .module('codecraft')
+    .component(SpinnerComponent.selector, SpinnerComponent);