Add sample backend service ValueService

Author: vsaroopchand

src/app/app.constants.ts

@@ -0,0 +1,6 @@
+import {
+    OpaqueToken
+}
+from '@angular/core';
+
+export const BaseEndpoint = new OpaqueToken('BaseEndpoint');

src/app/app.module.ts

@@ -1,8 +1,6 @@
-import { OAuthCallbackHandler } from './login-callback/oauth-callback.guard';
-import { OAuthCallbackComponent } from './login-callback/oauth-callback.component';
-import { OAuthHandshakeModule } from './login-callback/oauth-callback.module';
-import { SharedServicesModule } from './services/shared.services.module';
-import { NgModule } from '@angular/core'
+import { ValueService } from './services/value.service';
+import { ValueComponent } from './values/value.controller';
+import { NgModule, APP_INITIALIZER } from '@angular/core'
 import { RouterModule } from '@angular/router';
 import { rootRouterConfig } from './app.routes';
 import { AppComponent } from './app.component';
@@ -19,6 +17,12 @@ import { RepoDetailComponent } from './github/repo-detail/repo-detail.component'
 import { LocationStrategy, HashLocationStrategy } from '@angular/common';
 import { ContactComponent } from './contact/contact.component';
 import { LoginComponent } from './login/login.component';
+import { BaseEndpoint } from './app.constants';
+import { OAuthCallbackHandler } from './login-callback/oauth-callback.guard';
+import { OAuthCallbackComponent } from './login-callback/oauth-callback.component';
+import { OAuthHandshakeModule } from './login-callback/oauth-callback.module';
+import { SharedServicesModule } from './services/shared.services.module';
+
 
 @NgModule({
   declarations: [
@@ -29,7 +33,8 @@ import { LoginComponent } from './login/login.component';
     RepoDetailComponent,
     HomeComponent,
     ContactComponent,
-    LoginComponent    
+    LoginComponent,
+    ValueComponent
   ],
   imports: [
     BrowserModule,
@@ -41,9 +46,23 @@ import { LoginComponent } from './login/login.component';
     RouterModule.forRoot(rootRouterConfig, { useHash: true })
   ],
   providers: [
-    GithubService    
+    GithubService,
+    /*
+    {
+      provide: APP_INITIALIZER,     
+      useFactory: () => {
+        // any app initialize code
+      },
+      
+      deps: [],
+      multi: true
+    },
+    */
+    { provide: BaseEndpoint, useValue: 'http://localhost:52233' }, // for asp.net core backend
+    //{ provide: BaseEndpoint, useValue: 'http://localhost:64897'}, // use asp.net mvc 5 backend
+    ValueService
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [AppComponent]
 })
 export class AppModule {
 

src/app/app.routes.ts

@@ -1,3 +1,5 @@
+import { ValueComponent } from './values/value.controller';
+import { Component } from '@angular/core';
 
 import { Routes } from '@angular/router';
 
@@ -18,6 +20,7 @@ export const rootRouterConfig: Routes = [
   { path: 'about', component: AboutComponent },
   { path: 'login', component: LoginComponent },
   { path: 'id_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] },
+  { path: 'values', component: ValueComponent, canActivate: [AuthenticationGuard] },
   {
     path: 'github', component: RepoBrowserComponent, canActivate: [AuthenticationGuard],
     children: [

src/app/services/adal.service.ts

@@ -8,7 +8,7 @@ export class AdalService {
 
     private context: adal.AuthenticationContext;
     constructor(private configService: ConfigService) {
-        this.context = new createAuthContextFn(configService.getAdalConfig);
+        this.context = new createAuthContextFn(configService.AdalConfig);
     }
 
     login() {
@@ -28,7 +28,7 @@ export class AdalService {
     }
 
     public get accessToken() {
-        return this.context.getCachedToken(this.configService.getAdalConfig.clientId);
+        return this.context.getCachedToken(this.configService.AdalConfig.clientId);
     }
 
     public get isAuthenticated() {

src/app/services/base.service.ts

@@ -0,0 +1,52 @@
+import { Http, Response, Headers } from '@angular/http';
+import { Inject, Injectable } from '@angular/core';
+
+import 'rxjs/Rx';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
+import { Observer } from 'rxjs/Observer';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/catch';
+
+import { AdalService } from './adal.service';
+import { BaseEndpoint } from './../app.constants';
+
+@Injectable()
+export class BaseService<T> {
+    headers: Headers;
+
+    constructor(private http: Http, @Inject(BaseEndpoint) private baseApiEndpoint, private adalService: AdalService) {
+
+        this.headers = new Headers({ 'Content-Type': 'application/json' });
+        let jwt = this.adalService.accessToken;
+        this.headers.append('Authorization', 'Bearer ' + jwt);
+    }
+
+    getAll(): Observable<any> {
+        return this.http.get(this.baseApiEndpoint, { headers: this.headers }).map(
+            (res: Response) => {
+                return res.json() as any[];
+            }).catch(this.handleError);
+    }
+
+    get(id: number): Observable<any> {
+        return this.http.get(this.baseApiEndpoint + '/' + id).map((value, i) => {
+            return <T>value.json()
+        })
+            .catch(this.handleError);
+    }
+
+    private handleError(error: any) {
+        console.error('server error:', error);
+        if (error instanceof Response) {
+            let errMessage = '';
+            try {
+                errMessage = error.json().error;
+            } catch (err) {
+                errMessage = error.statusText;
+            }
+            return Observable.throw(errMessage);
+        }
+        return Observable.throw(error || 'server error');
+    }
+}

src/app/services/config.service.ts

@@ -4,10 +4,10 @@ import { Injectable } from '@angular/core';
 export class ConfigService {
     constructor() {
     }
-    public get getAdalConfig(): any {
+    public get AdalConfig(): any {
         return {
-            tenant: 'Your Tenant ID',
-            clientId: 'Your Client ID',
+            tenant: 'ENTER YOUR TENANT ID',
+            clientId: 'ENTER YOUR CLIENT ID',
             redirectUri: window.location.origin + '/',
             postLogoutRedirectUri: window.location.origin + '/'
         };

src/app/services/value.service.ts

@@ -0,0 +1,12 @@
+import { Http } from '@angular/http';
+import { BaseEndpoint } from './../app.constants';
+import { AdalService } from './adal.service';
+import { BaseService } from './base.service';
+import { Injectable, Inject } from '@angular/core';
+
+@Injectable()
+export class ValueService extends BaseService<string>{
+    constructor(http: Http, @Inject(BaseEndpoint) baseApiEndpoint, adalService: AdalService){
+        super(http, baseApiEndpoint + '/api/values', adalService);
+    }
+}

src/app/values/value.component.css

@@ -0,0 +1,5 @@
+<h2>Values from ValueController</h2>
+
+<ul>
+    <li *ngFor="let value of values$ | async">{{value}}</li>
+</ul>

src/app/values/value.component.html

@@ -0,0 +1,27 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subject } from "rxjs/Subject";
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/takeUntil';
+import { ValueService } from './../services/value.service';
+
+
+@Component({
+    templateUrl: './value.component.html',
+    styleUrls: ['./value.component.css']
+})
+export class ValueComponent implements OnInit, OnDestroy {
+    values$: Observable<any[]>;
+    private ngUnsubscribe: Subject<void> = new Subject<void>();
+
+
+    constructor(private valueService: ValueService) {
+    }
+
+    ngOnInit() {
+        this.values$ = this.valueService.getAll().takeUntil(this.ngUnsubscribe);
+    }
+
+    ngOnDestroy() {
+        this.ngUnsubscribe.complete();
+    }
+}