1. Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German

2. SPS Boston 2015 is made possible by our Sponsors

3. Bob German  SharePoint Principal Architect at BlueMetal Architects  Developer and architect on the SharePoint platform since Site Server 3.0  Co-author of SharePoint 2010 Development with Silverlight for Addison-Wesley BlueMetal Architects  Boston, New York and Chicago.  We strive to build solutions that exactly meet our clients’ needs  SharePoint / Information Management  Data Platforms / Analytics ● Design  Mobile Apps ● Enterprise Apps ● App Modernization @Bob1German http://blogs.msdn.com/BobGerman/ @Bob1German

4. We Are Hiring in Boston! Junior SharePoint Developer/Administrator Learn more: https://www.linkedin.com/company/bluemetal- architects/careers

5. Agenda A Brief Introduction to Angular Learning through Demos: 1.Hello Angular 2.Weather Widget 3.Weather App 4.Microsurvey App 5.Microsurvey Web Part with Remote Provisioning 6.Microsurvey Web Part with Central Management @Bob1German

6. 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

7. Simple AngularJS Application View (HTML with Bindings) Controller manipulate scope to control the UI Services Web Services SCOPE Module Directives new elements and attributes Routes navigation within single-page app Web Page @Bob1German

8. Commonly Used Angular Services $http HTTP calls $scope Access to view scope $location Browser location $log Logging service $q Promises $interval $timeout Timer services Custom

9. demo Hello Angular Modules Controllers Binding Weather Services Web Services HTML Templates Weather App SP App Packaging Client Web Part s @Bob1German

10. How Many App Models? Why have one App Model when you can have several? SharePoint Hosted Apps Provider Hosted Apps Office 365 Apps Remote Provisioning What do they provide? Isolation from SharePoint Internals Isolation from SharePoint Content and other Apps (untrusted code) Packaging and Provisioning Important to Everyone Important for a Public Store Store Model does not necessarily address enterprise needs How many SharePoint App Models can you list? @Bob1German

11. Remote Provisioning: The “Other” App Model App ModelsRemote 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 @Bob1German

12. Microsurvey App main.html mainController.js surveyService.js spDataService.js settingsController.js settings.html initUI.js Default.aspx VIEWS CONTROLLERS SERVICES @Bob1German

13. demo SharePoint Hosted App Drag and Drop Deployment Centrally Managed s @Bob1German

14. Default.aspx

15. main.html

16. ensureList (part 1)

17. ensureList (part 2)

18. ensureContent()

19. Install-MicroSurvey.ps1 (part 1)

20. Install-MicroSurvey.ps1 (part 2)

21. Resources WhatWhere AngularJS Tutorialhttp://bit.ly/18AjTWI How to complete basic operations using SP2013 REST API’s http://bit.ly/1MyirkK PluralSight Training (one of many!)http://bit.ly/1BY6QL0 Practical Guide to AngularJS Directives http://bit.ly/1jzD5SW Weather Widget in Plunkerhttp://bit.ly/1Es6xaf @Bob1German http://Bob1German.com/

22. THANK YOU!