Introduction to AngularJS with the Microsoft Graph
SÉBASTIEN LEVERTPRODUCT OWNER, OCEANIK
DEVELOPMENT & SOLUTIONS DIRECTOR, NEGOTIUM
SPONSORS
Who’s Sébastien Levert !?
Montreal, Canada oceanik.com
Office Servers & Services MVP
Web Developer@sebastienlever
tsebastienlevert.c
om
Agenda• AngularJS• Microsoft Graph• Azure AD• Demos• Resources
ANGULARJS
What is AngularJS ?• Superheroic JavaScript MVW framework• Developed by Google• Started in 2009• Used by Netflix, Youtube, Vevo, MSNBC, …, You ?• A game changer in web development• Angular 2.0 coming in 2015 2016
Why AngularJS ?• Getting closer to client-side development• Start thinking like a web developer, not like a SharePoint
developer• Living on the edge• Building applications faster, with less code• Because everyone is heading towards it
AngularJS is (still) very… Trendy !
Key Concepts• Architecture pattern• Enhanced HTML templating• 2-way data-binding• Routing engine• Dependency injection• Unit testing
MICROSOFT GRAPH
Building integration with Office 365
AZURE AD
Single authentication flow for Office 365• Sign users in using
OpenID Connect• Azure AD and Office 365
services• Supports MFA and
federated user sign-in• Device apps, web sites,
SPAs, and service apps• Pin apps to Office 365
app launcher from My apps
Common consent•Single auth flow for accessing all O365 services•Admin and end-user consent•Secure protocol
• OpenID Connect and OAuth 2.0
• No capturing user credentials
• Fine-grained access scopes
• Long-term access through refresh tokens
Authentication Options• Azure AD only• Separate auth flow supports Azure AD accounts only
• Azure AD and Microsoft Accounts (Preview)• Converged auth flow supports Azure AD accounts and
Microsoft accounts (LiveID - hotmail.com, etc.)
ANGULARJS
What do we need to integrate?• Scaffolding of AngularJS application• Automatic authentication• Connecting data• Secured routes• Office UI Framework into AngularJS• Injection of tokens in HTTP calls
DEMOS, DEMOS EVERYWHERE!
OFFICE HUB
MY MESSAGES
Resources• http://dev.office.com• http://ngofficeuifabric.com/• http://github.com/sebastienlevert/officehub • http://slevert.me/slevert-twitter• http://slevert.me/slevert-slideshare• http://sebastienlevert.com
thank youquestions?
live ratingsHTTP://WWW.SEBASTIENLEVERT.COM@SEBASTIENLEV
ERT
spca.biz/KVU9
Top Related