RaymsDev · January 8, 2018 15:50 · Jan 8, 2018
diff --git a/AngularAppWebPart.ts b/AngularAppWebPart.ts
@@ -0,0 +1,55 @@
+import { Version } from '@microsoft/sp-core-library';
+import {
+  BaseClientSideWebPart,
+  IPropertyPaneConfiguration,
+  PropertyPaneTextField
+} from '@microsoft/sp-webpart-base';
+import { escape } from '@microsoft/sp-lodash-subset';
+
+import styles from './AngularAppWebPart.module.scss';
+import * as strings from 'AngularAppWebPartStrings';
+
+//Angular deps
+import 'reflect-metadata';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
+import {AppModule} from './app/app.module';
+require('zone.js'); 
+
+export interface IAngularAppWebPartProps {
+  description: string;
+}
+
+export default class AngularAppWebPart extends BaseClientSideWebPart<IAngularAppWebPartProps> {
+
+  public render(): void {
+    window['webPartContext']=this.context;
+    this.domElement.innerHTML = `<app-root></app-root>`;
+    platformBrowserDynamic().bootstrapModule(AppModule);
+  }
+
+  protected get dataVersion(): Version {
+    return Version.parse('1.0');
+  }
+
+  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
+    return {
+      pages: [
+        {
+          header: {
+            description: strings.PropertyPaneDescription
+          },
+          groups: [
+            {
+              groupName: strings.BasicGroupName,
+              groupFields: [
+                PropertyPaneTextField('description', {
+                  label: strings.DescriptionFieldLabel
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    };
+  }
+}
diff --git a/MockHttpClient.ts b/MockHttpClient.ts
@@ -0,0 +1,26 @@
+import {
+  ISPLists,
+  ISPList
+} from './app.component';
+
+export class MockHttpClient {
+  private static _items: ISPList[] = [{
+    Title: "Plop Mock 1",
+    Id: "1"
+  }, {
+    Title: "Plop Mock 2",
+    Id: "2"
+    },{
+    Title: "Plop Mock 3",
+    Id: "3"
+  },{
+    Title: "Plop Mock 4",
+    Id: "4"
+  }];
+
+  public static get(): Promise<ISPList[]>{
+    return new Promise<ISPList[]>((resolve)=>{
+      resolve(MockHttpClient._items);
+    });
+  }
+}
diff --git a/app.component.ts b/app.component.ts
@@ -0,0 +1,79 @@
+import { Component, OnInit } from '@angular/core';
+import { Environment, EnvironmentType } from '@microsoft/sp-core-library';
+import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
+import IWebPartContext from '@microsoft/sp-webpart-base/lib/core/IWebPartContext';
+
+import { MockHttpClient } from './MockHttpClient';
+
+
+@Component({
+  selector: 'app-root',
+  template: `
+      <div>
+          <h1>Angular App Works!</h1>
+          <ul>
+              <li *ngFor="let item of items">
+                  {{item.Title}}
+              </li>
+          </ul>
+      </div>
+  `
+})
+
+export class AppComponent implements OnInit {
+  public items: ISPList[];
+  public context: IWebPartContext;
+
+  constructor() {}
+
+  public ngOnInit() {
+    this.context = window["webPartContext"];
+    this._renderListAsync();
+  }
+
+  private _renderListAsync(): void {
+    if (Environment.type === EnvironmentType.Local) {
+      // Local environment
+      this._getMockListData().then((response) => {
+        this.items = response.value;
+      });
+    } else if (Environment.type == EnvironmentType.SharePoint ||
+      Environment.type == EnvironmentType.ClassicSharePoint) {
+      // Sharepoint environment
+      this._getListData()
+        .then((response) => {
+          this.items = response.value;
+        });
+    }
+  }
+
+  private _getListData(): Promise < ISPLists > {
+    return this.context.spHttpClient.get(
+        this.context.pageContext.web.absoluteUrl + `/_api/Web/Lists(guid'16ddf3c3-4cdc-4b4d-b1a3-45269158b4ac')/items`,
+        SPHttpClient.configurations.v1)
+      .then((response: SPHttpClientResponse) => {
+        return response.json();
+      });
+  }
+
+  private _getMockListData(): Promise < ISPLists > {
+    return MockHttpClient.get()
+      .then((data: ISPList[]) => {
+        const listData: ISPLists = {
+          value: data
+        };
+        return listData;
+      }) as Promise < ISPLists > ;
+
+  }
+}
+
+export interface ISPList {
+  Title: string;
+  Id: string;
+}
+
+export interface ISPLists {
+  value: ISPList[];
+}
+
diff --git a/app.module.ts b/app.module.ts
@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+
+import { AppComponent } from './app.component';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }