Step 8

README.md

@@ -96,5 +96,19 @@ The application is a simple contacts application where you can search, create or
     - It depends on a 3rd party component called Toaster which only works in AngularJS, so we upgrade Toaster to use it in Angular via `ajs-upgraded-providers.ts`
     - We inject our upgraded Toaster using the `@Inject` annotation.
 
-
+### Step 8 - Components to Angular
+*Components*
+- Convert all the components to Angular components, during this process we will need to deal with a bunch of 3rd party modules.
+    - For the 3rd party AngularJS `angular-ladda` module we use the Angular version `angular2-ladda`
+    - For the 3rd party AngularJS `ng-infinite-scroll` module we use the Angular version `angular2-infinite-scroll`
+    - For the `angular-spinner` 3rd party AngularJS module we re-write from scratch in Angular using the underlying `spin.js` library.
+    - Since filters can't be upgraded we just need to re-write our `defaultImage` filter as a pipe
+    - We also update the template HTML to use Angular syntax instead of AngularJS syntax.
+    - We then add out components to `NgModule`, ensuring we add as both declarations and entry components so we can use them in AngularJS templates.
+
+
+*UI-Router*
+- Our component code uses ui-router, we will eventually move to using Angular router so for now we just need a patch to continue letting us use ui-router in this hybrid mode.
+    - We upgrade the ui-router services so we can use them in Angular, see `ajs-upgraded-providers.ts`
+    - We stop using ui-router directive such as `ui-sref` and instead hard code URLS in the template.
 

package.json

@@ -39,16 +39,21 @@
     "jquery": "2.1.3",
     "ng-infinite-scroll": "1.2.1",
     "angular-ui-router": "^0.4.2",
-    "angular-spinner": "^1.0.1"
+    "angular-spinner": "^1.0.1",
+    "angular2-infinite-scroll": "^0.3.3",
+    "angular2-ladda": "^1.1.1",
+    "spin.js": "^2.3.2"
   },
   "devDependencies": {
-    "@types/angular": "^1.4.0",
+    "@types/angular": "^1.6.2",
+    "@types/spin.js": "^2.3.0",
     "bower": "^1.8.0",
     "json-server": "^0.9.6",
     "serve": "^5.1.2",
     "rimraf": "^2.6.0",
     "ts-loader": "^2.0.1",
     "typescript": "^2.2.1",
-    "webpack": "^2.2.1"
+    "webpack": "^2.2.1",
+    "script-loader": "^0.7.0"
   }
 }

src/app/ajs-upgraded-providers.ts

@@ -8,4 +8,27 @@ export const toasterServiceProvider = {
   provide: Toaster,
   useFactory: toasterServiceFactory,
   deps: ['$injector']
+};
+
+export const UIRouterState = new OpaqueToken("UIRouterState");
+
+export function uiRouterStateServiceFactory(i: any) {
+  return i.get('$state');
+}
+export const uiRouterStateProvider = {
+  provide: UIRouterState,
+  useFactory: uiRouterStateServiceFactory,
+  deps: ['$injector']
+};
+
+
+export const UIRouterStateParams = new OpaqueToken("UIRouterStateParams");
+
+export function uiRouterStateParamsServiceFactory(i: any) {
+  return i.get('$stateParams');
+}
+export const uiRouterStateParamsProvider = {
+  provide: UIRouterStateParams,
+  useFactory: uiRouterStateParamsServiceFactory,
+  deps: ['$injector']
 };

src/app/components/card.component.ts

@@ -1,71 +1,63 @@
-import * as angular from 'angular';
+import {Input, Component} from "@angular/core";
+import {ContactService} from "../services/contact.service";
 
