service in spa to retrieve data from catalog api, project structure simplified

Author: Carlos Cañizares Estévez

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.ts

@@ -1,7 +1,6 @@
 import { Title } from '@angular/platform-browser';
 import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { TranslateService } from 'ng2-translate/ng2-translate';
 
 import { DataService } from './shared/services/data.service';
 
@@ -18,20 +17,15 @@ import { DataService } from './shared/services/data.service';
 export class AppComponent implements OnInit {
 
 
-  constructor(private translate: TranslateService, private titleService: Title) {
-    // this language will be used as a fallback when a translation isn't found in the current language
-    translate.setDefaultLang('en');
+  constructor(private titleService: Title) {
 
-    // the lang to use, if the lang isn't available, it will use the current loader to get them
-    translate.use('en');
   }
 
   ngOnInit() {
-    this.translate.get('title')
-      .subscribe(title => this.setTitle(title));
+
   }
 
   public setTitle(newTitle: string) {
-    this.titleService.setTitle(newTitle);
+    this.titleService.setTitle('eShopOnContainers');
   }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts

@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
+import { CatalogService } from './catalog.service';
+import { Catalog } from '../shared/models/catalog.model';
+import { CatalogItem } from '../shared/models/catalogItem.model';
 
 @Component({
-  selector: 'appc-catalog',
-  styleUrls: ['./catalog.component.scss'],
-  templateUrl: './catalog.component.html'
+    selector: 'appc-catalog',
+    styleUrls: ['./catalog.component.scss'],
+    templateUrl: './catalog.component.html'
 })
 export class CatalogComponent implements OnInit {
-  constructor() { }
+    private brands: any[];
+    private types: any[];
+    private items: CatalogItem[];
+    private filteredItems: any[];
+    private catalog: Catalog;
 
-  ngOnInit() {
-    console.log('catalog component loaded');
-  }
+    constructor(private service: CatalogService) { }
 
+    ngOnInit() {
+        console.log('catalog component loaded');
+        this.service.getCatalog().subscribe((catalog: Catalog) => {
+            this.catalog = catalog;
+            this.items = catalog.data;
+            console.log(this.items.length + ' catalog items retrieved from api');
+        });
+    }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.module.ts

@@ -1,11 +1,13 @@
-import { NgModule }       from '@angular/core';
+import { NgModule }             from '@angular/core';
 
-import { CatalogComponent } from './catalog.component';
-import { routing }            from './catalog.routes';
+import { CatalogComponent }     from './catalog.component';
+import { routing }              from './catalog.routes';
+import { CatalogService }       from './catalog.service';
 
 
 @NgModule({
     imports: [routing],
-    declarations: [CatalogComponent]
+    declarations: [CatalogComponent], 
+    providers: [CatalogService]
 })
 export class CatalogModule { }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+
+import { DataService } from '../shared/services/data.service';
+
+@Injectable()
+export class CatalogService {
+    private catalogUrl: string = 'http://eshopcontainers:5101/api/v1/catalog/items';
+
+    constructor(private service: DataService) {
+    }
+
+    getCatalog(){
+        return this.service.get(this.catalogUrl);
+    }
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/layout/footer.component.html

@@ -2,7 +2,7 @@
   <div class="container">
       <hr>
     <p class="text-muted">
-        &copy; 2015-2016 {{'title' | translate}} Company
+        &copy; 2015-2016 {{'title'}} Company
     </p>
   </div>
 </footer>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalog.model.ts

@@ -0,0 +1,6 @@
+import {CatalogItem} from './catalogItem.model';
+
+export class Catalog {
+    constructor(public pageIndex: number, public data: CatalogItem[], public pageSize: number, public count: number) {
+    }
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/models/catalogItem.model.ts

@@ -0,0 +1,3 @@
+export class CatalogItem {
+    constructor(public Id: string, public Name: string, public Description: string, public Price: number, public PictureUri: string, public CatalogBrandId: number, public CatalogBrand: string, public CatalogTypeId: number, public CatalogType: string) { }
+}