| @@ -0,0 +1,34 @@ | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { FormsModule } from '@angular/forms'; | ||
| import { HttpModule } from '@angular/http'; | ||
| import { RouterModule, Routes } from '@angular/router'; | ||
| import { AppComponent } from './app.component'; | ||
| import { HomeComponent } from './home/home.component'; | ||
| import { SharedModule } from './shared/shared.module'; | ||
| import { HomeService } from './services/home.service'; | ||
| import { AddComponent } from './add/add.component'; | ||
|
|
||
| const appRoutes: Routes = [ | ||
| {path: '', component : HomeComponent}, | ||
| {path: 'add', component : AddComponent} | ||
| ] | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| AppComponent, | ||
| HomeComponent, | ||
| AddComponent, | ||
| ], | ||
| imports: [ | ||
| BrowserModule, | ||
| FormsModule, | ||
| HttpModule, | ||
| RouterModule.forRoot(appRoutes), | ||
| SharedModule | ||
|
|
||
| ], | ||
| providers: [HomeService], | ||
| bootstrap: [AppComponent] | ||
| }) | ||
| export class AppModule { } |
| @@ -0,0 +1,51 @@ | ||
|
|
||
|
|
||
| <app-toast [message]="toast.message"></app-toast> | ||
|
|
||
| <div class="col-md-1"> | ||
|
|
||
| </div> | ||
| <div class="col-md-9"> | ||
| <table class="table table-hover"> | ||
| <thead> | ||
| <tr> | ||
| <th>#</th> | ||
| <th>Name</th> | ||
| <th>Place</th> | ||
| <th>Age</th> | ||
| <th>Operations</th> | ||
| </tr> | ||
| </thead> | ||
| <tbody *ngIf="!isEditing"> | ||
| <tr *ngFor="let data of datas"> | ||
| <td>{{data.id}}</td> | ||
| <td>{{data.Name}}</td> | ||
| <td>{{data.Place}}</td> | ||
| <td>{{data.Age}}</td> | ||
| <td> | ||
| <button class="btn btn-sm btn-warning" (click)="enableEditing(data)"><i class="fa fa-pencil"></i> Edit</button> <button class="btn btn-sm btn-danger" (click)="deleteData(data)"><i class="fa fa-trash"></i> Delete</button> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| <tbody *ngIf="isEditing"> | ||
| <tr> | ||
| <td colspan="4"> | ||
| <form class="form-inline" #form="ngForm" (ngSubmit)="editData(data)" style="display:inline;"> | ||
| <div class="form-group"> | ||
| <input class="form-control" type="text" name="Name" [(ngModel)]="data.Name" placeholder="Name" required> | ||
| </div> | ||
| <div class="form-group"> | ||
| <input class="form-control" type="text" name="Place" [(ngModel)]="data.Place" placeholder="Place" min="0" required> | ||
| </div> | ||
| <div class="form-group"> | ||
| <input class="form-control" type="number" name="Age" [(ngModel)]="data.Age" placeholder="Age" step="any" min="0" required> | ||
| </div> | ||
| <button class="btn btn-sm btn-primary" type="submit" [disabled]="!form.form.valid"><i class="fa fa-floppy-o"></i> Save</button> | ||
| </form> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div class="col-md-2"></div> |
| @@ -0,0 +1,4 @@ | ||
| .table td, .table th { | ||
| text-align: center; | ||
| width: 25%; | ||
| } |
| @@ -0,0 +1,25 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { HomeComponent } from './home.component'; | ||
|
|
||
| describe('HomeComponent', () => { | ||
| let component: HomeComponent; | ||
| let fixture: ComponentFixture<HomeComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ HomeComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(HomeComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
| @@ -0,0 +1,64 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { Http } from '@angular/http'; | ||
| import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; | ||
| import { HomeService } from '../services/home.service'; | ||
| import { ToastComponent } from '../shared/toast/toast.component'; | ||
| @Component({ | ||
| selector: 'app-home', | ||
| templateUrl: './home.component.html', | ||
| styleUrls: ['./home.component.css'], | ||
| providers: [HomeService] | ||
| }) | ||
| export class HomeComponent implements OnInit { | ||
|
|
||
| data = {}; | ||
| datas = []; | ||
| id:string; | ||
|
|
||
| isEditing = false; | ||
|
|
||
|
|
||
|
|
||
| constructor(private homeService:HomeService, | ||
| private formBuilder: FormBuilder, | ||
| private http: Http, | ||
| public toast: ToastComponent ) { | ||
| } | ||
| ngOnInit() { | ||
| this.getDatas(); | ||
|
|
||
| } | ||
| getDatas(){ | ||
| this.homeService.getDatas().subscribe( | ||
| data => this.datas = data, | ||
| err => console.log(err) | ||
| ) | ||
| } | ||
|
|
||
| enableEditing(data){ | ||
| this.isEditing = true; | ||
| this.data = data; | ||
| } | ||
| editData(data){ | ||
| this.homeService.editData(data).subscribe( | ||
| res => { | ||
| this.isEditing = false; | ||
| this.datas = data; | ||
| this.getDatas(); | ||
|
|
||
| this.toast.setMessage('item edited successfully.', 'success'); | ||
| }, | ||
| error => console.log(error) | ||
| ); | ||
| } | ||
| deleteData(data){ | ||
| this.homeService.deleteData(data).subscribe( | ||
| res => { | ||
| const pos = this.datas.map(elem => elem.id).indexOf(data.id); | ||
| this.datas.splice(pos, 1); | ||
| this.toast.setMessage('item deleted successfully.', 'success'); | ||
| }, | ||
| error => console.log(error) | ||
| ); | ||
| } | ||
| } |
| @@ -0,0 +1,15 @@ | ||
| import { TestBed, inject } from '@angular/core/testing'; | ||
|
|
||
| import { HomeService } from './home.service'; | ||
|
|
||
| describe('HomeService', () => { | ||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| providers: [HomeService] | ||
| }); | ||
| }); | ||
|
|
||
| it('should be created', inject([HomeService], (service: HomeService) => { | ||
| expect(service).toBeTruthy(); | ||
| })); | ||
| }); |
| @@ -0,0 +1,30 @@ | ||
| import { Injectable } from '@angular/core'; | ||
| import { Http, Headers, RequestOptions } from '@angular/http'; | ||
|
|
||
| import { Observable } from 'rxjs/Observable'; | ||
| import 'rxjs/add/operator/map'; | ||
|
|
||
|
|
||
| @Injectable() | ||
| export class HomeService { | ||
| private headers = new Headers({ 'Content-Type': 'application/json', 'charset': 'UTF-8' }); | ||
| private options = new RequestOptions({ headers: this.headers }); | ||
|
|
||
| constructor(private http: Http) { } | ||
| getDatas(): Observable<any> { | ||
| return this.http.get('http://localhost:3031/api/register').map(res => res.json()); | ||
| } | ||
|
|
||
| addData(data): Observable<any> { | ||
| return this.http.post('http://localhost:3031/api/register', JSON.stringify(data), this.options); | ||
| } | ||
|
|
||
| editData(data): Observable<any> { | ||
| return this.http.put(`http://localhost:3031/api/register/${data.id}`, JSON.stringify(data), this.options); | ||
| } | ||
|
|
||
| deleteData(data): Observable<any> { | ||
| return this.http.delete(`http://localhost:3031/api/register/${data.id}`, this.options); | ||
| } | ||
|
|
||
| } |
| @@ -0,0 +1,6 @@ | ||
| <div class="card" *ngIf="condition"> | ||
| <h4 class="card-header">Loading...</h4> | ||
| <div class="card-block text-xs-center"> | ||
| <i class="fa fa-circle-o-notch fa-spin fa-3x"></i> | ||
| </div> | ||
| </div> |
| @@ -0,0 +1,41 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
|
|
||
| import { LoadingComponent } from './loading.component'; | ||
|
|
||
| describe('LoadingComponent', () => { | ||
| let component: LoadingComponent; | ||
| let fixture: ComponentFixture<LoadingComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ LoadingComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(LoadingComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should be created', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should not show the DOM element', () => { | ||
| const de = fixture.debugElement.query(By.css('div')); | ||
| expect(de).toBeNull(); | ||
| }); | ||
|
|
||
| it('should show the DOM element', () => { | ||
| component.condition = true; | ||
| fixture.detectChanges(); | ||
| expect(component).toBeTruthy(); | ||
| const de = fixture.debugElement.query(By.css('div')); | ||
| const el = de.nativeElement; | ||
| expect(de).toBeDefined(); | ||
| expect(el.textContent).toContain('Loading...'); | ||
| }); | ||
| }); |
| @@ -0,0 +1,10 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-loading', | ||
| templateUrl: './loading.component.html', | ||
| styleUrls: ['./loading.component.scss'] | ||
| }) | ||
| export class LoadingComponent { | ||
| @Input() condition: boolean; | ||
| } |
| @@ -0,0 +1,34 @@ | ||
| import { NgModule } from '@angular/core'; | ||
| import { BrowserModule } from '@angular/platform-browser'; | ||
| import { FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
| import { HttpModule } from '@angular/http'; | ||
|
|
||
| import { ToastComponent } from './toast/toast.component'; | ||
| import { LoadingComponent } from './loading/loading.component'; | ||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| BrowserModule, | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| HttpModule | ||
| ], | ||
| exports: [ | ||
| // Shared Modules | ||
| BrowserModule, | ||
| FormsModule, | ||
| ReactiveFormsModule, | ||
| HttpModule, | ||
| // Shared Components | ||
| ToastComponent, | ||
| LoadingComponent | ||
| ], | ||
| declarations: [ | ||
| ToastComponent, | ||
| LoadingComponent | ||
| ], | ||
| providers: [ | ||
| ToastComponent | ||
| ] | ||
| }) | ||
| export class SharedModule { } |
| @@ -0,0 +1,6 @@ | ||
| <div *ngIf="message.body" class="alert alert-{{message.type}} alert-dismissible" role="alert"> | ||
| <button type="button" class="close" data-dismiss="alert" aria-label="Close"> | ||
| <span aria-hidden="true">×</span> | ||
| </button> | ||
| <strong>Message:</strong> {{message.body}} | ||
| </div> |
| @@ -0,0 +1,8 @@ | ||
| .alert { | ||
| z-index: 999; | ||
| position: fixed; | ||
| bottom: 15px; | ||
| left: 25%; | ||
| width: 50%; | ||
| opacity: 0.9; | ||
| } |
| @@ -0,0 +1,49 @@ | ||
| import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { By } from '@angular/platform-browser'; | ||
|
|
||
| import { ToastComponent } from './toast.component'; | ||
|
|
||
| describe('ToastComponent', () => { | ||
| let component: ToastComponent; | ||
| let fixture: ComponentFixture<ToastComponent>; | ||
|
|
||
| beforeEach(async(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [ ToastComponent ] | ||
| }) | ||
| .compileComponents(); | ||
| })); | ||
|
|
||
| beforeEach(() => { | ||
| fixture = TestBed.createComponent(ToastComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should not have message set nor DOM element', () => { | ||
| expect(component.message.body).toBeFalsy(); | ||
| expect(component.message.type).toBeFalsy(); | ||
| const de = fixture.debugElement.query(By.css('div')); | ||
| expect(de).toBeNull(); | ||
| }); | ||
|
|
||
| it('should set the message and create the DOM element', () => { | ||
| const mockMessage = { | ||
| body: 'test message', | ||
| type: 'warning' | ||
| }; | ||
| component.setMessage(mockMessage.body, mockMessage.type); | ||
| expect(component.message.body).toBe(mockMessage.body); | ||
| expect(component.message.type).toBe(mockMessage.type); | ||
| fixture.detectChanges(); | ||
| const de = fixture.debugElement.query(By.css('div')); | ||
| const el = de.nativeElement; | ||
| expect(de).toBeDefined(); | ||
| expect(el.textContent).toContain(mockMessage.body); | ||
| expect(el.className).toContain(mockMessage.type); | ||
| }); | ||
| }); |
| @@ -0,0 +1,16 @@ | ||
| import { Component, Input } from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-toast', | ||
| templateUrl: './toast.component.html', | ||
| styleUrls: ['./toast.component.scss'] | ||
| }) | ||
| export class ToastComponent { | ||
| @Input() message = { body: '', type: '' }; | ||
|
|
||
| setMessage(body, type, time = 3000) { | ||
| this.message.body = body; | ||
| this.message.type = type; | ||
| setTimeout(() => { this.message.body = ''; }, time); | ||
| } | ||
| } |
| @@ -0,0 +1,3 @@ | ||
| export const environment = { | ||
| production: true | ||
| }; |
| @@ -0,0 +1,8 @@ | ||
| // The file contents for the current environment will overwrite these during build. | ||
| // The build system defaults to the dev environment which uses `environment.ts`, but if you do | ||
| // `ng build --env=prod` then `environment.prod.ts` will be used instead. | ||
| // The list of which env maps to which file can be found in `.angular-cli.json`. | ||
|
|
||
| export const environment = { | ||
| production: false | ||
| }; |
| @@ -0,0 +1,19 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>REST Api</title> | ||
| <base href="/"> | ||
|
|
||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="icon" type="image/x-icon" href="favicon.ico"> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> | ||
|
|
||
|
|
||
| </head> | ||
| <body> | ||
| <app-root></app-root> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,11 @@ | ||
| import { enableProdMode } from '@angular/core'; | ||
| import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
|
|
||
| import { AppModule } from './app/app.module'; | ||
| import { environment } from './environments/environment'; | ||
|
|
||
| if (environment.production) { | ||
| enableProdMode(); | ||
| } | ||
|
|
||
| platformBrowserDynamic().bootstrapModule(AppModule); |
| @@ -0,0 +1,72 @@ | ||
| /** | ||
| * This file includes polyfills needed by Angular and is loaded before the app. | ||
| * You can add your own extra polyfills to this file. | ||
| * | ||
| * This file is divided into 2 sections: | ||
| * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. | ||
| * 2. Application imports. Files imported after ZoneJS that should be loaded before your main | ||
| * file. | ||
| * | ||
| * The current setup is for so-called "evergreen" browsers; the last versions of browsers that | ||
| * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), | ||
| * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. | ||
| * | ||
| * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html | ||
| */ | ||
|
|
||
| /*************************************************************************************************** | ||
| * BROWSER POLYFILLS | ||
| */ | ||
|
|
||
| /** IE9, IE10 and IE11 requires all of the following polyfills. **/ | ||
| // import 'core-js/es6/symbol'; | ||
| // import 'core-js/es6/object'; | ||
| // import 'core-js/es6/function'; | ||
| // import 'core-js/es6/parse-int'; | ||
| // import 'core-js/es6/parse-float'; | ||
| // import 'core-js/es6/number'; | ||
| // import 'core-js/es6/math'; | ||
| // import 'core-js/es6/string'; | ||
| // import 'core-js/es6/date'; | ||
| // import 'core-js/es6/array'; | ||
| // import 'core-js/es6/regexp'; | ||
| // import 'core-js/es6/map'; | ||
| // import 'core-js/es6/weak-map'; | ||
| // import 'core-js/es6/set'; | ||
|
|
||
| /** IE10 and IE11 requires the following for NgClass support on SVG elements */ | ||
| // import 'classlist.js'; // Run `npm install --save classlist.js`. | ||
|
|
||
| /** Evergreen browsers require these. **/ | ||
| import 'core-js/es6/reflect'; | ||
| import 'core-js/es7/reflect'; | ||
|
|
||
|
|
||
| /** | ||
| * Required to support Web Animations `@angular/animation`. | ||
| * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation | ||
| **/ | ||
| // import 'web-animations-js'; // Run `npm install --save web-animations-js`. | ||
|
|
||
|
|
||
|
|
||
| /*************************************************************************************************** | ||
| * Zone JS is required by Angular itself. | ||
| */ | ||
| import 'zone.js/dist/zone'; // Included with Angular CLI. | ||
|
|
||
|
|
||
|
|
||
| /*************************************************************************************************** | ||
| * APPLICATION IMPORTS | ||
| */ | ||
|
|
||
| /** | ||
| * Date, currency, decimal and percent pipes. | ||
| * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 | ||
| */ | ||
| // import 'intl'; // Run `npm install --save intl`. | ||
| /** | ||
| * Need to import at least one locale-data with intl. | ||
| */ | ||
| // import 'intl/locale-data/jsonp/en'; |
| @@ -0,0 +1,22 @@ | ||
| /* You can add global styles to this file, and also import other style files */ | ||
| h1 { | ||
| color: green; | ||
| } | ||
| h4 { | ||
| padding-left: 50px; | ||
| } | ||
|
|
||
|
|
||
| .button1, .button2 { | ||
| color: #aaa; | ||
| cursor: pointer; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .edit:hover { | ||
| color: #0a79df; | ||
| } | ||
|
|
||
| .delete:hover { | ||
| color: #dc2a2a; | ||
| } |
| @@ -0,0 +1,32 @@ | ||
| // This file is required by karma.conf.js and loads recursively all the .spec and framework files | ||
|
|
||
| import 'zone.js/dist/long-stack-trace-zone'; | ||
| import 'zone.js/dist/proxy.js'; | ||
| import 'zone.js/dist/sync-test'; | ||
| import 'zone.js/dist/jasmine-patch'; | ||
| import 'zone.js/dist/async-test'; | ||
| import 'zone.js/dist/fake-async-test'; | ||
| import { getTestBed } from '@angular/core/testing'; | ||
| import { | ||
| BrowserDynamicTestingModule, | ||
| platformBrowserDynamicTesting | ||
| } from '@angular/platform-browser-dynamic/testing'; | ||
|
|
||
| // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. | ||
| declare const __karma__: any; | ||
| declare const require: any; | ||
|
|
||
| // Prevent Karma from running prematurely. | ||
| __karma__.loaded = function () {}; | ||
|
|
||
| // First, initialize the Angular testing environment. | ||
| getTestBed().initTestEnvironment( | ||
| BrowserDynamicTestingModule, | ||
| platformBrowserDynamicTesting() | ||
| ); | ||
| // Then we find all the tests. | ||
| const context = require.context('./', true, /\.spec\.ts$/); | ||
| // And load the modules. | ||
| context.keys().map(context); | ||
| // Finally, start Karma to run the tests. | ||
| __karma__.start(); |
| @@ -0,0 +1,13 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "outDir": "../out-tsc/app", | ||
| "baseUrl": "./", | ||
| "module": "es2015", | ||
| "types": [] | ||
| }, | ||
| "exclude": [ | ||
| "test.ts", | ||
| "**/*.spec.ts" | ||
| ] | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "outDir": "../out-tsc/spec", | ||
| "baseUrl": "./", | ||
| "module": "commonjs", | ||
| "target": "es5", | ||
| "types": [ | ||
| "jasmine", | ||
| "node" | ||
| ] | ||
| }, | ||
| "files": [ | ||
| "test.ts" | ||
| ], | ||
| "include": [ | ||
| "**/*.spec.ts", | ||
| "**/*.d.ts" | ||
| ] | ||
| } |
| @@ -0,0 +1,5 @@ | ||
| /* SystemJS module definition */ | ||
| declare var module: NodeModule; | ||
| interface NodeModule { | ||
| id: string; | ||
| } |
| @@ -0,0 +1,10 @@ | ||
| /* You can add global styles to this file, and also import other style files */ | ||
|
|
||
| body { | ||
| margin-top: 15px; | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .input-group { | ||
| margin-bottom: 15px; | ||
| } |
| @@ -0,0 +1,19 @@ | ||
| { | ||
| "compileOnSave": false, | ||
| "compilerOptions": { | ||
| "outDir": "./dist/out-tsc", | ||
| "sourceMap": true, | ||
| "declaration": false, | ||
| "moduleResolution": "node", | ||
| "emitDecoratorMetadata": true, | ||
| "experimentalDecorators": true, | ||
| "target": "es5", | ||
| "typeRoots": [ | ||
| "node_modules/@types" | ||
| ], | ||
| "lib": [ | ||
| "es2016", | ||
| "dom" | ||
| ] | ||
| } | ||
| } |
| @@ -0,0 +1,142 @@ | ||
| { | ||
| "rulesDirectory": [ | ||
| "node_modules/codelyzer" | ||
| ], | ||
| "rules": { | ||
| "arrow-return-shorthand": true, | ||
| "callable-types": true, | ||
| "class-name": true, | ||
| "comment-format": [ | ||
| true, | ||
| "check-space" | ||
| ], | ||
| "curly": true, | ||
| "eofline": true, | ||
| "forin": true, | ||
| "import-blacklist": [ | ||
| true, | ||
| "rxjs" | ||
| ], | ||
| "import-spacing": true, | ||
| "indent": [ | ||
| true, | ||
| "spaces" | ||
| ], | ||
| "interface-over-type-literal": true, | ||
| "label-position": true, | ||
| "max-line-length": [ | ||
| true, | ||
| 140 | ||
| ], | ||
| "member-access": false, | ||
| "member-ordering": [ | ||
| true, | ||
| { | ||
| "order": [ | ||
| "static-field", | ||
| "instance-field", | ||
| "static-method", | ||
| "instance-method" | ||
| ] | ||
| } | ||
| ], | ||
| "no-arg": true, | ||
| "no-bitwise": true, | ||
| "no-console": [ | ||
| true, | ||
| "debug", | ||
| "info", | ||
| "time", | ||
| "timeEnd", | ||
| "trace" | ||
| ], | ||
| "no-construct": true, | ||
| "no-debugger": true, | ||
| "no-duplicate-super": true, | ||
| "no-empty": false, | ||
| "no-empty-interface": true, | ||
| "no-eval": true, | ||
| "no-inferrable-types": [ | ||
| true, | ||
| "ignore-params" | ||
| ], | ||
| "no-misused-new": true, | ||
| "no-non-null-assertion": true, | ||
| "no-shadowed-variable": true, | ||
| "no-string-literal": false, | ||
| "no-string-throw": true, | ||
| "no-switch-case-fall-through": true, | ||
| "no-trailing-whitespace": true, | ||
| "no-unnecessary-initializer": true, | ||
| "no-unused-expression": true, | ||
| "no-use-before-declare": true, | ||
| "no-var-keyword": true, | ||
| "object-literal-sort-keys": false, | ||
| "one-line": [ | ||
| true, | ||
| "check-open-brace", | ||
| "check-catch", | ||
| "check-else", | ||
| "check-whitespace" | ||
| ], | ||
| "prefer-const": true, | ||
| "quotemark": [ | ||
| true, | ||
| "single" | ||
| ], | ||
| "radix": true, | ||
| "semicolon": [ | ||
| true, | ||
| "always" | ||
| ], | ||
| "triple-equals": [ | ||
| true, | ||
| "allow-null-check" | ||
| ], | ||
| "typedef-whitespace": [ | ||
| true, | ||
| { | ||
| "call-signature": "nospace", | ||
| "index-signature": "nospace", | ||
| "parameter": "nospace", | ||
| "property-declaration": "nospace", | ||
| "variable-declaration": "nospace" | ||
| } | ||
| ], | ||
| "typeof-compare": true, | ||
| "unified-signatures": true, | ||
| "variable-name": false, | ||
| "whitespace": [ | ||
| true, | ||
| "check-branch", | ||
| "check-decl", | ||
| "check-operator", | ||
| "check-separator", | ||
| "check-type" | ||
| ], | ||
| "directive-selector": [ | ||
| true, | ||
| "attribute", | ||
| "app", | ||
| "camelCase" | ||
| ], | ||
| "component-selector": [ | ||
| true, | ||
| "element", | ||
| "app", | ||
| "kebab-case" | ||
| ], | ||
| "use-input-property-decorator": true, | ||
| "use-output-property-decorator": true, | ||
| "use-host-property-decorator": true, | ||
| "no-input-rename": true, | ||
| "no-output-rename": true, | ||
| "use-life-cycle-interface": true, | ||
| "use-pipe-transform-interface": true, | ||
| "component-class-suffix": true, | ||
| "directive-class-suffix": true, | ||
| "no-access-missing-member": true, | ||
| "templates-use-public": true, | ||
| "invoke-injectable": true | ||
| } | ||
| } |
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "name": "nodemysql", | ||
| "version": "1.0.0", | ||
| "description": "Simple", | ||
| "main": "server.js", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "author": "", | ||
| "license": "ISC", | ||
| "dependencies": { | ||
| "body-parser": "^1.17.2", | ||
| "express": "^4.15.3", | ||
| "express-myconnection": "^1.0.4", | ||
| "mysql": "^2.14.1" | ||
| } | ||
| } |
| @@ -0,0 +1,82 @@ | ||
| const express = require('express'); | ||
| var router = express.Router(); | ||
| const mysql = require('mysql'); | ||
| const url = require('url'); | ||
| var db = require('../db'); | ||
| const bodyParser = require('body-parser'); | ||
| var cors = require('cors'); | ||
|
|
||
|
|
||
|
|
||
| router.use(bodyParser.urlencoded({ extended: true })); | ||
| router.use(bodyParser.json()); | ||
|
|
||
| router.use(cors()); | ||
|
|
||
| router.post('/register', function(req, res){ | ||
| var reqObj = req.body; | ||
| console.log(reqObj); | ||
| var data = insertData = { | ||
| "id" : reqObj.id, | ||
| "fname": reqObj.fname | ||
| }; | ||
|
|
||
| var insertSql = "INSERT INTO table1 SET ?"; | ||
| db.query(insertSql, insertData, function(err, data){ | ||
| if(err){ | ||
| console.log(err); | ||
| }else{ | ||
| console.log(data); | ||
| res.send(data); | ||
| console.log('Inserted'); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| router.get('/register', function(req, res){ | ||
| var sql = "SELECT * FROM table1"; | ||
| db.query(sql, function(err, data){ | ||
| if(err){ | ||
| console.log(err); | ||
| }else{ | ||
| console.log(data); | ||
| res.send(data); | ||
| console.log('Fetched'); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| router.delete('/register/:id', function(req, res){ | ||
| var sql = "DELETE FROM sampletable WHERE id=${req.params.id}"; | ||
| db.query(sql, function(err, data){ | ||
| if(err){ | ||
| console.log(err); | ||
| }else{ | ||
| res.send(data); | ||
| console.log("Deleted:" + data.affectedRows); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| router.put("/register/:id", function(req , res){ | ||
| var reqObj = req.body; | ||
| var Data = { | ||
| "name" : reqObj.Name, | ||
| "place" : reqObj.Place, | ||
| "age" : reqObj.Age | ||
| }; | ||
| var sql = "UPDATE sampletable SET ? WHERE id = ${req.params.id}"; | ||
|
|
||
| db.query(sql, Data, function(err, data){ | ||
| if(err){ | ||
| console.log(err); | ||
| }else{ | ||
| console.log(data); | ||
| res.send(data); | ||
| console.log('Updated:' + data.affectedRows); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| module.exports = router; |
| @@ -0,0 +1,27 @@ | ||
| const express = require('express'); | ||
|
|
||
| const bodyParser = require('body-parser'); | ||
| var router = require('./router/api'); | ||
| const url = require('url'); | ||
| var db = require('./db'); | ||
| var app = express(); | ||
| var cors = require('cors'); | ||
| //create Server | ||
|
|
||
|
|
||
| app.use(cors()); | ||
|
|
||
| app.use('/api',router); | ||
|
|
||
|
|
||
|
|
||
|
|
||
| app.use(bodyParser.urlencoded({ extended: true })); | ||
| app.use(bodyParser.json()); | ||
|
|
||
|
|
||
| //createConnection | ||
|
|
||
| app.listen('3031', () => { | ||
| console.log('Server started..'); | ||
| }); |