Post
Ask Question

SharePoint Framework - CRUD Operations Using Angular

Overview

In the article Develop First Client-Side Web Part, we developed a basic SharePoint client web part which can run independently without any interaction with SharePoint.

In this article, we will explore how to interact with the SharePoint list for CRUD (Create, Read, Update, and Delete) operations using Angular JS. AngularJS is not natively supported by SharePoint Framework.

Brief info about Angular JS

AngularJS is a JavaScript framework which extends HTML with new attributes. It is popular for creating SPAs (Single Page Applications). Read more about AngularJS at https://angularjs.org/

Create SPFx Solution

Open the command prompt. Create a directory for SPFx solution.
  1. md spfx-crud-angularjs  
Navigate to the above-created directory.
  1. cd spfx-crud-angularjs  
Run Yeoman SharePoint Generator to create the solution.
  1. yo @microsoft/sharepoint  
Yeoman generator will present you with the wizard by asking questions about the solution to be created.

CRUD operations using Angular
 
Solution Name

Hit enter to have a default name (spfx-crud-angularjs in this case) or type in any other name for your solution.

Selected choice - Hit Enter.
 
Target for component

Here we can select the target environment where we are planning to deploy the client webpart, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice - SharePoint Online only (latest).
 
Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice - Same folder.
 
Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and will be accessible everywhere.

Selected choice - N (install on each site explicitly).
 
Type of client-side component to create

We can choose to create client-side webpart or an extension. Choose the webpart option.

Selected choice - WebPart.
 
Web part name

Hit enter to select the default name or type in any other name.

Selected choice - AngularCRUD.
 
Web part description

Hit enter to select the default description or type in any other value.

Selected choice - CRUD operations with Angular JS
 
Framework to use

Select any JavaScript framework to develop the component. Available choices are (No JavaScript Framework, React, and Knockout)

Selected choice - No JavaScript Framework
 
Yeoman generator will perform scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running below command
  1. npm shrinkwrap  
In the command prompt type the below command to open the solution in the code editor of your choice.
  1. code .  
Configure Angular JS

As Angular JS is not natively supported in SharePoint framework, we have to add a reference of it to our solution using NPM package. Type in the below commands on the command prompt.
  1. npm i angular ng-office-ui-fabric --save  
The --save option enables NPM to include the packages to dependencies section of the package.json file.
Install Angular typings for TypeScript. Typings will help for auto complete while writing the code in the code editor.
  1. tsd install @types/angular --save  
Expand node_module folder to see the npm packages being added for Angular.

CRUD operations using Angular 

Open config.json under config folder. Under externals node, add Angular reference.

CRUD operations using Angular 

You may also add path from external CDN.
 
Open package.json and verify Angular dependency is listed.

CRUD operations using Angular 
 
Configure Property for List Name

SPFx solution by default has the description property created. Let us change the property to list name. We will use this property to configure the list name on which the CRUD operation is to perform.

Step 1

Open mystrings.d.ts under \src\webparts\angularCrud\loc\ folder

Step 2

Rename DescriptionFieldLabel to ListNameFieldLabel

CRUD operations using Angular  
  1. declare interface IAngularCrudWebPartStrings {  
  2.   PropertyPaneDescription: string;  
  3.   BasicGroupName: string;  
  4.   ListNameFieldLabel: string;  
  5. }  
  6.   
  7. declare module 'AngularCrudWebPartStrings' {  
  8.   const strings: IAngularCrudWebPartStrings;  
  9.   export = strings;  
  10. }  
Step 3

In en-us.js file under \src\webparts\angularCrud\loc\ folder set the display name for listName property

CRUD operations using Angular  
  1. define([], function() {  
  2.   return {  
  3.     "PropertyPaneDescription": "Description",  
  4.     "BasicGroupName": "Group Name",  
  5.     "ListNameFieldLabel": "List Name"  
  6.   }  
  7. });  
Step 4

Open main webpart file (AngularCrudWebPart.ts) under \src\webparts\angularCrud folder.

Step 5

