Download to read offline
![Routing
const routes: Routes = [
{ path: '', component: SitesComponent, children: [
{ path: '', component: SitesHomeComponent },
{ path: 'sites', children: [
{ path: 'new', component: SitesFormComponent },
{ path: ':id', component: SitesViewComponent }
]},
]}
];
import { appRoutes } from "./app/app.routes"
protected get routes(): any {
return appRoutes;
}](https://cdn.statically.io/img/image.slidesharecdn.com/sharepointframeworkangularandazurefunctions-180318202938/75/SharePoint-Saturday-Lisbon-2017-SharePoint-Framework-Angular-Azure-Functions-12-2048.jpg)
![Global Configurations
import { ConfigurationService } from
"./app/services/ConfigurationService";
ConfigurationService
{ provide: APP_INITIALIZER, useFactory: (configurationService:
ConfigurationService) => () => configurationService.load({
functionUrl: this.properties.functionUrl,
functionKey: this.properties.functionKey,
description: this.properties.description,
styles: styles
}), deps: [ConfigurationService], multi: true }](https://cdn.statically.io/img/image.slidesharecdn.com/sharepointframeworkangularandazurefunctions-180318202938/75/SharePoint-Saturday-Lisbon-2017-SharePoint-Framework-Angular-Azure-Functions-13-2048.jpg)
![Mocking Data
if (Environment.type === EnvironmentType.Local) {
return [
{ provide: SitesService, useClass: MockSitesService },
];
} else if (Environment.type == EnvironmentType.SharePoint ||
Environment.type == EnvironmentType.ClassicSharePoint) {
return [
{ provide: SitesService, useClass: SitesService },
];
}](https://cdn.statically.io/img/image.slidesharecdn.com/sharepointframeworkangularandazurefunctions-180318202938/75/SharePoint-Saturday-Lisbon-2017-SharePoint-Framework-Angular-Azure-Functions-14-2048.jpg)
Uploaded bySébastien Levert
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Functions
The document discusses using Angular within SharePoint Framework (SPFx) web parts and integrating Azure Functions for backend API provisioning. It highlights the compatibility of Angular versions and provides insights into routing, data mocking, and utilizing Office UI Fabric components. Additionally, it suggests caution when using this approach in production, recommending experimentation and learning due to potential maintenance challenges with SPFx updates.
SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Functions
- 1. SharePoint Framework, Angularand Azure Functions by Sébastien Levert
- 2.
- 3. Hi! I’m Seb! @sebastienlevert| http://sebastienlevert.com | Product Evangelist & Partner Manager at
- 4.
- 6.
- 7. Angular… But whichversion ? • Works well with Angular 1.6 • Works OK with Angular 2 • Works awesome with Angular 4 (Did you just say Angular 4!?) • Works even better with Angular 5 (NgElement to the rescue!)
- 8. Is that evenpossible ? • Some are thinking it is mission impossible… But it is! And it’s much more simpler than you think. • You have the full power of Angular within you own SPFx webparts • Multiple webparts can exist in a page, including their own routing configuration
- 9.
- 11. Embedding an Element publicrender(): void { this.domElement.innerHTML = ` <hello-world name="${this.properties.name}"> </hello-world>`; }
- 12. Routing const routes: Routes= [ { path: '', component: SitesComponent, children: [ { path: '', component: SitesHomeComponent }, { path: 'sites', children: [ { path: 'new', component: SitesFormComponent }, { path: ':id', component: SitesViewComponent } ]}, ]} ]; import { appRoutes } from "./app/app.routes" protected get routes(): any { return appRoutes; }
- 13. Global Configurations import {ConfigurationService } from "./app/services/ConfigurationService"; ConfigurationService { provide: APP_INITIALIZER, useFactory: (configurationService: ConfigurationService) => () => configurationService.load({ functionUrl: this.properties.functionUrl, functionKey: this.properties.functionKey, description: this.properties.description, styles: styles }), deps: [ConfigurationService], multi: true }
- 14. Mocking Data if (Environment.type=== EnvironmentType.Local) { return [ { provide: SitesService, useClass: MockSitesService }, ]; } else if (Environment.type == EnvironmentType.SharePoint || Environment.type == EnvironmentType.ClassicSharePoint) { return [ { provide: SitesService, useClass: SitesService }, ]; }
- 15. Mocking Data export classMockSitesService implements ISitesService { public createSite(siteInformation: ISiteCreationInformation): Observable<ISiteCreationResponse> { return Observable.of<ISiteCreationResponse>({ description: `${siteInformation.description} (Mocked)`, email: `${siteInformation.url}@mocked.onmicrosoft.com`, id: "00000000-0000-0000-0000-000000000000", title: `${siteInformation.title} (Mocked)`, url: `#${siteInformation.url}` }).delay(2000); } }
- 16.
- 17. Why Azure Functions? • Cheap way to host any API in Azure • You can use your favorite language • Super cheap to run • Perfect companion for any Single Page Application or any JavaScript component
- 18. Our scenario • Usingthe PnP PowerShell Cmdlets • Connecting to the Microsoft Graph and to an Azure AD Application • Creating a ModernTeam Site (in under 15 seconds) based on a set of parameters • Boom!
- 19.
- 20. The full scenario •Build a SharePoint Framework WebPart • Use Angular as our main Framework • Include 3 routes (Home, New Site and Site Information) • Use Azure Function as my backend provisioning API • Use the Office UI Fabric components
- 21. What about theOffice UI Fabric ? • Well…You have 2 choices : Build or Reuse • My choice ? Reuse ! • But Seb… It’s Angular, I can’t reuse what does not exist… • Well…The React components exist, just reuse them !
- 22. Downsides • Can’t usethe CLI to build new components and slow to compile • Can’t use AOT to reduce the bundle size • Lots of “hacks” in code that make this approach… • Clearly not SPCAF compliant!
- 23. Lessons learned • Neveruse any class or ids from the DOM. Always use theViewChild attribute. • You can use html templates using the require() approach.Try to do that, React! • When you have a strong AngularJS background, it feels just a little bit weird to move to Angular, but you will get used to it!
- 24. And… Should Iuse it in production? • As of today, this approach is the only approach that works. • Use it to experiment, to learn the SharePoint Framework and Angular altogether. • Will require a lot of maintenance with new versions of SPFx… In short, I would not go all in right now… But…
- 25.
- 26.
- 27. Resources • https://github.com/SharePoint/sp-dev-fx- webparts/tree/master/samples/angular2-prototype • https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework- overview •http://dev.office.com/fabric#/components • https://www.youtube.com/watch?v=Vkzr2TxHFLg&t=6s
- 28.
- 29. Sharing is caring •Use hashtags to share your experience • #Office365Dev • #MicrosoftGraph • #AzureFunctions • #SPFx • Log issues & questions to the GitHub Repositories
- 30.
- 31. Thank you! @sebastienlevert |http://sebastienlevert.com | Product Evangelist & Partner Manager at