Introduction to AngularJS in an
Office 365 context
Sébastien Levert, Office Servers and Services MVP
Negotium Technologies, Montreal, Canada
Who’s Sébastien Levert ?
Montreal, Canada negotium.com
Office Servers &
Services MVP
Web Developer @sebastienlevert pimpthecloud.com
Agenda
AngularJS Office 365 Unified APISharePoint
Azure AD Authentication Wrap-UpDemos
What is AngularJS
What is AngularJS ?
Superheroic JavaScript
MVW framework
Started in 2009Developed by Google
Used by Netflix, Youtube,
Vevo, MSNBC, …
Angular 2.0 coming in
2015
A game changer in web
development
Why AngularJS ?
Getting closer to client-
side development
Living on the edge
Start thinking like a web
developer, not like a
SharePoint developer
Building applications
faster, with less code
It’s currently the hottest
development framework
Because everyone is
heading towards it, even
Microsoft
AngularJS is very… trendy
Key concepts
Architecture patterns 2-way data-binding
Enhanced HTML
templating
Routing engine Unit testingDependency injection
SharePoint Integration
Integrating AngularJS in a SharePoint Context
Multiple artifacts can act
as AngularJS apps
Runs in the context of
the user
Multiple data access
layers can be targeted
Available with SharePoint
2007, 2010, 2013,
Online…
Can be used in a
modern web
development workflow
Rapid development and
quick feedbacks
Demos
Office 365 Unified API
What is the Office 365 Unified API ?
Single API to consume
your Office 365 data
Exposed through the
Office Graph
Announced at //build
2015
Currently available in
preview through REST
and SDKs
Support of CORS (!!)In preview
Hands-on the Office 365 Unified API
Graph Explorer
graphexplorer2
.azurewebsites.net
Allows to run queries
against your own tenant
and explore the data
with OData queries
Azure AD
Authentication
What is the Office 365 Unified API ?
OAuth 2.0 Secured access scopes
Leaving the
authentication process to
Microsoft
Supports MFA &
federated authentication
Client credentials grant
flow
Perpetual connections
with refresh tokens
What is Azure AD Grant Flow ?
Azure AD
Client Application Office 365 API
1
2
3
4
Token
Resources
Token
How do I integrate Azure AD ?
Integrate on a single or
multiple tenants
Available for every major
platform
Use the Azure ADAL
libraries
Let the authentication
flow do the job, stop
coding login screens
It just works
Can be integrated with
the Identity Model of
.NET
Demos
Wrap-Up
Wrap-Up
AngularJS enables you to
write Single-Page
Applications integrated
with Office 365 &
SharePoint
Authentication is
possible thanks to Azure
AD Authentication
Library
All the Office 365 API are
being unified through
the Office Graph
AngularJS interceptors
can integrate the access
token with every API call
Stop worrying about
authentication and
security, start delivering
business value
Office 365 is the most
strategic developer
surface for Microsoft
References
dev.office.com
graphexplorer2
.azurewebsites.net
apisandbox.msdn.com
slevert.me/
espc15-blog
slevert.me/
espc15-slides
slevert.me/
espc15-office-hub
Questions ?
ESPC15 - Introduction to AngularJS in an Office 365 context

ESPC15 - Introduction to AngularJS in an Office 365 context

  • 1.
    Introduction to AngularJSin an Office 365 context Sébastien Levert, Office Servers and Services MVP Negotium Technologies, Montreal, Canada
  • 2.
    Who’s Sébastien Levert? Montreal, Canada negotium.com Office Servers & Services MVP Web Developer @sebastienlevert pimpthecloud.com
  • 3.
    Agenda AngularJS Office 365Unified APISharePoint Azure AD Authentication Wrap-UpDemos
  • 4.
  • 5.
    What is AngularJS? Superheroic JavaScript MVW framework Started in 2009Developed by Google Used by Netflix, Youtube, Vevo, MSNBC, … Angular 2.0 coming in 2015 A game changer in web development
  • 6.
    Why AngularJS ? Gettingcloser to client- side development Living on the edge Start thinking like a web developer, not like a SharePoint developer Building applications faster, with less code It’s currently the hottest development framework Because everyone is heading towards it, even Microsoft
  • 7.
  • 8.
    Key concepts Architecture patterns2-way data-binding Enhanced HTML templating Routing engine Unit testingDependency injection
  • 9.
  • 10.
    Integrating AngularJS ina SharePoint Context Multiple artifacts can act as AngularJS apps Runs in the context of the user Multiple data access layers can be targeted Available with SharePoint 2007, 2010, 2013, Online… Can be used in a modern web development workflow Rapid development and quick feedbacks
  • 11.
  • 12.
  • 13.
    What is theOffice 365 Unified API ? Single API to consume your Office 365 data Exposed through the Office Graph Announced at //build 2015 Currently available in preview through REST and SDKs Support of CORS (!!)In preview
  • 14.
    Hands-on the Office365 Unified API Graph Explorer graphexplorer2 .azurewebsites.net Allows to run queries against your own tenant and explore the data with OData queries
  • 15.
  • 16.
    What is theOffice 365 Unified API ? OAuth 2.0 Secured access scopes Leaving the authentication process to Microsoft Supports MFA & federated authentication Client credentials grant flow Perpetual connections with refresh tokens
  • 17.
    What is AzureAD Grant Flow ? Azure AD Client Application Office 365 API 1 2 3 4 Token Resources Token
  • 18.
    How do Iintegrate Azure AD ? Integrate on a single or multiple tenants Available for every major platform Use the Azure ADAL libraries Let the authentication flow do the job, stop coding login screens It just works Can be integrated with the Identity Model of .NET
  • 19.
  • 20.
  • 21.
    Wrap-Up AngularJS enables youto write Single-Page Applications integrated with Office 365 & SharePoint Authentication is possible thanks to Azure AD Authentication Library All the Office 365 API are being unified through the Office Graph AngularJS interceptors can integrate the access token with every API call Stop worrying about authentication and security, start delivering business value Office 365 is the most strategic developer surface for Microsoft
  • 22.
  • 23.