Every developer hears about AngularJS and all the magic it does for you applications. In order to kickstart you AngularJS journey, this session is an introduction to the AngularJS concepts applied to any Office 365 development. Different workloads will be targeted (Mail, Calendar, Files) and the Office 365 API will be our main datasource. We will also cover SharePoint Online specific data access (Office 365 API, REST, CSOM and Search) to meet your current development needs. The 3 key takeaways of this session are : You will understand the basics of the AngularJS framework You will learn how to communicate withthe Office 365 through AngularJS You will be able to apply those new skills in your next project

1. Introduction to AngularJS
with the Microsoft Graph
#SPFest Chicago
By: Sébastien Levert

2. My twitter handle is @sebastienlevert, blog is http://sebastienlevert.com and I work at
SÉBASTIEN LEVERT
SPEAKER | OFFICE DEV MVP | SUPER FUNNY

3. AGENDA

4. AGENDA

5. What is AngularJS ?

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

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

8. Even if React is taking a lot of momentum, AngularJS is still great!
ANGULARJS IS (STILL) VERY… TRENDY !

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

10. AGENDA

11. What is the Microsoft Graph ?

12. 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/

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

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

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

16. Microsoft Accounts and Organizational Accounts are supported!
AUTHENTICATION OPTIONS
• Azure AD only
• Azure AD and Microsoft Accounts (Preview)

17. AGENDA

18. Demos

19. AGENDA

20. Next Steps

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

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

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