1. Working with different JavaScript frameworks and libraries
SharePoint
Working with different JavaScript frameworks and libraries
Angular 1.x
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Agenda Implement the Angular data service and controller
Define the Angular main module
Register the Angular application with the web part
Q&A

3. Implement Angular data service
SharePoint
Implement Angular data service
The sample app Angular data service creates 2 interfaces and one implementation.
Interface representing a list item in your application
Interface of the data service defining the public methods for creating, reading, updating and deleting list items(CRUD)
Class implementing public methods of the data service interface, as well as private methods internally used by the CRUD methods
export interface IListItem {
Id: number;
Title: string; }
export interface IDataService {
getListItems: (siteUrl: string, listName: string) => angular.IPromise<IListItem[]>;
addListItem: (listTitle: string, siteUrl: string, listName: string) => angular.IPromise<number>;
updateListItem: (item: IListItem, siteUrl: string, listName: string) => angular.IPromise<{}>;
deleteListItem: (item: IListItem, siteUrl: string, listName: string) => angular.IPromise<number>; }
export default class DataService implements IDataService
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. SharePoint
Get digest value
The current digest value is required for Create, Update and Delete operations on list items
Create a method to obtain the digest
private getRequestDigest(siteUrl: string): angular.IPromise<string> {
const deferred: angular.IDeferred<string> = this.$q.defer();
this.$http({
url: siteUrl + '/_api/contextinfo',
method: 'POST',
headers: {
'Accept': 'application/json' }
}).then((result: angular.IHttpPromiseCallbackArg<{ FormDigestValue: string }>): void => {
deferred.resolve(result.data.FormDigestValue);
}, (err: any): void => {
deferred.reject(err);
});
return deferred.promise;
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5. Get List Item Entity Type
To Create and Update list items you must specify the item type in the request body
To get a List Item Entity Type, get the property for the list, then parse the ListItemEntityTypeFullName value
private getListItemEntityTypeFullName(siteUrl: string, listName: string): angular.IPromise<string> {
const deferred: angular.IDeferred<string> = this.$q.defer();
this.$http({
url: `${siteUrl}/_api/web/lists/getbytitle('${listName}')?$select=ListItemEntityTypeFullName`,
method: 'GET',
headers: {
'Accept': 'application/json' }
}).then((result: angular.IHttpPromiseCallbackArg<{ ListItemEntityTypeFullName: string }>): void => {
deferred.resolve(result.data.ListItemEntityTypeFullName);
}, (err: any): void => {
deferred.reject(err);
});
return deferred.promise;

6. SharePoint
Reading list items
Use the SharePoint context httpClient to call SharePoint REST APIs
public getListItems(siteUrl: string, listName: string): angular.IPromise<IListItem[]> {
const deferred: angular.IDeferred<IListItem[]> = this.$q.defer();
const url: string = `${siteUrl}/_api/web/lists/getbytitle('${listName}')/items?$select=Id,Title&$orderby=ID desc`;
this.$http({
url: url,
method: 'GET',
headers: {
'Accept': 'application/json' }
}).then((result: angular.IHttpPromiseCallbackArg<{ value: IListItem[] }>): void => {
const items: IListItem[] = [];
for (let i: number = 0; i < result.data.value.length; i++) {
const item: IListItem = result.data.value[i];
items.push(item);
deferred.resolve(items);
}, (err: any): void => {
deferred.reject(err);
});
return deferred.promise;
The getListItems method invokes the SharePoint REST API to return the SharePoint lists in the SharePoint site where the web part executes.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

7. Creating list items Get the List Item Entity Type Get the digest value
public addListItem(listTitle: string, siteUrl: string, listName: string): angular.IPromise<number> {
    const deferred: angular.IDeferred<{}> = this.$q.defer();
    let listItemEntityTypeFullName: string = undefined;
    this.getListItemEntityTypeFullName(siteUrl, listName)
      .then((entityTypeName: string): angular.IPromise<string> => {
        listItemEntityTypeFullName = entityTypeName;
        return this.getRequestDigest(siteUrl);
      })
      .then((requestDigest: string): void => {
        const body: string = JSON.stringify({
         
          'Title': listTitle
        });
        this.$http({
          url: `${siteUrl}/_api/web/lists/getbytitle('${listName}')/items`,
          method: 'POST',
          headers: {
            'odata-version': '4.0',
            'Accept': 'application/json',
            'Content-type': 'application/json',
            'X-RequestDigest': requestDigest
          },
          data: body
        }).then((result: angular.IHttpPromiseCallbackArg<{Id: number}>): void => {
          deferred.resolve(result.data.Id);
        }, (err: any): void => {
          deferred.reject(err);
      });
    return deferred.promise;
  }
Get the List Item Entity Type
Get the digest value
Set the List Item Entity Type to in the request body
Add the digest to the X-RequestDigest header
Use the SharePoint Context httpClient to call the SharePoint REST API

8. Updating list items Get the List Item Entity Type Get the digest value
SharePoint
Updating list items
public updateListItem(item: IListItem, siteUrl: string, listName: string): angular.IPromise<{}> {
    const deferred: angular.IDeferred<{}> = this.$q.defer();
    let listItemEntityTypeFullName: string = undefined;
    this.getListItemEntityTypeFullName(siteUrl, listName)
      .then((entityTypeName: string): angular.IPromise<string> => {
        listItemEntityTypeFullName = entityTypeName;
        return this.getRequestDigest(siteUrl);
      })
      .then((requestDigest: string): void => {
        const body: string = JSON.stringify({
         
          'Title': item.Title
        });
        this.$http({
          url: `${siteUrl}/_api/web/lists/getbytitle('${listName}')/items(${item.Id})`,
          method: 'POST',
          headers: {
            'odata-version': '4.0', 
            'Accept': 'application/json',
            'Content-type': 'application/json',
            'X-RequestDigest': requestDigest,
            'IF-MATCH': '*',
            'X-HTTP-Method': 'MERGE'
          },
          data: body
        }).then((result: angular.IHttpPromiseCallbackArg<{}>): void => {
          deferred.resolve();
        }, (err: any): void => {
          deferred.reject(err);
      });
    return deferred.promise;
  }
Get the List Item Entity Type
Get the digest value
Set the List Item Entity Type to the request body
Add the digest to the X-RequestDigest header
Use the SharePoint Context httpClient to call the SharePoint REST API
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

9. Deleting list items Get the digest value
SharePoint
Deleting list items
Get the digest value
Add the digest to the X-RequestDigest header
Use the SharePoint Context httpClient to call the SharePoint REST API
public deleteListItem(item: IListItem, siteUrl: string, listName: string): angular.IPromise<number> {
const deferred: angular.IDeferred<{}> = this.$q.defer();
this.getRequestDigest(siteUrl)
.then((requestDigest: string): void => {
this.$http({
url: `${siteUrl}/_api/web/lists/getbytitle('${listName}')/items(${item.Id})`,
method: 'POST',
headers: {
'Accept': 'application/json',
'X-RequestDigest': requestDigest,
'IF-MATCH': '*',
'X-HTTP-Method': 'DELETE' }
}).then((result: angular.IHttpPromiseCallbackArg<{}>): void => {
deferred.resolve();
});
return deferred.promise;
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. Implement Angular controller
SharePoint
Implement Angular controller
Implement the controller that will facilitate communication between the views and the data service
Import the interfaces defined in the data service
Define public properties that will be bound to the view and the internal private properties
Inject the data service into the controller using Angular's dependency injection
Implement methods that are exposed to the view, including CRUD methods that call the corresponding CRUD methods in the data service
import { IDataService, IListItem } from './DataService';
public isAdding: boolean = false;
public hasError: boolean = false;
public message: string = "";
public newItem: string = null;
public listItems: IListItem[] = [];
private siteUrl: string = undefined;
private listName: string = undefined;
public static $inject: string[] = ['DataService', '$window', '$rootScope'];
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. Constructor The constructor subscribes an Angular event named init,
SharePoint
Constructor
The constructor subscribes an Angular event named init,
then handles it by calling a private method named init,
which in turn calls another private method to load the list items.
constructor(private dataService: IDataService,
private $window: angular.IWindowService,
$rootScope: angular.IRootScopeService) {
const vm: HomeController = this;
$rootScope.$on('init',
(event: angular.IAngularEvent,
args: {
siteUrl: string;
listName: string;
}): void => {
vm.init(args.siteUrl, args.listName);
}); }
private init(siteUrl: string, listName: string): void {
let siteUrlValid: boolean = false;
let listNameValid: boolean = false;
if (siteUrl != undefined && siteUrl != null && siteUrl.length > 0) {
this.siteUrl = siteUrl;
siteUrlValid = true; }
if (listName != undefined && listName != null && listName.length > 0) {
this.listName = listName;
listNameValid = true;
if (siteUrlValid && listNameValid) {
this.loadListItems();
private loadListItems(): void {
this.message = "Loading...";
this.dataService.getListItems(this.siteUrl, this.listName)
.then((items: IListItem[]): void => {
this.listItems = items;
this.message = "Load succeeded";
this.hasError = false; },
(error: any): void => {
this.message = "Load failed";
this.hasError = true;
}); }
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Methods exposed to the view
SharePoint
Methods exposed to the view
Show Add New List Item UI
Add New List Item
public showAddNew(show: boolean): void {
this.isAdding = show;
if (!show) {
this.newItem = null; }
public addNewItem(): void {
this.dataService.addListItem(this.newItem, this.siteUrl, this.listName)
.then((Id: number): void => {
this.listItems.unshift({Id: Id, Title: this.newItem});
this.newItem = null;
this.message = "Add succeeded";
this.hasError = false; },
(error: any): void => {
this.message = "Add failed";
this.hasError = true;
}); }
Update List Item
Delete List Item
public updateItem(item: IListItem): void {
this.dataService.updateListItem(item, this.siteUrl, this.listName)
.then((): void => {
this.message = "Update succeeded";
this.hasError = false; },
(error: any): void => {
this.message = "Update failed";
this.hasError = true;
}); }
public deleteItem(item: IListItem): void {
this.dataService.deleteListItem(item, this.siteUrl, this.listName)
.then((Id: number): void => {
const index: number = this.listItems.indexOf(item);
if (index > -1) {
this.listItems.splice(index, 1); }
this.message = "Delete succeeded";
this.hasError = false; },
(error: any): void => {
this.message = "Delete failed";
this.hasError = true;
});
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

13. Define the Angular main module
SharePoint
Define the Angular main module
The Angular main module registers the data service and controller with it
import HomeController from './HomeController';
import DataService from './DataService';
const angularApp: angular.IModule = angular.module('angularApp', []);
angularApp
.controller('HomeController', HomeController)
.service('DataService', DataService);
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Register the Angular application with the web part
SharePoint
Register the Angular application with the web part
Import the Angular main module
Define the Angular injector
Define the template of the Angular view that is bound to the Angular controller
Broadcast an Angular event named init when the web part is rendered
import './app/app-module';
private $injector: angular.auto.IInjectorService;
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

15. Web part’s render method
SharePoint
Web part’s render method
The web part’s render method defines the template for the Angular view, and broadcasts an Angular event named init
The template of the Angular view is bound to the controller of the Angular application
public render(): void {
if (!this.renderedOnce) {
this.domElement.innerHTML = `
<div class="${styles.helloWorld}" ng-controller="HomeController as vm">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<p class='ms-font-l'>There are {{vm.listItems.length}} item(s) in {{vm.listName}} list</p>
<table>
<thead><tr>th>Title</th><th /><th /><tr></thead>
<tbody>
<tr ng-repeat="item in vm.listItems">
<td><input class=‘ms-TextField-field’ ng-model="item.Title" /></td>
<td><button class="${styles.button}" ng-click="vm.updateItem(item)"><label
class="${styles.label}">Update</label></button></td> …
</tr>
</tbody>
</table>
</div>
</div>`;
this.$injector = angular.bootstrap(this.domElement, ['angularApp']); }
this.$injector.get('$rootScope').$broadcast('init', {
siteUrl: this.context.pageContext.web.absoluteUrl,
listName: this.listName
});
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

16. Implement web part’s CSS styles
SharePoint
Implement web part’s CSS styles
.helloWorld {
  .container {
    max-width: 700px; margin: 0px auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }   .row {
    padding: 20px;
  }   .listItem {
    max-width: 715px; margin: 5px auto 5px auto;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
  }   .button {
    // Our button
    text-decoration: none; height: 32px;     // Primary Button
    min-width: 80px; background-color: #0078d7;
 border-color: #0078d7; color: #ffffff;     // Basic Button
    outline: transparent; position: relative;
    font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px; font-weight: 400;
 border-width: 0; text-align: center;
    cursor: pointer; display: inline-block;
 padding: 0 16px;
    .label {
      font-weight: 600; font-size: 14px;
 height: 32px; line-height: 32px;
      margin: 0 4px; vertical-align: top; display: inline-block;
    }
  } }
Define the CSS styles for the web part in the <web part name>.module.scss file.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

17. DEMO Working with JavaScript framework Angular 1.x SharePoint
Use Exercise 1: Implement CRUD operations in a SPFx client-side web part with the Angular 1.x framework in the lab manual.
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

18. Summary Implement the Angular data service and controller
Define the Angular main module
Register the Angular application with the web part
Q&A

19. Sharing is caring… http://aka.ms/SharePointPnP
Code samples and solutions
Reusable components
Guidance documentation
Monthly community calls
SharePoint Framework
SharePoint add-ins
Microsoft Graph
Office 365 APIs

20. 11/30/2018
Q&A
© 2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21. 11/30/2018
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.