Building Flexible SharePoint Solutions with AngularJS
- 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Building Flexible SharePoint Solutions with AngularJS @Bob1German
- 2. WWW.COLLAB365.EVENTS Bob German BlueMetal Email: collab@bobg.tv Twitter: @Bob1German Blog: http://bob1german.com/ LinkedIn: http://bit.ly/Bob1German Bob German is Principal Architect at BlueMetal, where he leads Office 365 and SharePoint development for enterprise customers. Bob German @Bob1German Cloud & Services Content & Collaboration Data & Analytics Devices & Mobility Strategy & Design
- 3. WWW.COLLAB365.EVENTS Agenda • Introduction to AngularJS • Remote Provisioning vs. SharePoint Add-in Model • Solution that works: – As a SharePoint add-in – As a drag-and-drop solution – As a centrally managed solution @Bob1German Session assumes you know: • JavaScript • SharePoint basics (lists, forms, web parts) Session does not assume you know: • AngularJS You will learn: • How to build web parts, forms, and pages with AngularJS • About the new Remote Provisioning pattern as an alternative to the Add-in model It all works in Office 365 or on premises!
- 4. WWW.COLLAB365.EVENTS What is AngularJS? Extremely popular Javascript framework • Build complex apps that run on a web page • Maintained by Google – a good bet for sustained support • HTML Templates with 2-way data binding • MVC pattern separates code from DOM manipulation – improves testability • Adds new HTML elements and attributes for building dynamic applications • Dependency Injection and Unit Testing • Routing and Navigation • Flexible data presentation using Filters Interest in JavaScript Frameworks Source: Google trends
- 5. WWW.COLLAB365.EVENTS What’s in an AngularJS Application? View (HTML with Bindings) Controller manipulate scope to control the UI Services Web Services $scope or ViewModel Module Directives new elements and attributes Routes navigation within single-page app Web Page @Bob1German
- 6. WWW.COLLAB365.EVENTS Commonly Used Angular Services $http HTTP calls $scope Access to view scope $location Browser location $log Logging service $qPromises $interval $timeout Timer services Custom @Bob1German
- 7. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS demo @Bob1German
- 8. WWW.COLLAB365.EVENTS Remote Provisioning: The “Other” App Model It’s simple: Content is created directly in a SharePoint site using any remote API (CSOM, JSOM, SOAP, REST) Examples: • .NET Code in PowerShell or a console application • Javascript in a SharePoint Hosted App or Content Editor Web Part • .NET Code in a Provider Hosted App • The Mechanical Turk approach (A person manually creates content using a web browser) @Bob1German
- 9. WWW.COLLAB365.EVENTS Modern SharePoint Development Options Add-in Models Remote Provisioning Provisioning across many sites Complete access to site (e.g. Branding) Direct access to page (e.g. Connected Web Parts) End-user additions / modifications Protection from Untrusted Code Storefront Distribution Centralized Distribution Strength Weakness@Bob1German
- 10. WWW.COLLAB365.EVENTS MicroSurvey Sample Application main.html mainController.js surveyService.js spDataService.js settingsController.js settings.html initUI.js Default.aspx VIEWS CONTROLLERS SERVICES @Bob1German viewmodel viewmodel SharePoint (Online or On Premises) @Bob1German
- 11. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS demo @Bob1German
- 12. WWW.COLLAB365.EVENTS OfficeDev Patterns and Practices OfficeDev PnP Core Library (C#) CSOM “15” CSOM “16” PowerShell Commands CDN Manager Provisionin g Samples https://github.com/OfficeDev/PnP Your Code SharePoint 2013 SharePoint Online
- 13. WWW.COLLAB365.EVENTS Links Resources @Bob1German PnP PowerShell Cmdlet Reference http://bit.ly/1KVgrqq AngularJS Tutorial http://bit.ly/18AjTWI Angular JS Training on PluralSight - (one of many!) http://bit.ly/1BY6QL0 How to complete basic operations using SP2013 REST API’s http://bit.ly/1MyirkK Multiple AngularJS Web Parts on a Page - “The Well-Tempered AngularJS Web Part” http://bit.ly/1T80iQO New Guidance from Microsoft for Packaging and Deploying SharePoint Solutions http://bit.ly/1F54S7L Code samples • Hello Angular: http://bit.ly/Plunk1 • Angular Weather: http://bit.ly/Plunk2 • MicroSurvey: http://bit.ly/uSurvey
- 14. WWW.COLLAB365.EVENTS Stay tuned for more great sessions … @Bob1German
Editor's Notes
- #2: How to develop web parts and custom list forms that are flexible and maintainable with or without the complexity of the SharePoint add-in model You will learn : In this session, you will learn how to get started with AngularJS development for SharePoint online In this session, you will learn how to develop SharePoint solutions that can be deployed as SharePoint hosted apps, centrally deployed and updated, or simply dragged and dropped into SharePoint sites. In this session, you will learn how to decide on the best deployment model for common tasks such as web parts, lists, and list forms. In this session, you will learn how AngularJS simplifies Javacript development for SharePoint online. Features Covered: SharePoint Online API's Remote provisioning Web part framework Suitable For : Developer Track : SharePoint