Bob GermanPrincipal Architect

A New on SharePoint DevelopmentBuilding Light-WeightWeb Parts with AngularJS

Slant

@Bob1German

SPS Boston 2015 is made possible by our Sponsors

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 Silverlightfor 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

@Bob1Germanhttp://blogs.msdn.com/BobGerman/

@Bob1German

We Are Hiringin Boston!

Junior SharePoint Developer/Administrator

Learn more:https://www.linkedin.com/company/bluemetal-architects/careers

Agenda

•A Brief Introduction to Angular•Learning through Demos:

1. Hello Angular2. Weather Widget3. Weather App4. Microsurvey App5. Microsurvey Web Part with Remote

Provisioning6. Microsurvey Web Part with Central

Management

@Bob1German

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

Simple AngularJS Application

View(HTML with Bindings)

Controllermanipulate scope to control the UI

Services

WebServices

SCOPE

Module

Directivesnew elements and

attributes

Routesnavigation within single-page app

Web Page

@Bob1German

Commonly Used Angular Services

$http HTTPcalls

$scope Access toview scope

$locationBrowser location

$log Logging service

$q Promises

$interval$timeou

t

Timerservices

Custom

demo

Hello Angular• Modules• Controllers• Binding

Weather• Services• Web Services• HTML Templates

Weather App• SP App

Packaging• Client Web Part

s @Bob1German

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 SharePointApp Models can you list?

@Bob1German

Remote Provisioning: The “Other” App ModelApp Models Remote Provisioning

Provisioning across many sitesComplete access to site (e.g. Branding)Direct access to page (e.g. Connected Web Parts)End-user additions / modificationsProtection from Untrusted CodeStorefront DistributionCentralized Distribution

@Bob1German

Microsurvey App

main.html

mainController.js

surveyService.js

spDataService.js

settingsController.js

settings.html

initUI.js

Default.aspx

VIEWS

CONTROLLERS

SERVICES

@Bob1German

demo

SharePoint Hosted App

Drag and Drop Deployment

Centrally Managed

s @Bob1German

Default.aspx

main.html

ensureList (part 1)

ensureList (part 2)

ensureContent()

Install-MicroSurvey.ps1 (part 1)

Install-MicroSurvey.ps1 (part 2)

ResourcesWhat Where

AngularJS Tutorial http://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 Plunker http://bit.ly/1Es6xaf

@Bob1Germanhttp://Bob1German.com/

THANK YOU!