Rename description property pane field to listName
  1. export interface IAngularCrudWebPartProps {  
  2.   listName: string;  
  3. }  
  4.   
  5. export default class AngularCrudWebPart extends BaseClientSideWebPart<IAngularCrudWebPartProps> {  
  6.   
  7.   public render(): void {  
  8.     this.domElement.innerHTML = `  
  9.       <div class="${ styles.angularCrud }">  
  10.         <div class="${ styles.container }">  
  11.           <div class="${ styles.row }">  
  12.             <div class="${ styles.column }">  
  13.               <span class="${ styles.title }">Welcome to SharePoint!</span>  
  14.               <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>  
  15.               <p class="${ styles.description }">${escape(this.properties.listName)}</p>  
  16.               <a href="https://aka.ms/spfx" class="${ styles.button }">  
  17.                 <span class="${ styles.label }">Learn more</span>  
  18.               </a>  
  19.             </div>  
  20.           </div>  
  21.         </div>  
  22.       </div>`;  
  23.   }  
  24.   
  25.   protected get dataVersion(): Version {  
  26.     return Version.parse('1.0');  
  27.   }  
  28.   
  29.   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  
  30.     return {  
  31.       pages: [  
  32.         {  
  33.           header: {  
  34.             description: strings.PropertyPaneDescription  
  35.           },  
  36.           groups: [  
  37.             {  
  38.               groupName: strings.BasicGroupName,  
  39.               groupFields: [  
  40.                 PropertyPaneTextField('listName', {  
  41.                   label: strings.ListNameFieldLabel  
  42.                 })  
  43.               ]  
  44.             }  
  45.           ]  
  46.         }  
  47.       ]  
  48.     };  
  49.   }  
  50. }  
Step 6

In the command prompt, type “gulp serve”

Step 7

In the SharePoint local workbench page, add the web part.

Step 8

Edit the web part to ensure the listName property pane field is getting reflected.

CRUD operations using Angular 
 
Build an Angular application

Add a folder named “app” as the starting point for creating the Angular app.
 
Configure Data Service

Add a file DataService.ts under app folder and define the data services we are going to perform.
  1. export interface IListItem {  
  2.     Id: number;  
  3.     Title?: string;  
  4.      ETag?: string;  
  5.   }  
  6.     
  7.   export interface IDataService {  
  8.     createItem(title: string, webUrl: string, listName: string): angular.IPromise<IListItem>;  
  9.     readItem(itemId: number, webUrl: string, listName: string): angular.IPromise<IListItem>;  
  10.     getLatestItemId(webUrl: string, listName: string): angular.IPromise<number>;  
  11.     updateItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}>;  
  12.     deleteItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}>;  
  13.   }  
  14.     
  15.   export default class DataService implements IDataService {  
  16.     public static $inject: string[] = ['$q', '$http'];  
  17.   
  18.     constructor(private $q: angular.IQService, private $http: angular.IHttpService) {  
  19.     }  
  20.     
  21.     public createItem(title: string, webUrl: string, listName: string): angular.IPromise<IListItem> {  
  22.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  23.         return deferred.promise;  
  24.     }  
  25.   
  26.     public readItem(itemId: number, webUrl: string, listName: string): angular.IPromise<IListItem> {  
  27.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  28.         return deferred.promise;  
  29.     }  
  30.   
  31.     public getLatestItemId(webUrl: string, listName: string): angular.IPromise<number> {  
  32.         const deferred: angular.IDeferred<number> = this.$q.defer();  
  33.         return deferred.promise;  
  34.     }  
  35.   
  36.     public updateItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}> {  
  37.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  38.         return deferred.promise;  
  39.     }  
  40.   
  41.     public deleteItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}> {  
  42.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  43.         return deferred.promise;  
  44.     }  
  45.   }  
Implement generic methods

getLatestItemId - to get the id of the latest item.
  1. public getLatestItemId(webUrl: string, listName: string): angular.IPromise<number> {  
  2.         const deferred: angular.IDeferred<number> = this.$q.defer();  
  3.   
  4.         this.$http({  
  5.             url: `${webUrl}/_api/web/lists/getbytitle('${listName}')/items?$orderby=Id desc&$top=1&$select=Id`,  
  6.             method: 'GET',  
  7.             headers: {  
  8.               'Accept': 'application/json;odata=nometadata'  
  9.             }  
  10.         }).then((result: angular.IHttpPromiseCallbackArg<{ value: { Id: number }[] }>): void => {  
  11.             if (result.data.value.length === 0) {  
  12.               deferred.resolve(-1);  
  13.             }  
  14.             else {  
  15.               deferred.resolve(result.data.value[0].Id);  
  16.             }  
  17.           }, (error: any): void => {  
  18.             deferred.reject(error);  
  19.         });  
  20.   
  21.         return deferred.promise;  
  22.     }  
