adjustments

.gitignore

@@ -6,8 +6,8 @@
 /out-tsc
 
 # dependencies
-/node_modules
-
+client/node_modules
+server/node_modules
 # IDEs and editors
 /.idea
 .project

Client/.angulardoc.json

@@ -0,0 +1,4 @@
+{
+  "repoId": "4f4347a5-bd11-49b3-8119-4c44bab04a4d",
+  "lastSync": 0
+}

Client/.gitignore

@@ -0,0 +1,39 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

Client/README.md

@@ -0,0 +1,32 @@
+# Angular 6 HttpClient: Consume RESTful API Example
+
+
+backend : NodeRestApi 
+
+This source code is part of [Angular 6 HttpClient: Consume RESTful API Example](https://www.djamware.com/post/5b87894280aca74669894414/angular-6-httpclient-consume-restful-api-example) tutorial.
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

src/app/product-add/product-add.component.ts → Client/src/app/product-add/product-add.component.ts

@@ -18,7 +18,9 @@ export class ProductAddComponent implements OnInit {
 
   addProduct() {
     this.rest.addProduct(this.productData).subscribe((result) => {
-      this.router.navigate(['/product-details/'+result._id]);
+    // this.router.navigate(['/product-details/'+ result._id]);
+      this.router.navigate(['/products']);
+
     }, (err) => {
       console.log(err);
     });

src/app/product-edit/product-edit.component.ts → Client/src/app/product-edit/product-edit.component.ts

@@ -9,9 +9,9 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class ProductEditComponent implements OnInit {
 
-  @Input() productData:any = { prod_name: '', prod_desc: '', prod_price:0 };
+  @Input() productData: any = { prod_name: '', prod_desc: '', prod_price: 0 };
 
-  constructor(public rest:RestService, private route: ActivatedRoute, private router: Router) { }
+  constructor(public rest: RestService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.rest.getProduct(this.route.snapshot.params['id']).subscribe((data: {}) => {
@@ -22,7 +22,7 @@ export class ProductEditComponent implements OnInit {
 
   updateProduct() {
     this.rest.updateProduct(this.route.snapshot.params['id'], this.productData).subscribe((result) => {
-      this.router.navigate(['/product-details/'+result._id]);
+      this.router.navigate(['/product-details/' + result._id]);
     }, (err) => {
       console.log(err);
     });

src/app/product/product.component.css → Client/src/app/product/product.component.css

@@ -71,3 +71,11 @@ button.delete {
   background-color: gray !important;
   color: white;
 }
+
+button.edit {
+  position: relative;
+  left: 140px;
+  top: -32px;
+  background-color: rgb(29, 150, 99) !important;
+  color: white;
+}

src/app/product/product.component.html → Client/src/app/product/product.component.html

@@ -13,5 +13,10 @@ <h2>Product List</h2>
     </a>
     <button class="delete" title="delete product"
       (click)="delete(p._id)">x</button>
+
+      <button class="edit" title="edit product"
+      (click)="edit(p._id)">y</button>
+
   </li>
+
 </ul>

src/app/product/product.component.ts → Client/src/app/product/product.component.ts

@@ -9,9 +9,9 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class ProductComponent implements OnInit {
 
-  products:any = [];
+  products: any = [];
 
-  constructor(public rest:RestService, private route: ActivatedRoute, private router: Router) { }
+  constructor(public rest: RestService, private route: ActivatedRoute, private router: Router) { }
 
   ngOnInit() {
     this.getProducts();
@@ -39,4 +39,8 @@ export class ProductComponent implements OnInit {
       );
   }
 
+  edit(id) {
+    this.router.navigate(['/product-edit/' + id]);
+  }
+
 }

src/app/rest.service.ts → Client/src/app/rest.service.ts

@@ -18,7 +18,7 @@ export class RestService {
   constructor(private http: HttpClient) {}
 
   private extractData(res: Response) {
-    let body = res;
+    const body = res;
     return body || { };
   }
 
@@ -35,6 +35,7 @@ export class RestService {
   addProduct (product): Observable<any> {
     console.log(product);
     return this.http.post<any>(endpoint + 'products', JSON.stringify(product), httpOptions).pipe(
+      // tslint:disable-next-line:no-shadowed-variable
       tap((product) => console.log(`added product w/ id=${product.id}`)),
       catchError(this.handleError<any>('addProduct'))
     );

src/index.html → Client/src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>Angular6Httpclient</title>
+  <title>Angular 6 Httpclient - rest demo</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

README.md

@@ -1,29 +1,3 @@
-# Angular 6 HttpClient: Consume RESTful API Example
-
-This source code is part of [Angular 6 HttpClient: Consume RESTful API Example](https://www.djamware.com/post/5b87894280aca74669894414/angular-6-httpclient-consume-restful-api-example) tutorial.
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.1.5.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+# angular6-httpclient-example
+Angular 6 HttpClient: Consume RESTful API Example
+Made some adjustments - to complete the example.... client and server in the same git

Server/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Didin Jamaludin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Server/README.md

@@ -0,0 +1,5 @@
+# NodeRestApi
+
+This source code is part of Node.js tutorial [How to create REST API easily using Node.js, Express.js and MongoDB](https://www.djamware.com/post/58a91cdf80aca748640ce353/how-to-create-rest-api-easily-using-nodejs-expressjs-mongoosejs-and-mongodb)
+
+Backend de angular6-httpclient-example