sp-dev-fx-webparts/samples/angular2-prototype

page_type	products	languages	extensions
sample	office-sp	javascript typescript	contentType technologies platforms createdDate samples SharePoint Framework AngularJS 8/14/2017 12:00:00 AM

Angular2 Web Part Prototype

Note to developers

This web part sample is currently in prototype phase and subject to change. This sample is not currently supported for use in production environments as unexpected behavior may occur. It is provided as guidance for building Angular2 web parts in the SharePoint Framework environment. This sample is a work in progress and it will be updated as advances in stability are made.

Summary

Sample To Do Web Part built with Angular2. This sample illustrates how you can use Angular2 with the SharePoint Framework.

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

Applies to

• SharePoint Framework Developer Preview
• Office 365 developer tenant

Prerequisites

Some familiarity of Angular2 architecture.

Contributors

• Manish Garg
• Daniel Gaeta

Version history

Version	Date	Comments
0.3	January 20, 2017	Updates to support RC0
0.2	October 7, 2016	Resolved workarounds to access NgModule and NgZone
0.1	August 14, 2016	Initial release

Minimal Path to Awesome

• Clone this repository
• In the command line run:
  • npm i
  • npm i -g gulp
  • gulp serve
• Open the workbench
• Test out the web part

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Features

This is a sample client-side web part built on the SharePoint Framework using Angular2 for building the UI component of the web part. The SharePoint Framework is designed to allow developers to build web parts using the web framework of their choice. In this prototype we make use of the Angular2 framework. The BaseAngular2WebPart class tries to abstract some of the Angular2 integration. This way the developer can focus on their web part code and not worry about Angular2 integration.

Protoype anomalies

Please note, this is an early prototype and we are still trying to learn the best practices of the Angular2 framework. Angular2 uses TypeScript decorators to annotate classes as Components and Modules. And also recommends that there be only one NgModule per application. In this prototype we try to use the decorators dynamically in code. And each web part instantiates a new NgModule at run time. Though this is not a best practice, it helps build web parts successfully. We are trying to find better solutions to this problem. Specially, how to avoid creating a separate NgModule for each web part.

Adding functionality

To add functionality to this web part prototype the main file to edit is TodoWebPart.ts, here there are comments to help you alter the prototype.

Web part concepts

The web part displays a title, button to add to dos and a button to print the to do items to the console. This web part illustrates the following concepts on top of the SharePoint Framework:

• Changing a property (the title) of a web part using the PropertyPane
• Manipulating properties in the Angular2 component class and saving to web part’s property bag

Help

We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.