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 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 Mastykarz, Vesa 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.

 

1 Reply

  • 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