August 29, 2016
If you are not aware of SharePoint Framework, go through this article https://github.com/SharePoint/sp-dev-docs/wiki
I hope you are aware of SharePoint Framework and your machine is ready for development.
In this article I am going to explain how to create a very basic angular WebPart using SharePoint Framework
- We are going to display the list items in this WebPart so create a list as shown below:
- Create a new project directory in your favorite location:
- Navigate to the project directory
- Create a new Message Center web part by running the Yeoman SharePoint Generator:
You will be prompted with a series of questions:
- Accept the default sfx-addin-message-center as your solution name and press Enter.
- Select Use the current folder to place the files.
The next set of prompts will ask specific information about your web part:
- Type Message Center as your web part name and press Enter.
- Accept the default Message Center description as your web part description and press Enter.
At this point, yeoman will install the required dependencies and scaffold the solution files along with the Message Center web part. This might take a few minutes.
Once the scaffold is complete, you should see the following message indicating a successful scaffold:
- In the console, type the following to open the web part project in Visual Studio Code:
- To install angular and ngOfficeUIFabric from npm you should run in the command line:
npm i angular ng-office-ui-fabric -S
- Next, to install Angular typings, in the command line run:
tsd install angular –save
- To install combokeys you should run in the command line
tsd install combokeys –save
- Now create a js file to write our angular controller logic in the below location.
- Write the below code in the controller js file
Note: Here you can change the logic, site url for REST API, list name, columns as per your requirement.
- In order to load Office UI Fabric CSS from a CDN, we first need to load the ModuleLoader class, by adding the following import statement to the Web Part’s code:
import ModuleLoader from ‘@microsoft/sp-module-loader’;
- To use Angular in your Web Part you need to add the following in MessageCenterWebPart.ts:
import * as angular from ‘angular’;
- To use ngOfficeUIFabric in your Web Part you need to add the following in MessageCenterWebPart.ts:
- When bootstrapping the Angular application, we need to get a reference to $injector. So declare it privately within MessageCenterWebPart
private $injector: ng.auto.IInjectorService;
- In the Web Part’s constructor, we use the loadCss function to load Office UI Fabric CSS:
- Replace the render method with the below code
- At this point we are ready to validate our WebPart. Switch to your console, make sure you are still in the SFX-Addin-MessageCenter directory and type the following to build and preview your web part in workbench.aspx page you have uploaded when setup the environment:
gulp serve –nobrowser
- Open workbench.aspx from document library and add the Message Center WebPart. If everything works fine, you should see the list items in the WebPart as shown below:
In the next tutorial, we will deploy and load the web part assets from CDN instead of localhost.