If you are not aware of SharePoint Framework, go through this article

Assumption

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:

md spfx-messagecenter-webpart

• Navigate to the project directory

cd spfx-messagecenter-webpart

• Create a new Message Center web part by running the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

You will be prompted with a series of questions:

• Accept the default spfx-messagecenter-webpart 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 MessageCenter as your web part name and press Enter.
• Accept the default Message Center description as your web part description and press Enter.
• Accept the default No javascript web framework as the framework you would like to use 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:

code.

• To install angular from npm you should run in the command line:

npm i angular -S

Note: Repeat the same command to install jquery, bootstrap and angular-ui-bootstrap

• Next, to install Angular typings, in the command line run:

tsd install angular –save

Note: Repeat the same command to install jquery, bootstrap and angular-ui-bootstrap

• 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.

spfx-messagecenter-webpart\src\webparts\messageCenter\app\controller_home.js and write this code in the controller js file.

• Refer the following files for imports, custom properties, bootstrapping the Angular application, templates, loading css and WebPart Configurations

  • IMessageCenterWebPartProps.ts
  • MessageCenter.module.scss
  • MessageCenterWebPart.manifest.json
  • MessageCenterWebPart.ts
  • MockHttpClient.ts
  • en-us.js
  • mystrings.d.ts
  • LandingTemplate.ts

• At this point we are ready to validate our WebPart. Switch to your console, make sure you are still in the spfx-messagecenter-webpart 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 article, we will deploy and load the web part assets from CDN instead of localhost.