Forum Discussion

VesaJuvonen's avatar
VesaJuvonen
Icon for Microsoft rankMicrosoft
Aug 29, 2016

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 proj...
Paul Willen's avatar
Paul Willen
Copper Contributor
Sep 15, 2016

I've created shownotes for this excellent webcast by Vesa and Waldek.

 

 

Prerequisites: Please setup your development environment before trying to create the same demo: http://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

 

You also should have tsd installed:

In nodeJS run:

 

npm install tsd -g

 

If you want to quickly go to any part of the webcast click the link next to it..

  

https://www.youtube.com/watch?v=FS-_0KENJkI&t=0m00s

Introduction

https://www.youtube.com/watch?v=FS-_0KENJkI&t=2m14s

Theory: Using Angular in SP FX web parts

https://www.youtube.com/watch?v=FS-_0KENJkI&t=4m09s

Demo: Introduction Demo

https://www.youtube.com/watch?v=FS-_0KENJkI&t=4m45s

Demo: Start Demo by Waldek

https://www.youtube.com/watch?v=FS-_0KENJkI&t=5m35s

Demo: reactive mode VS non-reactive mode

https://www.youtube.com/watch?v=FS-_0KENJkI&t=7m20s

Demo: Description of the Angular App in Visual Studio

https://www.youtube.com/watch?v=FS-_0KENJkI&t=8m15s

Demo: Create the Angular App from scratch step-by-step

https://www.youtube.com/watch?v=FS-_0KENJkI&t=8m46s

Demo:  Use Yomen to create the SPFX project

https://www.youtube.com/watch?v=FS-_0KENJkI&t=11m15s

Demo: Check what has been created so far

https://www.youtube.com/watch?v=FS-_0KENJkI&t=12m18s

Demo: Install Angular and Angular-Office-UI-Fabric

https://www.youtube.com/watch?v=FS-_0KENJkI&t=13m45s

Demo: Install Angular Typings

https://www.youtube.com/watch?v=FS-_0KENJkI&t=14m20s

Demo: Add the Angular App to the project

https://www.youtube.com/watch?v=FS-_0KENJkI&t=18m55s

Demo: Add the Angular App to the WebPart

https://www.youtube.com/watch?v=FS-_0KENJkI&t=20m27s

Demo: Explenation of renderedOnce in the Angular App

https://www.youtube.com/watch?v=FS-_0KENJkI&t=22m25s

Demo: Change the Display property for tasks from Textfield to Toggle

https://www.youtube.com/watch?v=FS-_0KENJkI&t=24m58s

Demo: First try after setting everything up

https://www.youtube.com/watch?v=FS-_0KENJkI&t=26m25s

Demo: Fix the different Office-UI-Fabric version problem

https://www.youtube.com/watch?v=FS-_0KENJkI&t=29m19s

Demo: Create the connection between the Angular App and the WebPart Property pane

https://www.youtube.com/watch?v=FS-_0KENJkI&t=33m43s

Demo: Demo the completed Angular App in the WebPart

https://www.youtube.com/watch?v=FS-_0KENJkI&t=34m05s

Demo: Change the property pane from reactive mode to non-reactive mode

https://www.youtube.com/watch?v=FS-_0KENJkI&t=35m05s

Back to Vesa for wrap-up

 

P.s.

Somehow the techcommunity website does something weird on the formatting of the shownotes. I'll look into that.

Resources