SharePoint Framework for Developers: 5 SPFx and Angular
1h 23mIntermediate2018-12-13
Authors
Sahil Malik
Trainer, Microsoft and iOS Consultant, and Founder of Winsmarts.com
Course details
Angular is a hugely popular framework for client-side development. SharePoint Framework (SPFx) is the development methodology for Office 365 and SharePoint on premises. In this installment of the SharePoint Framework for Developers series, learn how to use Angular with SPFx by leveraging Angular elements. After providing some background information on SPFx and how it uses third-party libraries and frameworks, instructor Sahil Malik explains why out-of-the-box Angular doesn't work well with SPFx and dives into the pros and cons of different architectural approaches. He then moves on to discuss Angular elements, which are Angular components packaged as custom elements. Discover how to convert Angular components to Angular elements, as well as how to use Angular elements in SPFx.
Learning objectives
Why out-of-the-box Angular doesn't work well with SPFx
Architectural approaches
Creating and running an Angular CLI project
Converting Angular components to Angular elements
Building and running Angular elements
Creating a new SPFx project
Using Angular elements in SPFx
Learning objectives
Why out-of-the-box Angular doesn't work well with SPFx
Architectural approaches
Creating and running an Angular CLI project
Converting Angular components to Angular elements
Building and running Angular elements
Creating a new SPFx project
Using Angular elements in SPFx
Skills covered
SharePointEnterprise Content Management.NETOffice 365Network and System AdministrationMicrosoftDeep Dive (X:Y)
Concepts
Introduction
- How to use Angular with the SharePoint Framework (SPFx)
- What you should know
Background of SPFx and Angular
- An introduction to SPFx
- Background of Angular
- Angular CLI
- Demo - Angular CLI
- A quick walkthrough of an Angular project
- An architecture mismatch
Architectural Approaches
- Architectural approaches
- A single project without Angular CLI
- A single project with Angular CLI
- Two projects - SPFx and Angular CLI
Angular Elements
- An introduction to Angular elements
- Create an Angular CLI project
- Run the Angular CLI project
- Convert an Angular component to an Angular element
- Create a test harness
- Build and run Angular elements
SPFx Angular Project
- Create a new SPFx project
- Create a workspace
- Code changes - Use Angular elements in SPFx
- Demo - Use Angular elements in SPFx
Conclusion
- Next steps