Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with...
-
Upload
corey-patrick -
Category
Documents
-
view
213 -
download
0
Transcript of Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with...
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!