Introduction to AngularJS in an Office 365 context 

Sébastien Levert, Office Servers and Services MVPNegotium Technologies, Montreal, Canada

Who’s Sébastien Levert ?

Montreal, Canada negotium.comOffice Servers &

Services MVP

Web Developer @sebastienlevert pimpthecloud.com

Agenda

AngularJSOffice 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 2015A game changer in web development

Why AngularJS ?Getting closer to

client-side development

Living on the edgeStart 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-bindingEnhanced HTML

templating

Routing engine Unit testingDependency injection

SharePoint Integration

Integrating AngularJS in a SharePoint ContextMultiple 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 SDKsSupport of CORS (!!)In preview

Hands-on the Office 365 Unified APIGraph Explorergraphexplorer2

.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

authenticationClient credentials

grant flowPerpetual

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 worksCan be integrated with the Identity

Model of .NET

Demos

Wrap-Up

Wrap-UpAngularJS 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 ?