building share point apps with angularjs
TRANSCRIPT
Building SharePoint Apps
With
By Ahmed Elharouny
22nd October 2014
Page
Agenda
› Introduction
› App Model Overview (SharePoint-Hosted, SPA, AngularJS, RequireJS)
› High-level Design
› Demo & Sample Code
› Optimization
› Unit Testing
› Q & A
/ Copyright ©2014 by Readify Pty Ltd2
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
Page
App Model Overview
/ Copyright ©2014 by Readify Pty Ltd4
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.
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.
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.
Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd8
1999 Inline
2007 Unobtrusive
Knockout
Angular
2013 Data Binding
Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd9
• Dependency Injection
• Data Binding
• Routing
• Templates
• MVC or MVVM
• Ajax, REST
• Unit Testing
• Animation
Page
AngularJS
/ Copyright ©2014 by Readify Pty Ltd10
• Modules
• Controllers
• Directives
• Filters
• Services
• Configs
• Routes
Services RecipesConstant
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
Page
AngularJS - Modules
/ Copyright ©2014 by Readify Pty Ltd12
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
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
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-In Directives
Page
AngularJS - Directives
/ Copyright ©2014 by Readify Pty Ltd16
Custom Directives- 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).
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-In Services• $http
• $log
• $window
Custom Services
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.
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.
Page / Copyright ©2014 by Readify Pty Ltd20
High-level Design
Route
Page / Copyright ©2014 by Readify Pty Ltd21
High-level Design
Page
Demo
/ Copyright ©2014 by Readify Pty Ltd22
https://github.com/harouny/GitHubAppForSharePoint
Sample Code
Page
Optimization
/ Copyright ©2014 by Readify Pty Ltd23
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
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.
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
Page
Unit Testing
/ Copyright ©2014 by Readify Pty Ltd27
Page
Unit Testing
/ Copyright ©2014 by Readify Pty Ltd28
• Jasmine• Chutzpah• Chutzpah configuration file • RequireJS setup• angular-mocks
Page
Q & A
/ Copyright ©2014 by Readify Pty Ltd29
Thank you