From 82c7ab4d0df1c25c6e82cbd4cb34fed5d213d8f8 Mon Sep 17 00:00:00 2001 From: Asim Hussain Date: Mon, 3 Apr 2017 23:14:14 -0600 Subject: [PATCH] Step 9 - Routing & Booting in Angular --- README.md | 20 ++++++++ package.json | 2 + src/app/app.routes.ts | 46 +++++-------------- src/app/components/app-root.component.ts | 44 ++++++++++++++++++ src/app/components/card.component.ts | 2 +- src/app/components/index.ts | 1 + src/app/components/person-create.component.ts | 20 +++----- src/app/components/person-edit.component.ts | 31 ++++++------- src/app/main.ts | 37 ++++++++------- src/app/services/contact.service.ts | 4 +- src/index.html | 38 +-------------- 11 files changed, 122 insertions(+), 123 deletions(-) create mode 100644 src/app/components/app-root.component.ts diff --git a/README.md b/README.md index 072991a..ce48ffc 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,7 @@ The application is a simple contacts application where you can search, create or - 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` @@ -112,3 +113,22 @@ The application is a simple contacts application where you can search, create or - 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. +### Step 9 - Routing & Booting Angular + +*Booting* +- To use Angular router we need to stop dual booting. +- This means we can't use the upgrade module anymore and we need solutions for all the upgrades AngularJS modules. + - For the upgraded ui-router service we can just ignore since we are dropping those. + - For the Toaster AngularJS module we will use the `angular2-toaster` package. +- We also need a root `app.component` and add that to `NgModule` as a declaration aswell as a bootstrap value. +- We also need to remove the dual boot code from `NgModule` +- We add a `` to the index.html +- We replace `index.html` body HTML with `` + +*Routing* +- We update `app.routes` to use Angular route config instead of ui-route config. +- We need to edit the component templates so that we use the Angular Router directives such as `routerOutlet` and `routerLink` etc.. +- We replace `UIRouterStateParams` with `ActivatedRoute` +- We replace `UIRouterState` with `Router` instead of `this.$state.go(...)` we use `this.router.navigate([...])` +- We add the `RouterModule` to `NgModule` and provide the routes. + diff --git a/package.json b/package.json index 26bae30..dbc0691 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,8 @@ "ng-infinite-scroll": "1.2.1", "angular-ui-router": "^0.4.2", "angular-spinner": "^1.0.1", + + "angular2-toaster": "^2.0.0", "angular2-infinite-scroll": "^0.3.3", "angular2-ladda": "^1.1.1", "spin.js": "^2.3.2" diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 016eef2..6790c25 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,36 +1,14 @@ -import * as angular from 'angular'; +import {Routes} from "@angular/router"; -angular - .module('codecraft') - .config(function ($stateProvider, $urlRouterProvider) { - $stateProvider - .state('list', { - url: "/", - views: { - 'main': { - template: '', - }, - 'search': { - template: '', - } - } - }) - .state('edit', { - url: "/edit/:email", - views: { - 'main': { - template: '' - } - } - }) - .state('create', { - url: "/create", - views: { - 'main': { - template: '' - } - } - }); +import {SearchComponent} from "./components/search.component"; +import {PersonListComponent} from "./components/person-list.component"; +import {PersonCreateComponent} from "./components/person-create.component"; +import {PersonEditComponent} from "./components/person-edit.component"; - $urlRouterProvider.otherwise('/'); - }); \ No newline at end of file +export const routes: Routes = [ + {path: '', redirectTo: '/list(header:search)', pathMatch: 'full'}, + {path: 'list', component: PersonListComponent}, + {path: 'search', component: SearchComponent, outlet: 'header'}, + {path: 'create', component: PersonCreateComponent}, + {path: 'edit/:email', component: PersonEditComponent}, +]; \ No newline at end of file diff --git a/src/app/components/app-root.component.ts b/src/app/components/app-root.component.ts new file mode 100644 index 0000000..2c933c7 --- /dev/null +++ b/src/app/components/app-root.component.ts @@ -0,0 +1,44 @@ +import {Component} from "@angular/core"; + +@Component({ + selector: 'app-root', + template: ` + + +
+ + + +
+ + + +
+
+` +}) +export class AppRootComponent { + +} \ No newline at end of file diff --git a/src/app/components/card.component.ts b/src/app/components/card.component.ts index 7a836b7..c475bb4 100644 --- a/src/app/components/card.component.ts +++ b/src/app/components/card.component.ts @@ -28,7 +28,7 @@ import {ContactService} from "../services/contact.service";

+ [routerLink]="['/edit', user.email]">  Edit diff --git a/src/app/components/index.ts b/src/app/components/index.ts index 06d4a0c..8a72afa 100644 --- a/src/app/components/index.ts +++ b/src/app/components/index.ts @@ -4,3 +4,4 @@ import "./person-list.component"; import "./card.component"; import "./spinner.component"; import "./search.component"; +import "./app-root.component"; \ No newline at end of file diff --git a/src/app/components/person-create.component.ts b/src/app/components/person-create.component.ts index 83393ea..ceecff4 100644 --- a/src/app/components/person-create.component.ts +++ b/src/app/components/person-create.component.ts @@ -1,9 +1,8 @@ import * as angular from "angular"; import {Component, Inject} from "@angular/core"; -import {downgradeComponent} from "@angular/upgrade/static"; +import {Router} from "@angular/router"; import {ContactService} from "../services/contact.service"; -import {UIRouterStateParams, UIRouterState} from "../ajs-upgraded-providers"; @Component({ selector: 'personCreate', @@ -13,22 +12,15 @@ export class PersonCreateComponent { public mode: string = 'Create'; public person = {}; - constructor(@Inject(UIRouterStateParams) private $stateParams, - @Inject(UIRouterState) private $state, - private contacts: ContactService) { - this.person = this.contacts.getPerson(this.$stateParams.email); + constructor(private contacts: ContactService, + private router: Router) { + this.person = {}; } save() { this.contacts.createContact(this.person) .then(() => { - this.$state.go("list"); + this.router.navigate(['']); }) } -} - -angular - .module('codecraft') - .directive('personCreate', downgradeComponent({ - component: PersonCreateComponent - }) as angular.IDirectiveFactory); \ No newline at end of file +} \ No newline at end of file diff --git a/src/app/components/person-edit.component.ts b/src/app/components/person-edit.component.ts index 7700262..a723630 100644 --- a/src/app/components/person-edit.component.ts +++ b/src/app/components/person-edit.component.ts @@ -1,10 +1,9 @@ -import * as angular from "angular"; - import {Component, Inject} from "@angular/core"; -import {downgradeComponent} from "@angular/upgrade/static"; +import {Router, ActivatedRoute} from "@angular/router"; import {ContactService} from "../services/contact.service"; import {UIRouterStateParams, UIRouterState} from "../ajs-upgraded-providers"; + @Component({ selector: 'personEdit', templateUrl: 'app/components/person-modify.component.html' @@ -13,30 +12,28 @@ 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); + constructor(private contacts: ContactService, + private route: ActivatedRoute, + private router: Router) { + this.route.params.subscribe(params => { + console.log(params); + if (params['email']) { + this.person = this.contacts.getPerson(params['email']); + } + }); } save() { this.contacts.updateContact(this.person) .then(() => { - this.$state.go("list"); + this.router.navigate(['']); }) } remove() { this.contacts.removeContact(this.person) .then(() => { - this.$state.go("list"); + this.router.navigate(['']); }) } -} - -angular - .module('codecraft') - .directive('personEdit', downgradeComponent({ - inputs: ['mode'], - component: PersonEditComponent - }) as angular.IDirectiveFactory); \ No newline at end of file +} \ No newline at end of file diff --git a/src/app/main.ts b/src/app/main.ts index 4517ff0..994f65f 100644 --- a/src/app/main.ts +++ b/src/app/main.ts @@ -26,13 +26,12 @@ import {HttpModule} from '@angular/http'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {InfiniteScrollModule} from 'angular2-infinite-scroll'; import {LaddaModule} from "angular2-ladda/module/module"; +import {RouterModule} from "@angular/router"; +import {ToasterModule} from 'angular2-toaster'; + import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; -import { - toasterServiceProvider, - uiRouterStateParamsProvider, - uiRouterStateProvider -} from "./ajs-upgraded-providers" +import {routes} from './app.routes' import {Contact} from "./services/contact.resource"; import {ContactService} from "./services/contact.service"; @@ -43,6 +42,7 @@ import {PersonListComponent} from "./components/person-list.component"; import {PersonEditComponent} from "./components/person-edit.component"; import {PersonCreateComponent} from "./components/person-create.component"; import {SearchComponent} from "./components/search.component"; +import {AppRootComponent} from "./components/app-root.component"; import {DefaultImagePipe} from "./pipes/default-image.pipe"; @@ -55,7 +55,9 @@ import {DefaultImagePipe} from "./pipes/default-image.pipe"; LaddaModule, FormsModule, ReactiveFormsModule, - InfiniteScrollModule + InfiniteScrollModule, + ToasterModule, + RouterModule.forRoot(routes, {useHash: true}) ], declarations: [ CardComponent, @@ -64,7 +66,8 @@ import {DefaultImagePipe} from "./pipes/default-image.pipe"; DefaultImagePipe, PersonEditComponent, PersonCreateComponent, - SearchComponent + SearchComponent, + AppRootComponent ], entryComponents: [ CardComponent, @@ -72,25 +75,21 @@ import {DefaultImagePipe} from "./pipes/default-image.pipe"; PersonListComponent, PersonEditComponent, PersonCreateComponent, - SearchComponent + SearchComponent, + AppRootComponent ], providers: [ Contact, - ContactService, - toasterServiceProvider, - uiRouterStateParamsProvider, - uiRouterStateProvider + ContactService ], + bootstrap: [ + AppRootComponent + ] }) export class AppModule { - // Override Angular bootstrap so it doesn't do anything - ngDoBootstrap() { - } } // Bootstrap using the UpgradeModule -platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => { - console.log("Bootstrapping in Hybrid mode with Angular & AngularJS"); - const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; - upgrade.bootstrap(document.body, ['codecraft']); +platformBrowserDynamic().bootstrapModule(AppModule).then(() => { + console.log("Bootstrapping Angular"); }); \ No newline at end of file diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts index d6e3597..a9ce902 100644 --- a/src/app/services/contact.service.ts +++ b/src/app/services/contact.service.ts @@ -2,8 +2,8 @@ import * as angular from 'angular'; import {Injectable, Inject} from "@angular/core"; import {downgradeInjectable} from '@angular/upgrade/static'; -import {Toaster} from "../ajs-upgraded-providers"; import {Contact} from "./contact.resource"; +import {ToasterService} from 'angular2-toaster'; @Injectable() export class ContactService { @@ -18,7 +18,7 @@ export class ContactService { public ordering = 'ASC'; - constructor(private contact: Contact, @Inject(Toaster) private toaster) { + constructor(private contact: Contact, private toaster: ToasterService) { this.loadContacts(); } diff --git a/src/index.html b/src/index.html index 7afcd4b..1a547d1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,7 @@ + Contacts @@ -19,42 +20,7 @@ - - -
- - - -
- -
-
- -
-
+