single page applications in sharepoint with angular
DESCRIPTION
The Angular framework allows developers to create lightweight single page web applications with ease. By leveraging the Angular framework and the SharePoint 2013 REST API, we can create lightweight applications within SharePoint as alternatives to InfoPath forms and OOTB SharePoint web parts. This presentation will cover the basics of single page applications with Angular as well as targeting the SharePoint platform with SPA applications.TRANSCRIPT
SINGLE PAGE APPLICATIONS IN SHAREPOINT WITH ANGULAREric Trivette
About Me
Senior Developer Consultant at SparkhoundEmail: [email protected] Blog: http://www.sparkhound.com/pages/blogs.aspx
2
What We Will Cover
What is Angular and Why use it in SharePoint?A Brief Overview of the MVC Design PatternKey Angular TerminologyGetting Started With a Basic Angular ApplicationDemo – To-Do List Application
3
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
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
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
Model-View-Controller
7
Application Module
Configuration
Route:“/view/1”
Route:“/edit/1”
Route:“/list”
$scope
Services
Controller
ViewWeb Page
View Container
Key Angular Terminology
DirectivesExtend the DOM, apply data bindings.ng-app, ng-controller, ng-view, ng-model, ng-repeat, etc.
ModulesContainers for all Angular functionality. (i.e. Namespaces)
$scopeYour model. Uses to pass data from controller to view.
8
Key Angular Terminology (cont.)
ServicesAngular 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
Basic Angular App Checklist
Reference necessary Angular Javascript files – “angular.js” and “angular-route.js”.Create a module for your applicationCreate an application containerCreate a controllerPerform 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
Demo – To-Do List Application
11
References
REST API:http://blogs.msdn.com/b/uksharepoint/archive/2013/02/22/manipulating-list-items-in-sharepoint-hosted-apps-using-the-rest-api.aspxhttp://stackoverflow.com/questions/14791444/adding-list-items-with-sharepoint-2013-rest-apihttp://www.andrewconnell.com/blog/Applying-Filters-to-Lookup-Fields-with-the-SP2013-REST-APIhttp://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
References (Continued)
Angularhttp://clintberry.com/2013/modular-angularjs-application-design/http://viralpatel.net/blogs/angularjs-controller-tutorial/https://docs.angularjs.org/tutorial/step_07
13
14