Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with...
-
Upload
corey-patrick -
Category
Documents
-
view
214 -
download
0
Transcript of Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with...
![Page 1: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/1.jpg)
Bob GermanPrincipal Architect
A New on SharePoint DevelopmentBuilding Light-WeightWeb Parts with AngularJS
Slant
@Bob1German
![Page 2: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/2.jpg)
SPS Boston 2015 is made possible by our Sponsors
![Page 3: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/3.jpg)
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
![Page 4: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/4.jpg)
We Are Hiringin Boston!
Junior SharePoint Developer/Administrator
Learn more:https://www.linkedin.com/company/bluemetal-architects/careers
![Page 5: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/5.jpg)
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
![Page 6: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/6.jpg)
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
![Page 7: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/7.jpg)
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
![Page 8: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/8.jpg)
Commonly Used Angular Services
$http HTTPcalls
$scope Access toview scope
$locationBrowser location
$log Logging service
$q Promises
$interval$timeou
t
Timerservices
Custom
![Page 9: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/9.jpg)
demo
Hello Angular• Modules• Controllers• Binding
Weather• Services• Web Services• HTML Templates
Weather App• SP App
Packaging• Client Web Part
s @Bob1German
![Page 10: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/10.jpg)
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
![Page 11: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/11.jpg)
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
![Page 12: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/12.jpg)
Microsurvey App
main.html
mainController.js
surveyService.js
spDataService.js
settingsController.js
settings.html
initUI.js
Default.aspx
VIEWS
CONTROLLERS
SERVICES
@Bob1German
![Page 13: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/13.jpg)
demo
SharePoint Hosted App
Drag and Drop Deployment
Centrally Managed
s @Bob1German
![Page 14: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/14.jpg)
Default.aspx
![Page 15: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/15.jpg)
main.html
![Page 16: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/16.jpg)
ensureList (part 1)
![Page 17: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/17.jpg)
ensureList (part 2)
![Page 18: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/18.jpg)
ensureContent()
![Page 19: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/19.jpg)
Install-MicroSurvey.ps1 (part 1)
![Page 20: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/20.jpg)
Install-MicroSurvey.ps1 (part 2)
![Page 21: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/21.jpg)
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/
![Page 22: Bob German Principal Architect A New on SharePoint Development Building Light-Weight Web Parts with AngularJS Slant @Bob1German.](https://reader033.fdocuments.net/reader033/viewer/2022051620/56649e565503460f94b4e718/html5/thumbnails/22.jpg)
THANK YOU!