feat(demo): post the form

packages/demos/angular/README.md

@@ -12,6 +12,7 @@ To use _this_ application perform the following commands from this directory:
 - `npm start` - to serve the application
 - `npm test` - to run the unit tests
 - `npm run e2e` - to run the end to end tests
+- `npx ts-node server/server.ts` - run the server required by any page that does a test post
 
 See the `package.json` file for a complete list of scripts. The above are just the most common.
 

packages/demos/angular/package.json

@@ -24,7 +24,9 @@
     "@angular/router": "latest",
     "@ionic/angular": "next",
     "@ionic/core": "next",
+    "body-parser": "^1.18.2",
     "core-js": "^2.4.1",
+    "express": "^4.16.2",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
@@ -46,7 +48,7 @@
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
-    "ts-node": "~3.2.0",
+    "ts-node": "^3.2.2",
     "tslint": "~5.7.0",
     "typescript": "^2.5.2"
   }

packages/demos/angular/server/server.ts

@@ -0,0 +1,25 @@
+import * as bodyParser from 'body-parser';
+import * as express from 'express';
+
+const app = express();
+
+app.set('port', process.env.PORT || 5000);
+
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+
+app.use(function(req, res, next) {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  next();
+});
+
+app.post('/test', (req, res) => {
+  res.send(req.body);
+});
+
+app.listen(app.get('port'), () => {
+  console.log('Node app is running on port', app.get('port'));
+});

packages/demos/angular/src/app/app.module.ts

@@ -1,8 +1,10 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
+import { PostTestService } from './post-test/post-test.service';
 
 import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
 
@@ -11,10 +13,12 @@ import { IonicAngularModule, IonicRouterModule } from '@ionic/angular';
   imports: [
     AppRoutingModule,
     BrowserModule,
+    HttpClientModule,
     IonicAngularModule.forRoot(),
     IonicRouterModule.forRoot()
   ],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [PostTestService]
 })
-export class AppModule {}
+export class AppModule { }

packages/demos/angular/src/app/form-sample-page/form-sample-page.component.html

@@ -82,7 +82,7 @@
         </ion-list>
       </ion-content>
       <ion-footer>
-        <ion-button expand="block" [disabled]="myForm.invalid" (click)="save()">
+        <ion-button expand="block" [disabled]="myForm.invalid" (click)="save(myForm.value)">
           <ion-icon name="save" slot="start"></ion-icon>Looks Good to Me</ion-button>
       </ion-footer>
     </ion-page>

packages/demos/angular/src/app/form-sample-page/form-sample-page.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { HomePageComponent } from '../home-page/home-page.component';
-import { HomePage } from '../../../e2e/home.po';
+import { PostTestService } from '../post-test/post-test.service';
 
 @Component({
   selector: 'app-form-sample-page',
@@ -22,24 +21,12 @@ export class FormSamplePageComponent implements OnInit {
   desiredSalary: number;
   levelOfHappy: number;
 
-  constructor(private router: Router) { }
+  constructor(private postman: PostTestService, private router: Router) { }
 
   ngOnInit() { }
 
-  save() {
-    const data = {
-      firstName: this.firstName,
-      lastName: this.lastName,
-      title: this.jobTitle,
-      beer: this.drinkBeers,
-      tea: this.drinkTeas,
-      coffee: this.makeCoffee,
-      feed: this.feedEngineers,
-      description: this.selfDescription,
-      salary: this.desiredSalary,
-      happy: this.levelOfHappy
-    };
-    console.log('I would submit: ', data);
+  save(data: any) {
+    this.postman.post(data).subscribe(res => console.log(res));
     this.router.navigate(['home']);
   }
 }

packages/demos/angular/src/app/post-test/post-test.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PostTestService } from './post-test.service';
+
+describe('PostTestService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PostTestService]
+    });
+  });
+
+  it('should be created', inject([PostTestService], (service: PostTestService) => {
+    expect(service).toBeTruthy();
+  }));
+});

packages/demos/angular/src/app/post-test/post-test.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class PostTestService {
+  constructor(private http: HttpClient) { }
+
+  post(data: any): Observable<any> {
+    return this.http.post('http://localhost:5000/test', data);
+  }
+}