Introduction to AngularJS with the Microsoft Graph#SPFest Chicago

By: Sébastien Levert

My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at

SÉBASTIEN LEVERT

SPEAKER | OFFICE DEV MVP | SUPER FUNNY

AGENDA

AGENDA

What is AngularJS ?

AngularJS is a powerful JavaScript MVW Framework.

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

Open your mind to new technologies. They integrate nicely with SharePoint!

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

• Building applications faster, with less code

• Because everyone is heading towards it

Even if React is taking a lot of momentum, AngularJS is still great!

ANGULARJS IS (STILL) VERY… TRENDY !

AngularJS is a fully-featured SPA Framework.

KEY CONCEPTS OF ANGULARJS ?• Architecture pattern

• Enhanced HTML templating

• 2-way data-binding

• Routing engine

• Dependency injection

• Unit testing

AGENDA

What is the Microsoft Graph ?

The Microsoft Graph is a single API to get to your Office 365 data.

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/

Any language. Any IDE. Using standards. One endpoint.

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

Great way to publish your apps to your entire organization.

SINGLE AUTHENTICATION FLOW• 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

You users are aware of what you are doing with their data!

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

Microsoft Accounts and Organizational Accounts are supported!

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

AGENDA

Demos

AGENDA

Next Steps

Those resources will help you learning AngularJS with the Microsoft Graph

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

Sharing is Caring

SHARE YOUR EXPERIENCE• Use hashtags to share your experience• #Office365Dev• #MicrosoftGraph

• Contribute and ask question to the Microsoft Tech Community• https://slevert.me/tech-community-sp-dev

• Log issues & questions to the GitHub Repositories

My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at

THANK YOU Organizers, Sponsors and You for making this possible.

QUESTIONS | COMMENTS | ENGAGE