1.
SINGLE PAGE
APPLICATIONS
IN SHAREPOINT WITH
ANGULAREric Trivette

2.
About Me
Senior Developer Consultant at Sparkhound
Email: eric.trivette@Sparkhound.com
Sparkhound Blog:
http://www.sparkhound.com/pages/blogs.aspx
2

3.
What We Will Cover
What is Angular and Why use it in SharePoint?
A Brief Overview of the MVC Design Pattern
Key Angular Terminology
Getting Started With a Basic Angular Application
Demo – To-Do List Application
3

4.
What is Angular?
A Single Page Application (SPA) framework created by
Google to help simplify the process of creating client side
applications.
Utilizes the Model View Controller design pattern by
splitting pages into the following:
Models
Views
Controllers
Utilizes modules and dependency injection to promote
clean coding practices.
4

5.
Why Use Angular in SharePoint?
Makes client side application development
extremely easy
Very easy to deploy.
The REST service is already there, just push
Javascript and HTML files to necessary
document libraries.
No custom solutions that need to be package
and deployed by an administrator.
5

6.
Why Use Angular in SharePoint? (cont.)
The fluid nature of applications written in
Angular blends well with SharePoint’s
architecture.
High performance – offload processing to client
and minimize amount of data sent over the wire.
6

7.
Model-View-Controller
7
Application Module
Configuration
Route:
“/view/1”
Route:
“/edit/1”
Route:
“/list”
$scope
Services
Controller
View
Web Page
View
Container

8.
Key Angular Terminology
Directives
Extend the DOM, apply data bindings.
ng-app, ng-controller, ng-view, ng-model, ng-repeat, etc.
Modules
Containers for all Angular functionality. (i.e. Namespaces)
$scope
Your model. Uses to pass data from controller to view.
8

9.
Key Angular Terminology (cont.)
Services
Angular provides built in services for common tasks:
$http, $q, $route, $timeout, $document, $exceptionHandler, etc…
Can create custom services to be used in controllers.
Double mustache {{ }}
Angular’s inline data binding expressions. Ng-model for forms.
9

10.
Basic Angular App Checklist
Reference necessary Angular Javascript files – “angular.js”
and “angular-route.js”.
Create a module for your application
Create an application container
Create a controller
Perform needed data retrieval and add data to the $scope
object (model)
Create a view for your controller within your app container.
Add an “ng-controller” directive to your app container to tell
angular to use your new controller.
Run your application!
10

11.
Demo – To-Do List Application
11

12.
References
REST API:
http://blogs.msdn.com/b/uksharepoint/archive/2013/02/22/manipul
ating-list-items-in-sharepoint-hosted-apps-using-the-rest-api.aspx
http://stackoverflow.com/questions/14791444/adding-list-items-
with-sharepoint-2013-rest-api
http://www.andrewconnell.com/blog/Applying-Filters-to-Lookup-
Fields-with-the-SP2013-REST-API
http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-
using-rest-services-jquery/
http://sharepoint.stackexchange.com/questions/95456/get-list-
items-created-by-logged-in-user-with-rest-api
12

13.
References (Continued)
Angular
http://clintberry.com/2013/modular-angularjs-application-
design/
http://viralpatel.net/blogs/angularjs-controller-tutorial/
https://docs.angularjs.org/tutorial/step_07
13

14.
14