The document describes a SharePoint hosted add-in that uses AngularJS and Bootstrap to create a rotating banner app. The app allows adding and managing photos, headlines and links. It uses AngularJS for two-way data binding, controllers and routing. Bootstrap is used for layout and styling. The add-in retrieves photos from a SharePoint library using JSOM and displays them with Angular bindings. The document provides an overview of the app requirements, architecture, AngularJS and Bootstrap usage, and code snippets from the Angular controllers.

1. Roy Kim
@roykimtoronto
roykimtoronto@gmail.com
July 2015
SharePoint Hosted Add-in with
AngularJS and Bootstrap

2. A
g
e
n
d
a
 CoverPhotos App Requirements
 SharePoint Add-in design
 AngularJS and Bootstrap Design
 Commentary

3. Requirements
• Create, manage and display a photo rotating
banner with headlines and page links.
• As a content author, add an app part, add to any
web part page so that page visitors have a visual
headline of announcements or navigation links
• As a content manager, add/remove photos, text,
link and configurations settings.

4. Demo

5. SharePoint Add-in Hosting Options
SharePoint-hosted
• No C# server-side code-behind.
• Instances of app's client side files are
stored in an "hidden" sub site
• Own domain
• Design decision: Cover photos app is
simple UI display with no UI processing
and business logic that require high
CPU and memory usage.

6. SharePoint Design
Cover Photos App Web
CoverPhotos Library
Setting List
Content Types
Photo
Setting
Boostrap.css
App.css
Content
adminApp.js
Scripts
Default.aspx
settings.aspx
adminPhoto.aspx
Pages
setting
Photo 1
Photo 2
Photo N
Host Web
Cover Photos App Part
App Manifest

7. Visual Studio
Project

8. AngularJS
• AngularJS is a structural framework for dynamic single page
applications.
• Features:
• 2-way data binding: automatic sync between view (DOM) and
model (JS objects)
• Controller: the behavior and model behind the DOM
• Routing: navigating between views
• Dependency Injection: loosely coupled services that allows for
unit testing and apply separation of concerns principle.
• Built-in services: remote http communication, url management,
logging, localization, formatting data displayed, "jQuery", caching,
animation, form validation

9. AngularJS Alternatives
• KnockoutJS
Create rich, responsive display and editor user interfaces with a clean
underlying data model. Any time you have sections of UI that update
dynamically, KO can help you implement it more simply and maintainably.
• EmberJS
Build ambitiously large web applications that are competitive with native apps.
• BackboneJS
Give your JS App some Backbone with Models, Views, Collections, and
Events.

10. AngularJS vs Alternatives Interest
AngularJS has trending upward search interest than other frameworks

11. Bootstrap Front End Framework
Bootstrap is a front-end framework containing HTML/CSS/JS UI templates for
typography, forms, buttons, navigation, responsive design, tables, images,
progress bar, tool tips, drop downs.
www.getbootstrap.com

12. Visual Studio SharePoint
App Web
NuGet Packages

13. AngularJS
http://devgirl.org/2013/03/21/fun-with-angularjs/

14. AngularJS
https://docs.angularjs.org/tutorial/step_02

15. View (DOM)
adminApp.js
coverPhotoModel.
js
Default.aspx
setting.aspx
adminPhoto.aspx
Admin Controller
AdminPhoto
Controller
Setting Controller
R
o
u
t
i
n
g
SharePoint
Server API
$Scope
$Scope
$Scope
CoverPhoto
Service
Angular Design
JSOM

16. App Default.aspx
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div ng-app="photoApp" ng-controller="AdminController" class="container">
<h2>Preview</h2>
<div id="slides">
<div class="slides_container">
{{Slides.userMessage}}
</div>
<a class="prev"><</a>
<a href="#" class="next">></a>
</div>
<br />
<a id='settingsNavLink' href="#/settings">Settings</a> |
<a id='adminphotosNavLink' href="#/adminphotos">Admin Photos</a>
<div class="view-animate-container">
<div ng-view class="view-animate"></div>
</div>
</div>
<!-- angular scripts -->
<script type="text/javascript" src="../Scripts/adminApp.js"></script>
</asp:Content>
SharePoint ASP
content control
Angular
root
element
Controller
expression and scope property
routing
routing

17. .controller('SettingsController', ['$routeParams', '$scope', function ($routeParams, $scope) {
$scope.settingsData = {};
var admin = {
save: function save() {.
$.when(_CPApp.UpdateSettings($scope.settingsData)).done(function () {
_CPApp.getCoverPhotosListDataFromAppPage();
}).fail(function (status) {
$.extend($scope.settingsData, _CPApp.Settings());
$scope.$apply();
});
}
}
$scope.save = admin.save;
$scope.Slides = { userMessage: '0' };
coverPhotosVM = new coverPhotosViewModel();
coverPhotosVM.listName = "CoverPhotos";
var options = { … };
var _CPApp = new CoverPhotosApp(options);
$.when(_CPApp.GetSettings()).done(function (status) {
_CPApp.getCoverPhotosListDataFromAppPage();
$.extend($scope.settingsData, _CPApp.Settings());
$scope.Slides = _CPApp.Slides();
$scope.$apply();
});
}])
Settings Controller
Controller
Scope property and behavior definition
Scope initialization / property data population

18. CoverPhotos
var camlQuery = new SP.CamlQuery();
photoListItems = photoList.getItems(camlQuery);
clientContext.load(photoListItems);
clientContext.executeQueryAsync(Function.createDelegate(self, self.onGetPhotosList),
Function.createDelegate(self, self.onListDataFailed));
self.onGetPhotosList = function (sender, args) {
var photoVM = {};
var listItemEnumerator = photoListItems.getEnumerator();
if (photoListItems.get_count() == 0) {
self.Slides.userMessage = "No photos available. Please upload photos.";
return;
}
else {
self.Slides.userMessage = ""; }
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
photoVM = new photoModel();
photoVM.id = oListItem.get_id();
photoVM.name = oListItem.get_item('Title');
photoVM.fileRef = oListItem.get_item('FileRef');
Callback
Get Photos from library
Return self.Slides to
$scope

19. JSOM vs REST API
Comparison
JavaScript Object Model Intellisense assistance
Easier to create and update data
“Object-oriented”
Batch requests
REST API Easier to troubleshoot and debug with
browser and fiddler
Batch requests only in Office 365
Preference for JSOM for Cover Photos App

20. Final Thoughts
• AngularJS is a powerful framework with lots of features; but can a bit overkill
for small apps such as this Cover Photos App
• However, I would still learn and apply AngularJS for future projects as it is the
most popular SPA framework and will get easier to implement with more
experience.
• AngularJS indeed has a steep learning curve.
• Bootstrap is the most popular front end framework and is the current standard.
• AngularJS and Bootstrap are easy to leverage in SharePoint Add-ins and can
be leveraged similarly with even farm solutions in application pages and web
parts.

21. Questions?
Feel free to contact!
• @roykimtoronto
• roykimtoronto@gmail.com
• www.roykim.ca