SINGLE PAGE APPLICATIONS IN SHAREPOINT WITH ANGULAR

1. SINGLE PAGE APPLICATIONS IN SHAREPOINT WITH ANGULAR Eric Trivette

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

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

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.

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.

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.

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

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.

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.

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!

11. Demo – To-Do List Application

12. References • REST API: • http://blogs.msdn.com/b/uksharepoint/archive/2013/02/22/manipulating-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

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