getRequestDigest - to get the request digest to send along with create, update, delete operations.
  1. private getRequestDigest(webUrl: string): angular.IPromise<string> {  
  2.         const deferred: angular.IDeferred<string> = this.$q.defer();  
  3.       
  4.         this.$http({  
  5.           url: webUrl + '/_api/contextinfo',  
  6.           method: 'POST',  
  7.           headers: {  
  8.             'Accept': 'application/json;odata=nometadata'  
  9.           }  
  10.         })  
  11.           .then((digestResult: angular.IHttpPromiseCallbackArg<{ FormDigestValue: string }>): void => {  
  12.             deferred.resolve(digestResult.data.FormDigestValue);  
  13.           }, (error: any): void => {  
  14.             deferred.reject(error);  
  15.           });  
  16.       
  17.         return deferred.promise;  
  18.     }  
getListItemEntityTypeName - to get the entity type name of list item to send along with create, update, delete operations.
  1. private getListItemEntityTypeName(webUrl: string, listName: string): angular.IPromise<string> {  
  2.       const deferred: angular.IDeferred<string> = this.$q.defer();  
  3.     
  4.       this.$http({  
  5.         url: `${webUrl}/_api/web/lists/getbytitle('${listName}')?$select=ListItemEntityTypeFullName`,  
  6.         method: 'GET',  
  7.         headers: {  
  8.           'Accept': 'application/json;odata=nometadata'  
  9.         }  
  10.       })  
  11.         .then((result: angular.IHttpPromiseCallbackArg<{ ListItemEntityTypeFullName: string }>): void => {  
  12.           deferred.resolve(result.data.ListItemEntityTypeFullName);  
  13.         }, (error: any): void => {  
  14.           deferred.reject(error);  
  15.         });  
  16.     
  17.       return deferred.promise;  
  18.     }  
Implement Create Operation

We will use the REST API to add the item to list.
  1. public createItem(title: string, webUrl: string, listName: string): angular.IPromise<IListItem> {  
  2.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  3.   
  4.         let listItemEntityTypeName: string = undefined;  
  5.         this.getListItemEntityTypeName(webUrl, listName)  
  6.           .then((typeName: string): angular.IPromise<string> => {  
  7.             listItemEntityTypeName = typeName;  
  8.             return this.getRequestDigest(webUrl);  
  9.           })  
  10.           .then((requestDigest: string): angular.IPromise<angular.IHttpPromiseCallbackArg<IListItem>> => {  
  11.             const body: string = JSON.stringify({  
  12.               '__metadata': {  
  13.                 'type': listItemEntityTypeName  
  14.               },  
  15.               'Title': title  
  16.             });  
  17.             return this.$http({  
  18.               url: `${webUrl}/_api/web/lists/getbytitle('${listName}')/items`,  
  19.               method: 'POST',  
  20.               headers: {  
  21.                 'Accept': 'application/json;odata=nometadata',  
  22.                 'Content-type': 'application/json;odata=verbose',  
  23.                 'X-RequestDigest': requestDigest  
  24.               },  
  25.               data: body  
  26.             });  
  27.           })  
  28.           .then((response: angular.IHttpPromiseCallbackArg<IListItem>): void => {  
  29.             deferred.resolve(response.data);  
  30.           }, (error: any): void => {  
  31.             deferred.reject(error);  
  32.           });  
  33.   
  34.         return deferred.promise;      
  35.     }  
Implement Read Operation

We will use REST API to read the latest item.
  1. public readItem(itemId: number, webUrl: string, listName: string): angular.IPromise<IListItem> {  
  2.         const deferred: angular.IDeferred<IListItem> = this.$q.defer();  
  3.   
  4.         this.$http({  
  5.             url: `${webUrl}/_api/web/lists/getbytitle('${listName}')/items(${itemId})`,  
  6.             method: 'GET',  
  7.             headers: {  
  8.               'Accept': 'application/json;odata=nometadata'  
  9.             }  
  10.         })  
  11.         .then((response: angular.IHttpPromiseCallbackArg<IListItem>): void => {  
  12.                 const item: IListItem = response.data;  
  13.                 item.ETag = response.headers('ETag');  
  14.                 deferred.resolve(item);  
  15.             }, (error: any): void => {  
  16.                 deferred.reject(error);  
  17.         });  
  18.   
  19.         return deferred.promise;  
  20.     }  
