SharePoint PnP Webcast – Building Angular SharePoint Framework Client Web Part

In this PnP Web Cast we concentrated on covering how to use Angular in your SharePoint Framework client side web part. We go throught the steps on adding Angular on the SP Fx web part project and build a simple task tracking solution. Actual tasks are not saved to SharePoint in this sample, since we wanted to concentrate on showing the Angular integration part, without additional complexity. You can certainly extend your implementation to talk to SharePoint lists for task CRUD operations. We also cover how to use ngOfficeUIFabric to help on making your Angular based client side web part UI consistent with SharePoint. ngOfficeUIFabric is community driven initiative to have Angular 1.x directives for Office UI Fabric components.

Notice. When this webcast was released SharePoint Framework was in Developer Preview, which means that the client web parts should not yet use in production at SharePoint Online.

Presentation covers following topics:

  • Steps to include Angular to your solution
  • Steps to get started on the Angular development with SP Fx

Web cast demo shows following details

  • Walk-through of the sample todo web part
  • Steps on creating your SP Fx project for the Angular implementation
  • Adding Angular and ngOfficeUIFabric dependencies
  • Creating controller and data service for your Angular app
  • Using correct Office UI Fabric version in your app
  • How to change your property pane to be reactive or non-reactive
  • Broadcasting property pane updates from SP Fx to Angular app

Web cast presenters: Waldek MastykarzVesa Juvonen

Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.

Source code for used client side web part will be shared during upcoming days at http://github.com/sharePoint.

Video at YouTube.

Additional resources

See following resources around the upcoming SharePoint Framework. 

What is SharePoint / Office DevPatterns & Practices (PnP) web cast series?PnP logo

SharePoint and Office Dev Patterns & Practices (PnP) webcast series covers different patterns, practices and topics around development with Office 365 and SharePoint. Majority of the topics are valid for the Office 365 and SharePoint on-premises. Our objective is to release new around 30 minute long web cast each Monday with few slides and a live demo on the covered topic. All web casts are published at the PnP Channel 9 video blog with additional references on the existing materials.

PnP is community driven open source project where Microsoft and external community members are sharing their learning's around implementation practices for Office 365 and SharePoint on-premises (add-in model). Active development and contributions happen in our GitHub repositories under dev branch and each month there will be a master merge (monthly release) with more comprehensive testing and communications. Latest activities and future plans are covered in our monthly community calls which are open for anyone from the community. Download invite from http://aka.ms/OfficeDevPnPCall.

This is work done by the community for the community without any actual full time people. It’s been great to find both internal and external people who are willing to assist and share their learning's for the benefit of others. This way we can build on the common knowledge of us all. Currently program is facilitated by Microsoft, but already at this point we have multiple community members as part of the Core team and we are looking to extend the Core team with more community members.

If you have any questions, comments or feedback around PnP program or this blog post, please use the Office 365 Network (SharePoint Developer group).

“Sharing is caring”


Vesa Juvonen, Senior Program Manager, SharePoint, Microsoft - 29th of August 2016