Building Flexible SharePoint Solutions with AngularJS

Building Flexible SharePoint Solutions with AngularJS

• 1.
  Online Conference June 17thand 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 toAngularJS • 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? Extremelypopular 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 anAngularJS 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 AngularServices $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 17thand 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 DevelopmentOptions 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 viewmodelviewmodel SharePoint (Online or On Premises) @Bob1German
• 11.
  Online Conference June 17thand 18th 2015 WWW.COLLAB365.EVENTS demo @Bob1German
• 12.
  WWW.COLLAB365.EVENTS OfficeDev Patterns andPractices 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 CmdletReference 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 formore great sessions … @Bob1German