Implement Update Operation

We will use REST API to update the latest item.
  1. public updateItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}> {  
  2.       const deferred: angular.IDeferred<{}> = this.$q.defer();  
  3.   
  4.       let listItemEntityTypeName: string = undefined;  
  5.       this.getListItemEntityTypeName(webUrl, listName)  
  6.         .then((typeName: string): angular.IPromise<string> => {  
  7.           listItemEntityTypeName = typeName;  
  8.           return this.getRequestDigest(webUrl);  
  9.         })  
  10.         .then((requestDigest: string): angular.IPromise<angular.IHttpPromiseCallbackArg<{}>> => {  
  11.           const body: string = JSON.stringify({  
  12.             '__metadata': {  
  13.               'type': listItemEntityTypeName  
  14.             },  
  15.             'Title': item.Title  
  16.           });  
  17.           return this.$http({  
  18.             url: `${webUrl}/_api/web/lists/getbytitle('${listName}')/items(${item.Id})`,  
  19.             method: 'POST',  
  20.             headers: {  
  21.               'Accept': 'application/json;odata=nometadata',  
  22.               'Content-type': 'application/json;odata=verbose',  
  23.               'X-RequestDigest': requestDigest,  
  24.               'IF-MATCH': item.ETag,  
  25.               'X-HTTP-Method': 'MERGE'  
  26.             },  
  27.             data: body  
  28.           });  
  29.         })  
  30.         .then((result: {}): void => {  
  31.           deferred.resolve();  
  32.         }, (error: any): void => {  
  33.           deferred.reject(error);  
  34.         });  
  35.     
  36.       return deferred.promise;  
  37.     }  
Implement Delete Operation

We will use REST API to delete the latest item.
  1. public deleteItem(item: IListItem, webUrl: string, listName: string): angular.IPromise<{}> {  
  2.       const deferred: angular.IDeferred<{}> = this.$q.defer();  
  3.   
  4.       this.getRequestDigest(webUrl)  
  5.         .then((requestDigest: string): angular.IPromise<angular.IHttpPromiseCallbackArg<{}>> => {  
  6.           return this.$http({  
  7.             url: `${webUrl}/_api/web/lists/getbytitle('${listName}')/items(${item.Id})`,  
  8.             method: 'POST',  
  9.             headers: {  
  10.               'Accept': 'application/json;odata=nometadata',  
  11.               'X-RequestDigest': requestDigest,  
  12.               'IF-MATCH': item.ETag,  
  13.               'X-HTTP-Method': 'DELETE'  
  14.             }  
  15.           });  
  16.         })  
  17.         .then((result: {}): void => {  
  18.           deferred.resolve();  
  19.         }, (error: any): void => {  
  20.           deferred.reject(error);  
  21.         });  
  22.     
  23.       return deferred.promise;  
  24.     }  
Configure Controller

