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.
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
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
Utilizes Model View Controller design pattern by splitting pages into the following:
Models â Data to be displayed on a page. Referred to as $scope in Angular
Views â Segments of HTML markup to represent the primary contents of a page.
Controllers â Code to initialize the model for a view and respond to actions performed by the user.
Before we move any further⊠here are some key angular terms!
Before we move any further⊠here are some key angular terms!