Transcript SP Development with AngularJS

A New Slant on SharePoint
Development
Building Light-Weight
Web Parts with AngularJS
Bob German
Principal Architect
@Bob1German
SPS Boston 2015 is made possible
by our Sponsors
@Bob1German
http://blogs.msdn.com/BobGerman/
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
We Are Hiring
in Boston!
• Junior SharePoint
Developer/Administrator
Learn more:
https://www.linkedin.com/company/bluemetalarchitects/careers
Agenda
• A Brief Introduction to Angular
• Learning through Demos:
1.
2.
3.
4.
5.
Hello Angular
Weather Widget
Weather App
Microsurvey App
Microsurvey Web Part with Remote
Provisioning
6. 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
• Adds new HTML elements and attributes for
building dynamic applications
• Dependency Injection and Unit Testing
• HTML Templates with 2-way data binding
• Routing and Navigation
• MVC pattern separates code from DOM
manipulation – improves testability
• Flexible data presentation using Filters
Simple AngularJS Application
View
(HTML with Bindings)
SCOPE
Controller
Directives
new elements and
attributes
manipulate scope to control the UI
Routes
Services
Web Page
Module
@Bob1German
Web
Services
navigation within
single-page app
Commonly Used Angular Services
$http
Access to
view scope
$scope
$location
Custom
HTTP
calls
Promises
Browser
location
$log
Logging
service
$interval
$timeout
Timer
services
$q
Hello Angular
• Modules
• Controllers
• Binding
demos
Weather
Weather App
• Services
• Web Services
• HTML Templates
• SP App Packaging
• Client Web Part
@Bob1German
How Many App Models?
Why have one App Model when
you can have several?
• SharePoint Hosted Apps
Important to
• Provider Hosted Apps
Everyone
• Office 365 Apps
• Remote
Important for
How Provisioning
many SharePoint
a Public Store
App Models can you list?
What do they provide?
• Isolation from SharePoint
Internals
• Isolation from SharePoint
Content and other Apps
(untrusted code)
• Packaging and Provisioning
Store Model does not necessarily
address enterprise needs
@Bob1German
Remote Provisioning: The “Other” App Model
App Models
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
Remote Provisioning
Microsurvey App
Default.aspx
VIEWS
CONTROLLERS
main.html
settings.html
mainController.js
settingsController.js
surveyService.js
SERVICES
spDataService.js
@Bob1German
initUI.js
SharePoint
Hosted App
demos
Drag and
Drop
Deployment
Centrally
Managed
@Bob1German
Default.aspx
main.html
ensureList (part 1)
ensureList (part 2)
ensureContent()
Install-MicroSurvey.ps1 (part 1)
Install-MicroSurvey.ps1 (part 2)
Resources
What
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
@Bob1German
http://Bob1German.com/
THANK YOU!