Add a file HomeController.ts under the app folder.
  1. import { IDataService, IListItem } from './DataService';  
  2.   
  3. interface IConfigurationChangedArgs {  
  4.   webUrl: string;  
  5.   listName: string;  
  6. }  
  7.   
  8. export default class HomeController {  
  9.   public static $inject: string[] = ['DataService', '$window', '$rootScope', '$scope'];  
  10.   
  11.   public status: string = undefined;  
  12.   public items: IListItem[] = [];  
  13.   
  14.   private webUrl: string = undefined;  
  15.   private listName: string = undefined;  
  16.   
  17.   constructor(private dataService: IDataService, private $window: angular.IWindowService, private $rootScope: angular.IRootScopeService, private $scope: angular.IScope) {  
  18.     const vm: HomeController = this;  
  19.     this.init(undefined, undefined, undefined);  
  20.   
  21.     $rootScope.$on('configurationChanged',  
  22.       (event: angular.IAngularEvent, args: IConfigurationChangedArgs): void => {  
  23.         vm.init(args.webUrl, args.listName, vm.$scope);  
  24.       });  
  25.   }  
  26.   
  27.   private init(webUrl: string, listName: string, $scope: angular.IScope): void {  
  28.     if (webUrl !== undefined && webUrl.length > 0 &&  
  29.       listName !== undefined && listName.length > 0) {  
  30.       this.webUrl = webUrl;  
  31.       this.listName = listName;  
  32.     }  
  33.       
  34.     if ($scope) {  
  35.       $scope.$digest();  
  36.     }  
  37.   }  
  38.   
  39.   public createItem(): void {  
  40.     const itemTitle: string = `Item ${new Date()}`;  
  41.     this.status = 'Creating item...';  
  42.     this.items.length = 0;  
  43.     this.dataService.createItem(itemTitle, this.webUrl, this.listName)  
  44.       .then((item: IListItem): void => {  
  45.         this.status = `Item '${item.Title}' (ID: ${item.Id}) successfully created`;  
  46.       }, (error: any): void => {  
  47.         this.status = 'Error while creating the item: ' + error;  
  48.       });  
  49.   }  
  50.   
  51.   public readItem(): void {  
  52.     this.status = 'Loading latest items...';  
  53.     this.items.length = 0;  
  54.     this.dataService.getLatestItemId(this.webUrl, this.listName)  
  55.       .then((itemId: number): angular.IPromise<IListItem> => {  
  56.         if (itemId === -1) {  
  57.           throw new Error('No items found in the list');  
  58.         }  
  59.   
  60.         this.status = `Loading information about item ID: ${itemId}...`;  
  61.         return this.dataService.readItem(itemId, this.webUrl, this.listName);  
  62.       })  
  63.       .then((item: IListItem): void => {  
  64.         this.status = `Item ID: ${item.Id}, Title: ${item.Title}`;  
  65.       }, (error: any): void => {  
  66.         this.status = 'Loading latest item failed with error: ' + error;  
  67.       });  
  68.   }  
  69.   
  70.   public updateItem(): void {  
  71.     this.status = 'Loading latest items...';  
  72.     this.items.length = 0;  
  73.     let latestItemId: number = undefined;  
  74.     this.dataService.getLatestItemId(this.webUrl, this.listName)  
  75.       .then((itemId: number): angular.IPromise<IListItem> => {  
  76.         if (itemId === -1) {  
  77.           throw new Error('No items found in the list');  
  78.         }  
  79.   
  80.         latestItemId = itemId;  
  81.         this.status = `Loading information about item ID: ${latestItemId}...`;  
  82.   
  83.         return this.dataService.readItem(latestItemId, this.webUrl, this.listName);  
  84.       })  
  85.       .then((latestItem: IListItem): angular.IPromise<{}> => {  
  86.         this.status = `Updating item with ID: ${latestItemId}...`;  
  87.         latestItem.Title = `Item ${new Date()}`;  
  88.         return this.dataService.updateItem(latestItem, this.webUrl, this.listName);  
  89.       })  
  90.       .then((result: {}): void => {  
  91.         this.status = `Item with ID: ${latestItemId} successfully updated`;  
  92.       }, (error: any): void => {  
  93.         this.status = `Error updating item: ${error}`;  
  94.       });  
  95.   }  
  96.   
  97.   public deleteItem(): void {  
  98.     if (!this.$window.confirm('Are you sure you want to delete this todo item?')) {  
  99.       return;  
  100.     }  
  101.   
  102.     this.status = 'Loading latest items...';  
  103.     this.items.length = 0;  
  104.     let latestItemId: number = undefined;  
  105.     this.dataService.getLatestItemId(this.webUrl, this.listName)  
  106.       .then((itemId: number): angular.IPromise<IListItem> => {  
  107.         if (itemId === -1) {  
  108.           throw new Error('No items found in the list');  
  109.         }  
  110.   
  111.         latestItemId = itemId;  
  112.         this.status = `Loading information about item ID: ${latestItemId}...`;  
  113.   
  114.         return this.dataService.readItem(latestItemId, this.webUrl, this.listName);  
  115.       })  
  116.       .then((latestItem: IListItem): angular.IPromise<{}> => {  
  117.         this.status = `Deleting item with ID: ${latestItemId}...`;  
  118.         return this.dataService.deleteItem(latestItem, this.webUrl, this.listName);  
  119.       })  
  120.       .then((result: {}): void => {  
  121.         this.status = `Item with ID: ${latestItemId} successfully deleted`;  
  122.       }, (error: any): void => {  
  123.         this.status = `Error deleting item: ${error}`;  
  124.       });  
  125.   }  
  126. }  
