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
• 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
• 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
• Azure AD and Microsoft Accounts (Preview)
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

SharePoint Fest Chicago - Introduction to AngularJS with the Microsoft Graph

  • 1.
    Introduction to AngularJS withthe Microsoft Graph #SPFest Chicago By: Sébastien Levert
  • 2.
    My twitter handleis @sebastienlevert, blog is http://sebastienlevert.com and I work at SÉBASTIEN LEVERT SPEAKER | OFFICE DEV MVP | SUPER FUNNY
  • 3.
  • 4.
  • 5.
  • 6.
    AngularJS is apowerful 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
  • 7.
    Open your mindto 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
  • 8.
    Even if Reactis taking a lot of momentum, AngularJS is still great! ANGULARJS IS (STILL) VERY… TRENDY !
  • 9.
    AngularJS is afully-featured SPA Framework. KEY CONCEPTS OF ANGULARJS ? • Architecture pattern • Enhanced HTML templating • 2-way data-binding • Routing engine • Dependency injection • Unit testing
  • 10.
  • 11.
    What is theMicrosoft Graph ?
  • 12.
    The Microsoft Graphis 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/
  • 13.
    Any language. AnyIDE. 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
  • 14.
    Great way topublish your apps to your entire organization. SINGLE AUTHENTICATION FLOW • Sign users in using OpenID Connect • 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
  • 15.
    You users areaware of what you are doing with their data! COMMON CONSENT • Admin and end-user consent • Secure protocol • No capturing user credentials • Fine-grained access scopes • Long-term access through refresh tokens
  • 16.
    Microsoft Accounts andOrganizational Accounts are supported! AUTHENTICATION OPTIONS • Azure AD only • Azure AD and Microsoft Accounts (Preview)
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
    Those resources willhelp 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
  • 22.
    Sharing is Caring SHAREYOUR 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
  • 23.
    My twitter handleis @sebastienlevert, blog is http://sebastienlevert.com and I work at THANK YOU Organizers, Sponsors and You for making this possible. QUESTIONS | COMMENTS | ENGAGE

Editor's Notes

  • #2 Imagine a future where silo'd departments and legacy processes don’t stand in our way. Today’s collaboration needs go from complex collaboration portals to simple innovation hubs and most importantly need to work for our devices. Designing portals to enable a new kind of collaboration and communication is an absolute necessity today. For the past couple years, I’ve had the opportunity to study how successful teams collaborate and have helped to transform the way teams work and collaborate together. In this session, I'll share what I’ve learned about making effective cross-discipline collaboration possible, and leave you with actionable approaches you can use to unite your team's communication and collaboration needs. IN THIS SESSION YOU’LL HEAR:     • Why cross-discipline collaboration is essential to future-ready digital design, and how you can play a key role in creating the cross-departmental teams to enable innovation     • Real-life industry examples of what it takes to make effective collaboration possible     • Practical techniques you can use to bridge silos, increase productivity, and deliver better outcomes for your teams