Building Flexible SharePoint Solutions with AngularJS - SlideShare
From the Collab365 Global Conference - October 2015
In this session you will learn 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.
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: [email protected] 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
~-~~-~~~-~~-~
Please watch: "DLF cyber city gurgaon near DLF Phase 3 Rapid metro || Cyber Hub Awasome scenes Gurugram 122002"
• DLF cyber city gurgaon near DLF Phase 3 Ra...
~-~~-~~~-~~-~