Introduction to AngularJS with the Microsoft GraphSébastien Levert

29 October 2016Durban, SA

#SPSDBN

Who’s Sébastien Levert !?

Montreal, Canada 2toLead.comOffice

Development MVP

Web Developer @sebastienlevertsebastienlevert.co

m

Agenda• What AngularJS and why should I use it ?• What is the Microsoft Graph ?• What is an Azure AD Application ?• Demos• Resources

What is Angular JSAnd why shoud I use it ?

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 should I use AngularJS ?• Getting closer to client-side development• Start thinking like a web developer, not like a

SharePoint developer• Living on the edge• It’s a mighty beast• Building applications faster, with less code• Because everyone is heading towards it

AngularJS is (still) very… Trendy !

Key concepts of AngularJS• Architecture pattern• Enhanced HTML templating• 2-way data-binding• Routing engine• Dependency injection• Unit testing

What is the Microsoft Graph ?

What is the Microsoft Graph ?Single endpoint for:Accessing data

/me, /users, /groups, /messages, /drive, ….

Traversing data/drive/<id>/lastmodifiedByUser

Accessing insights/insights/trending

Work/School and Personal

https://graph.microsoft.com/

Come as you are and get your data• Use your favorite

technology and host it anywhere

• Code in your favorite IDE

• Use standards to connect to your data

• Get data, insights and relationships from the Office Graph

What is an Azure AD Application ?

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• 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 authentication 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.)

Demos

Resources

Resources• https://dev.office.com• https://graph.microsoft.io• http://github.com/officedev• http://github.com/microsoftgraph• http://github.com/sebastienlevert• http://github.com/richdizz• https://github.com/maliksahil

Questions ? Comments ?Feel free to reach out !