Introduction to AngularJS with the Microsoft

GraphSÉBASTIEN LEVERTPRODUCT OWNER, OCEANIK

DEVELOPMENT & SOLUTIONS DIRECTOR, NEGOTIUM

SPONSORS

Who’s Sébastien Levert !?

Montreal, Canada oceanik.com

Office Servers &

Services MVP

Web Developer @sebastienlevert

sebastienlevert.co

m

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 you

questions?

live ratings

HTTP://WWW.SEBASTIENLEVERT.COM@SEBASTIENLEVERT

spca.biz/KVU9