Single Page Applications in SharePoint with Angular
-
Upload
sparkhound-inc -
Category
Technology
-
view
1.065 -
download
2
description
Transcript of Single Page Applications in SharePoint with Angular
![Page 1: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/1.jpg)
SINGLE PAGE APPLICATIONS IN SHAREPOINT WITH ANGULAREric Trivette
![Page 2: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/2.jpg)
About Me
Senior Developer Consultant at SparkhoundEmail: [email protected] Blog: http://www.sparkhound.com/pages/blogs.aspx
2
![Page 3: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/3.jpg)
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
![Page 4: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/4.jpg)
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
![Page 5: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/5.jpg)
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
![Page 6: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/6.jpg)
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
![Page 7: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/7.jpg)
Model-View-Controller
7
Application Module
Configuration
Route:“/view/1”
Route:“/edit/1”
Route:“/list”
$scope
Services
Controller
ViewWeb Page
View Container
![Page 8: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/8.jpg)
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
![Page 9: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/9.jpg)
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
![Page 10: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/10.jpg)
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
![Page 11: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/11.jpg)
Demo – To-Do List Application
11
![Page 12: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/12.jpg)
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
![Page 13: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/13.jpg)
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
![Page 14: Single Page Applications in SharePoint with Angular](https://reader033.fdocuments.net/reader033/viewer/2022061120/546c81deaf7959ba0e8b6cf2/html5/thumbnails/14.jpg)
14