-let CardComponent = {
+@Component({
   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" />
+        <img src="{{ user.photo | defaultImage }}"
+        alt=""
+        class="img-rounded img-responsive" />
       </div>
       <div class="col-md-8">
-        <h4>{{ $ctrl.user.name }}
+        <h4>{{ user.name }}
           <i class="fa"
-             ng-class="{'fa-female':$ctrl.user.sex == 'F', 'fa-male': $ctrl.user.sex == 'M'}"></i>
+             [ngClass]="{'fa-female':user.sex == 'F', 'fa-male': user.sex == 'M'}"></i>
         </h4>
-        <small>{{ $ctrl.user.city }}, {{ $ctrl.user.country }}
+        <small>{{ user.city }}, {{ user.country }}
           <i class="fa fa-map-marker"></i>
         </small>
         <p>
           <i class="fa fa-envelope-o"></i>
-          {{ $ctrl.user.email }}
+          {{ user.email }}
           <br />
           <i class="fa fa-gift"></i>
-          {{ $ctrl.user.birthdate | date:"longDate"}}
+          {{ user.birthdate | date:"longDate"}}
         </p>
-        <button type="button"
-                class="btn btn-default btn-sm"
-                ui-sref="edit({email:$ctrl.user.email})">
+
+        <a class="btn btn-default btn-sm"
+           [attr.href]="'#!/edit/' +  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()">
+        </a>
+
+        <a class="btn btn-danger btn-sm"
+           [ladda]="isDeleting"
+           (click)="deleteUser()">
           <i class="fa fa-trash"></i>
           &nbsp;Delete
-        </button>
+        </a>
+
       </div>
     </div>
   </div>
 </div>
-`,
-  bindings: {
-    'user': '='
-  },
-  controller: class CardController {
-    private ContactService;
-    private isDeleting;
-    private user;
+`
+})
+export class CardComponent {
+  @Input()
+  public user;
+  public isDeleting = false;
 
-    constructor(ContactService) {
-      this.ContactService = ContactService;
-      this.isDeleting = false;
-    }
-
-    deleteUser() {
-      this.isDeleting = true;
-      this.ContactService.removeContact(this.user).then(() => {
-        this.isDeleting = false;
-      });
-    };
+  constructor(private contactService: ContactService) {
   }
-};
-
 
-angular
-    .module('codecraft')
-    .component(CardComponent.selector, CardComponent);
+  deleteUser() {
+    this.isDeleting = true;
+    this.contactService.removeContact(this.user).then(() => {
+      this.isDeleting = false;
+    });
+  };
+}

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

@@ -1,54 +1,34 @@
-import * as angular from 'angular';
+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 = {};
+import {Component, Inject} from "@angular/core";
+import {downgradeComponent} from "@angular/upgrade/static";
+import {ContactService} from "../services/contact.service";
+import {UIRouterStateParams, UIRouterState} from "../ajs-upgraded-providers";
 
-    private $state = null;
+@Component({
+  selector: 'personCreate',
+  templateUrl: 'app/components/person-modify.component.html'
+})
+export class PersonCreateComponent {
+  public mode: string = 'Create';
+  public person = {};
 
-    constructor($state, ContactService) {
-      this.$state = $state;
-      this.contacts = ContactService;
-      this.person = {};
-    }
+  constructor(@Inject(UIRouterStateParams) private $stateParams,
+              @Inject(UIRouterState) private $state,
+              private contacts: ContactService) {
+    this.person = this.contacts.getPerson(this.$stateParams.email);
+  }
 
-    save() {
-      console.log("createContact");
-      this.contacts.createContact(this.person)
-          .then(() => {
-            this.$state.go("list");
-          })
-    }
+  save() {
+    this.contacts.createContact(this.person)
+        .then(() => {
+          this.$state.go("list");
+        })
   }
-};
+}
 
 angular
     .module('codecraft')
-    .component(PersonCreateComponent.selector, PersonCreateComponent);
+    .directive('personCreate', downgradeComponent({
+      component: PersonCreateComponent
+    }) as angular.IDirectiveFactory);

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

@@ -1,73 +1,42 @@
-import * as angular from 'angular';
+import * as angular from "angular";
 
+import {Component, Inject} from "@angular/core";
+import {downgradeComponent} from "@angular/upgrade/static";
+import {ContactService} from "../services/contact.service";
+import {UIRouterStateParams, UIRouterState} from "../ajs-upgraded-providers";
 
-export let PersonEditComponent = {
+@Component({
   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");
-          })
-    }
+  templateUrl: 'app/components/person-modify.component.html'
+})
+export class PersonEditComponent {
+  public mode: string = 'Edit';
+  public person: any;
+
+  constructor(@Inject(UIRouterStateParams) private $stateParams,
+              @Inject(UIRouterState) private $state,
+              private contacts: ContactService) {
+    this.person = this.contacts.getPerson(this.$stateParams.email);
+  }
 
-    remove() {
-      this.contacts.removeContact(this.person)
-          .then(() => {
-            this.$state.go("list");
-          })
-    }
+  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);
+    .directive('personEdit', downgradeComponent({
+      inputs: ['mode'],
+      component: PersonEditComponent
+    }) as angular.IDirectiveFactory);