![Page 1: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/1.jpg)
Introduction to AngularJS with the Microsoft Graph
SÉBASTIEN LEVERTPRODUCT OWNER, OCEANIK
DEVELOPMENT & SOLUTIONS DIRECTOR, NEGOTIUM
![Page 2: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/2.jpg)
SPONSORS
![Page 3: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/3.jpg)
Who’s Sébastien Levert !?
Montreal, Canada oceanik.com
Office Servers & Services MVP
Web Developer@sebastienlever
tsebastienlevert.c
om
![Page 4: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/4.jpg)
Agenda• AngularJS• Microsoft Graph• Azure AD• Demos• Resources
![Page 5: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/5.jpg)
ANGULARJS
![Page 6: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/6.jpg)
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
![Page 7: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/7.jpg)
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
![Page 8: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/8.jpg)
AngularJS is (still) very… Trendy !
![Page 9: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/9.jpg)
Key Concepts• Architecture pattern• Enhanced HTML templating• 2-way data-binding• Routing engine• Dependency injection• Unit testing
![Page 10: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/10.jpg)
MICROSOFT GRAPH
![Page 11: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/11.jpg)
Building integration with Office 365
![Page 12: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/12.jpg)
AZURE AD
![Page 13: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/13.jpg)
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
![Page 14: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/14.jpg)
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
![Page 15: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/15.jpg)
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.)
![Page 16: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/16.jpg)
ANGULARJS
![Page 17: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/17.jpg)
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
![Page 18: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/18.jpg)
DEMOS, DEMOS EVERYWHERE!
![Page 19: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/19.jpg)
OFFICE HUB
![Page 20: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/20.jpg)
MY MESSAGES
![Page 21: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/21.jpg)
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
![Page 22: SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft Graph](https://reader035.vdocuments.us/reader035/viewer/2022070520/58f0ddfa1a28ab4c3b8b45d7/html5/thumbnails/22.jpg)
thank youquestions?
live ratingsHTTP://WWW.SEBASTIENLEVERT.COM@SEBASTIENLEV
ERT
spca.biz/KVU9