Making share point rock with angular and react
Download as pptx, pdf0 likes216 views
This document discusses how to make SharePoint more powerful using Angular and React. It provides overviews of Angular, React, and ngReact for linking the two frameworks. The document demonstrates creating client lists in SharePoint using Angular, React, and a combination with ngReact. It also discusses using a custom master page to control look and feel when incorporating these frameworks into SharePoint.
![Linking React and Angular With ngReact
ngReact allows us to use React components in Angular sites
Add react angular module dependency
angular.module('app', ['react']);
react-component: an Angular directive that delegates off to a React Component*
reactDirective: a service for converting React components into the react-component
Angular directive*
* https://github.com/ngReact/ngReact](https://image.slidesharecdn.com/makingsharepointrockwithangularandreact-161008184913/85/Making-share-point-rock-with-angular-and-react-12-320.jpg)
Making share point rock with angular and react
- 1. Making SharePoint Rock With Angular and React JOE JORDEN SENIOR CONSULTANT, NEUDESIC @COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM
- 2. Why Are We Here? Learn to use a custom master page Learn to incorporate Angular pages into SharePoint Learn to incorporate React pages in SharePoint Learn to link Angular and React using ngReact
- 3. Crafting a Master Page Create a custom master page to Control look and feel (and possibly smell) Add libraries Instantiate framework Can do last two without a custom master
- 4. Using Material Design Use Material Design to make things pretty https://material.angularjs.org/latest/
- 5. Angular 1.5 Overview Directives Use to manipulate the DOM Controllers Use to set up or enhance the scope object Services Use to share data between controllers These are singletons Uses watchers for two-way binding
- 6. Demo - Create a Site With Angular 1.5 Client list in SharePoint – Angular 1.5 style Add modules to project Set GhostableInLibrary to true in elements file
- 7. React/FLUX Overview Updates UI using virtual DOM diffing No two-way binding Uses one-way binding, more like circular binding (FLUX)
- 8. React/FLUX Overview View => Dispatcher => Store
- 9. React/FLUX Overview Use React.MSBuild Install-Package React.MSBuild –Pre Automatically creates xxx.generated.js file
- 10. Demo - Create a Site With React Client list in SharePoint – React style
- 11. Code to Add and Get Items SharePoint REST code can be tricky Need to get Request Digest Item type eTag (for updating) Angular Use injector React Hope for the best
- 12. Linking React and Angular With ngReact ngReact allows us to use React components in Angular sites Add react angular module dependency angular.module('app', ['react']); react-component: an Angular directive that delegates off to a React Component* reactDirective: a service for converting React components into the react-component Angular directive* * https://github.com/ngReact/ngReact
- 13. Demo – Using ngReact Client list in SharePoint – ngReact style
- 14. Summary Angular is awesome, except with large lists React is awesome, but a bit verbose ngReact is perfect for linking the two together for double-awesomeness A custom master will give you the precise design you are after
- 15. References Code: https://github.com/CobaltCoder/CodeCamp2016 SlideShare: http://www.slideshare.net/CobaltCoder/making-share-point-rock-with-angular-and-react Blog: http://www.cobaltcoder.com