Download to read offline
![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)
Uploaded byJoseph Jorden
Making share point rock with angular and react
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.
More Related Content
Similar to Making share point rock with angular and react
Making share point rock with angular and react
- 1. Making SharePoint Rock WithAngular and React JOE JORDEN SENIOR CONSULTANT, NEUDESIC @COBALTCODER WWW.COBALTCODER.COM WWW.NEUDESIC.COM
- 2. Why Are WeHere? 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 MasterPage 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 - Createa 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 UpdatesUI 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 UseReact.MSBuild Install-Package React.MSBuild –Pre Automatically creates xxx.generated.js file
- 10. Demo - Createa Site With React Client list in SharePoint – React style
- 11. Code to Addand 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 andAngular 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 – UsingngReact Client list in SharePoint – ngReact style
- 14. Summary Angular isawesome, 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