Building SharePoint Apps with AngularJS Ahmed Elharouny – Readify In this presentation, we will discuss how to develop a SharePoint 2013 app using AngularJS as a Single Page App and how to leverage AngularJS to keep your code nicely separated and well organized We shall also learn how to use RequireJS to manage your script dependencies and optimize and bundle your scripts, how to setup your app to have the same look and feel as a SharePoint site and how to write unit tests for your JavaScript components. Presentation Agenda : Introduction App Model Overview Design of your App Demonstration Questions

1. Building SharePoint Apps
With
By Ahmed Elharouny
22nd October 2014

2. Page
Agenda
› Introduction
› AppModelOverview(SharePoint-Hosted, SPA,AngularJS, RequireJS)
› High-levelDesign
› Demo&SampleCode
› Optimization
› UnitTesting
› Q&A
/ Copyright ©2014 by Readify Pty Ltd2

3. Page
Introduction
/ Copyright ©2014 by Readify Pty Ltd3
Ahmed Elharouny
Senior Developer at Readify
http://www.harouny.com
Twitter: @harouny
Github: harouny
• Microsoft Technology Specialist (MCTS Web)
• Professional Scrum Master (PSMI)
• 9 years of experience in web development
• I’m not a SharePoint specialist
• I started SharePoint Live Charts to learn about the new app model

4. Page
App Model
Overview
/ Copyright ©2014 by Readify Pty Ltd4

5. Page
SharePoint Hosted
/ Copyright ©2014 by Readify Pty Ltd5
• Development experience
• Instant deployment to SharePoint while modifying in debug mode.
• No external deployment steps
• i.e. IIS, Azure.
• No extra costs & concerns
• Who is paying for resources?
• Leverage SharePoint for services and data storage
• Using client APIs REST or CSOM.
• APP and data is a single unit
• Backup, Restore, Install, Uninstall single unit.
• Still protecting app business logic
• Using business connectivity services and workflows.

6. Page
Single Page App
/ Copyright ©2014 by Readify Pty Ltd6
• Simpler in development
• No need to manage user moving from page to page.
• Only update what you want to update.
• Persist state on client.
• Rich user experience
• No page reloads.
• Allow of rich UX.
• Progressively download resources when required.
• Modular approach
• Think about modules, not pages.

7. Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd7
• A JavaScript framework for building client side applications that
runs in the browser.
• Started by Google but quickly became a popular open source
project.
• It aims to simplify development, maintaining and testing
applications.

8. Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd8
1999 Inline
2007 Unobtrusive
Knockout
Angular
2013 Data Binding

9. Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd9
• Dependency Injection
• Data Binding
• Routing
• Templates
• MVC or MVVM
• Ajax, REST
• Unit Testing
• Animation

10. Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd10
• Modules
• Controllers
• Directives
• Filters
• Services
• Configs
• Routes
Services Recipes
Constant

11. Page
AngularJS - Modules
/ Copyright ©2014 by Readify Pty Ltd11
- A module is a logical container for the different parts of your app –
controllers, services, filters, directives, etc.
- A module is not a namespace.
DependenciesName

12. Page
AngularJS - Modules
/ Copyright ©2014 by Readify Pty Ltd12

13. Page
AngularJS - Controllers
/ Copyright ©2014 by Readify Pty Ltd13
- A Controller is a JavaScript function that is used to work with scope (view
model).
- Controllers are attached to DOM using ng-controller directive.
Name Dependencies Function

14. Page
AngularJS - Scope
/ Copyright ©2014 by Readify Pty Ltd14
- AngularJS will always create a root scope driven by the ng-app
directive.
ng-app
ng-controller
ng-controller

15. Page
AngularJS - Directives
/ Copyright ©2014 by Readify Pty Ltd15
Directives are markers on a DOM element that tell AngularJS to attach a
specified behavior to that DOM.
Built-InDirectives

16. Page
AngularJS - Directives
/ Copyright ©2014 by Readify Pty Ltd16
CustomDirectives
- Custom directive can be used to provide a declarative markup approach
and reusability.
- There are many ways to declare a directive in markup using (HTML
attributes, elements, comments and CSS classes).

17. Page
AngularJS - Services
/ Copyright ©2014 by Readify Pty Ltd17
- Services is a way to organize and share code across app.
- Services are lazy initialized and singleton.
Built-InServices
• $http
• $log
• $window
CustomServices

18. Page
RequireJS
/ Copyright ©2014 by Readify Pty Ltd18
• RequireJS is a JavaScript file and module loader.
• It supports Asynchronous Module Definition AMD.
• Asynchronous Module Definition (AMD) API specifies a
mechanism for defining modules such that the module and its
dependencies can be asynchronously loaded.

19. Page
RequireJS
/ Copyright ©2014 by Readify Pty Ltd19
common.js
common.config.js
• Load scripts faster.
• Manage script dependencies
for you.
• Script loading is
Configurable.
• Mock scripts during test.

20. Page / Copyright ©2014 by Readify Pty Ltd20
High-level Design
Route

21. Page / Copyright ©2014 by Readify Pty Ltd21
High-level Design

22. Page
Demo
/ Copyright ©2014 by Readify Pty Ltd22
https://github.com/harouny/GitHubAppForSharePoint
Sample Code

23. Page
Optimization
/ Copyright ©2014 by Readify Pty Ltd23

24. Page
RequireJS Optimizer
/ Copyright ©2014 by Readify Pty Ltd24
• Combine related scripts together into minified files.
• Uses r.js file.
• node is recommended to run it. (java, browser can do it as well).
• Add this to a Post Build Script.
Build output
configs
Build folder

25. Page
RequireJS Optimizer
/ Copyright ©2014 by Readify Pty Ltd25
• You can switch between the optimized and the non-optimized versions.
• The non-optimized version is needed during development and debugging.

26. Page
Optimizing HTML files
/ Copyright ©2014 by Readify Pty Ltd26
• You can minify, combine, cache HTML templates used by AngularJS so that
Angular doesn’t need to make an Ajax request for every new template.
• Can be done manually or with a tool like grunt-angular-templates
See it in action

27. Page
Unit Testing
/ Copyright ©2014 by Readify Pty Ltd27

28. Page
Unit Testing
/ Copyright ©2014 by Readify Pty Ltd28
• Jasmine
• Chutzpah
• Chutzpah configuration file
• RequireJS setup
• angular-mocks

29. Page
Q & A
/ Copyright ©2014 by Readify Pty Ltd29

30. Thank you