Configure Module

Add a file app-module.ts under the app folder.
  1. import * as angular from 'angular';  
  2. import HomeController from './HomeController';  
  3. import DataService from './DataService';  
  4.   
  5. import 'ng-office-ui-fabric';  
  6.   
  7. const crudapp: ng.IModule = angular.module('crudapp', [  
  8.   'officeuifabric.core',  
  9.   'officeuifabric.components'  
  10. ]);  
  11.   
  12. crudapp  
  13.   .controller('HomeController', HomeController)  
  14.   .service('DataService', DataService);  
Add Controls to WebPart
Step 1

Open AngularCrudWebPart.ts under “\src\webparts\angularCrud\” folder.

Step 2

Import Angular module.
  1. import * as angular from 'angular';  
  2. import './app/app-module';  
Step 3

Modify Render method to include buttons for CRUD operations and add event handlers to each of the buttons.
  1. export default class AngularCrudWebPart extends BaseClientSideWebPart<IAngularCrudWebPartProps> {  
  2.   private $injector: angular.auto.IInjectorService;  
  3.   
  4.   public render(): void {  
  5.     if (this.renderedOnce === false) {  
  6.       this.domElement.innerHTML = `  
  7.         <div class="${styles.angularCrud}" data-ng-controller="HomeController as vm">  
  8.           <div class="${styles.container}">  
  9.             <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
  10.               <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
  11.                   <span class="ms-font-xl ms-fontColor-white">  
  12.                     Sample SharePoint CRUD operations in Angular  
  13.                   </span>  
  14.                 </div>  
  15.               </div>  
  16.               <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
  17.                 <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
  18.                   <uif-button ng-click="vm.createItem()" ng-disabled="vm.listNotConfigured">Create item</uif-button>  
  19.                   <uif-button ng-click="vm.readItem()" ng-disabled="vm.listNotConfigured">Read item</uif-button>  
  20.                 </div>  
  21.               </div>  
  22.               <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
  23.                   
  24.               <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
  25.                 <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
  26.                   <uif-button ng-click="vm.updateItem()" ng-disabled="vm.listNotConfigured">Update item</uif-button>  
  27.                   <uif-button ng-click="vm.deleteItem()" ng-disabled="vm.listNotConfigured">Delete item</uif-button>  
  28.                 </div>  
  29.               </div>  
  30.               <div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">  
  31.                 <div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">  
  32.                   <div>{{vm.status}}</div>  
  33.                   <ul>  
  34.                     <li ng-repeat="item in vm.items">{{item.Title}} ({{item.Id}})</li>  
  35.                   <ul>  
  36.                 </div>  
  37.               </div>  
  38.           </div>  
  39.         </div>`;  
  40.   
  41.       this.$injector = angular.bootstrap(this.domElement, ['crudapp']);  
  42.     }  
  43.   
  44.     this.$injector.get('$rootScope').$broadcast('configurationChanged', {  
  45.       webUrl: this.context.pageContext.web.absoluteUrl,  
  46.       listName: this.properties.listName  
  47.     });  
  48.   }  
  49. }   
Test the WebPart
  1. On the command prompt, type “gulp serve”
  2. Open SharePoint site
  3. Navigate to /_layouts/15/workbench.aspx
  4. Add the webpart to page.
  5. Edit webpart, in the properties pane, type the list name
  6. Click the buttons (Create Item, Read Item, Update Item, and Delete Item) one by one to test the webpart
  7. Verify the operations are taking place in the SharePoint list.
Create Operation

CRUD operations using Angular
 
Read Operation

CRUD operations using Angular
 
Update Operation

CRUD operations using Angular
 
Delete Operation

CRUD operations using Angular
  
Troubleshooting

In some cases SharePoint workbench (https://[tenant].sharepoint.com/_layouts/15/workbench.aspx) shows below error although “gulp serve” is running.

CRUD operations using Angular
 
Open the below URL in the next tab of the browser. Accept the warning message.

https://localhost:4321/temp/manifests.js
 
Summary

Angular JS is not natively supported by the SharePoint framework. However, it can be used with SharePoint Framework. Angular is more famous for creating SPAs (Single Page Applications).


Similar Articles