SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Microsoft Graph

Mar 18, 2018Download as PPTX, PDF0 likes52 views

Sébastien Levert presented on introducing the AngularJS framework and the Microsoft Graph API. The presentation covered what AngularJS is and why developers should use it, an overview of the Microsoft Graph and how it provides a single endpoint to access data from Office 365 and Microsoft services, and how to authenticate and build applications using the Microsoft Graph through Azure Active Directory applications. Code samples and resources were provided to help developers get started with AngularJS and the Microsoft Graph.

Introduction to #angrydragon with the Microsoft Graph
Sébastien Levert
26 October 2016
Port Elizabeth, SA
#SPWPE

Who’s Sébastien Levert !?
Montreal, Canada 2toLead.com
Office Development
MVP
Web Developer @sebastienlevert sebastienlevert.com

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

SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Microsoft Graph

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
• Building applications faster, with less code
• Because everyone is heading towards it

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

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

Single authentication flow for Office 365
• 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

Common consent
• Admin and end-user consent
• Secure protocol
• No capturing user credentials
• Fine-grained access scopes
• Long-term access through refresh
tokens

Authentication options
• Azure AD only
• Azure AD and Microsoft Accounts (Preview)

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

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

Interoperability of components built with different frameworksSouvik Basu

As React, Vue, Angular and other Frontend frameworks mature, more and more projects embrace them in production. It has reached a point where a project written in React wants to use Angular or Vue components (and vice versa). We will explore pragmatic ways to use components created using different frameworks in the same app. I am working on an Angular project for one of our clients. It recently acquired a company which is invested into React for few years. There is a plan to merge our products which has a lot of feature overlap. To use capabilities of existing teams, it was decided to use React components within Angular app. This is when we explored all possibilities of inter operations between frameworks. This talk will be case study of our work and what you can take away from it

JavaScript in Universal Windows Platform appsTimmy Kokke

SPTypeOutGrid: Knockout + TypeScript + SharePoint 2010 = Cool Grids in List F...Sam Larko

This document provides an overview of using TypeScript, Knockout, and model-view-viewmodel (MVVM) frameworks to create editable grids in SharePoint list forms. It introduces TypeScript as a strongly typed superset of JavaScript, Knockout as a library for two-way data binding, and how MVVM frameworks like Knockout separate the model and view. The document then demonstrates editable grid code using these technologies and provides resources for further information.

Analizzare le performance di un'applicazione ASP.NET con GlimpseEmanuele Bartolesi

This document provides an introduction and agenda for a webcast about the Glimpse debugging tool for ASP.NET applications. It begins with biographies of the presenters and an overview of what Glimpse is and why it is useful. The document then outlines the topics to be covered, including Glimpse tabs, plugins, and creating custom plugins. It concludes with references and contact information for the presenters.

WebSite development using WinJSAlexandre Marreiros

Why front-end matters in 2019Timmy Kokke

This document discusses the importance of front-end development in 2019. It outlines how user demands, new technologies, and increased knowledge have changed the front-end landscape. Modern front-end development involves skills like React, Vue, JavaScript, responsive design, and APIs to create fast and engaging experiences across devices. Examples are given of how Spotify and other companies have improved their mobile websites to match or exceed native apps in usage. Emerging APIs are also discussed that will continue enhancing interactive capabilities on the web.

Frontend War: Angular vs React vs VueMarudi Subakti

Web development nowadays is getting popular. Many company focus to develop their product in web application. Generally, web development divide into 2 parts, Backend & Frontend. Backend doesnt have improvement or new features too much after API technologies. But it is very different with frontend. There are lots of framework, tools, and approach in frontend area. Currently, there are 3 frontend technologies which get most attention both from Company and Developers. Those 3 are: Angular, React, and Vue. --- This article was presented in HongLeong Bank CoE Team at March, 2 2018

The State of FrontendJimit Shah

Building applications in a Micro-frontends wayPrasanna Venkatesan

This document discusses micro-frontends, an approach to building applications where the frontend is split into independent modules. It introduces micro-frontends as a way to achieve independent releases for the frontend like microservices do for the backend. It outlines some key things to consider with micro-frontends like composing multiple frontends, sharing data between them, ensuring consistent UX, and testing strategies. It describes options for composing frontends at build time vs run time and approaches for sharing data. It also discusses the importance of design consistency and provides testing strategies like consumer driven contracts and functional tests. In summary, micro-frontends allow independent teams to work on different parts of the frontend while ensuring a consistent user experience.

Web Based Development IntroductionEdy Segura

This document discusses web-based development and the main technologies involved, including web architecture, HTTP, HTML, CSS, JavaScript, and APIs. It notes that JavaScript is becoming increasingly important and prevalent across web servers, libraries, databases, and languages, so learning JavaScript is important to avoid being left behind in web development. The document also mentions building web applications using these technologies and having hands-on practice.

Micro frontends with react and redux dev dayPrasanna Venkatesan

Alexandra, Matthias, and Prasanna have been working on a project with micro frontend architecture for the past year. This project involves 4 teams distributed over two countries - Germany and India, each of the teams delivering one or several micro frontends that are consolidated into one product in the browser. This talk is based on our practical insights into micro frontends using React and Redux. We will discuss the differences between this technique and micro-services, our approaches to solving the common issues, the advantages it offers and the challenges it brings.

AngularJSIvan Junior

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

Lohith G N presents on ASP.NET 5 and how it enables modern web development. The key points are that ASP.NET 5 is open source, totally modular, allows for seamless transitions between on-premises and cloud, and allows developers to choose their own editors and tools. It also offers faster development cycles, is cross-platform, and prioritizes agility, speed, cloud capabilities. Lohith demonstrates ASP.NET 5 in action and summarizes how it provides a cloud-optimized, modular design with features like dependency injection, consistent debugging, and faster development without build steps.

What is new in ASP.NET CoreMaurice De Beijer [MVP]

This document discusses what is new in ASP.NET Core, including a new project structure that is totally modular, a faster development cycle, running on .NET Core which allows for cross-platform use on Linux and Mac, and features like dependency injection and inversion of control that make the framework more modular and testable. It also compares ASP.NET Core to previous versions, noting that MVC and Web API are newer in ASP.NET Core and the framework does not depend on System.Web anymore.

Intro to Front End FrameworksProduct School

Express web development with visual studio 2010 express_MVP Ronald Rajagukguk Quek Lilian

Build Nodejs APIs using Serverless Simona Cotin

Serverless lets you focus on coding and testing instead of provisioning infrastructure, configuring web servers, debugging your configuration, managing security settings, and all the drudgery normally associated with getting an app up and running. In this session with, you’ll discover how to migrate an API of an existing app to Azure Functions. You’ll learn how to use Visual Studio Code and the Azure Functions extension to speed up your work. After this session, you’ll join the ranks of serverless developers.

Fast prototyping apps using AngularJS, RequireJS and Twitter BootstrapYuriy Silvestrov

Yuriy Silvestrov and Mikhail Valkov presented a method for fast prototyping of rich user interface applications using AngularJS, RequireJS, jQuery. They discussed dividing projects into modules and components to manage dependencies and isolate code. They recommended using frameworks like Bootstrap and its extensions for responsive design templates. The presentation provided examples of prototyping an alarm clock app in under 24 hours and discussed questions on integrating Angular, RequireJS and other JavaScript tools.

Introduction to NativeScript - BuildTruly Native Apps using JavaScriptLohith Goudagere Nagaraj

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

This document discusses building hybrid mobile applications using Telerik Kendo UI. It defines hybrid apps as those written with web technologies but run natively on devices by leveraging the device's browser engine. Hybrid apps allow targeting multiple mobile platforms while still accessing device capabilities. Telerik Kendo UI is an HTML5 framework for building such hybrid mobile apps using its widgets. Telerik AppBuilder is a hybrid mobile app IDE, and it also has a Visual Studio extension to facilitate hybrid app development. The document concludes with a demo of a media player hybrid mobile app.

AngularJS - GrapeCity Echo TokyoChris Bannon

In this session we will talk about the AngularJS application framework. What is it, why is it so successful, how does it help developers, how can you start using it today, how will it evolve? Introduction - a brief history of the evolution of HTML and JavaScript - why do we need application frameworks? Angular 1.x - what is it? - what are the main design goals? - what makes it different from other frameworks? - how does it work? example: the simplest Angular application - the power of custom directives example: a simple validation directive example: a simple Google Maps control directive Angular 2.0 - what is it? - how will it improve upon Angular 1.x? - when will it become available? - will it change everything?

MVVM & Validation with Kendo UILohith Goudagere Nagaraj

Kendo UI provides a single package solution for building web applications with JavaScript, HTML5 and CSS3. It includes UI widgets, frameworks, and tools for data binding, visualization and building mobile apps. Kendo UI uses the MVVM pattern to separate data models from views through ViewModels. It includes ObservableObject and ObservableArray classes to enable two-way data binding between UI elements and data. Validation capabilities are also provided to augment HTML5 form validation and make it work consistently across browsers.

Inside Wijmo 5, a Large-scale JavaScript ProductChris Bannon

GrapeCity has been developing JavaScript products for over six years. The browser landscape has changed greatly since we started and we have learned a lot along the way. Today, we manage Wijmo 5, a suite of JavaScript UI controls, specializing in a high-performance datagrid and powerful charts. In this session, we will give you a look inside our project. We will go over the collections of tools, frameworks, languages and patterns that we have refined over the years. You walk away from this session with useful tips for managing large-scale JavaScript applications.

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

This document summarizes a meetup about HTML5 game development with WebGL. It introduces ThreeDee Media, which develops tools like the TDM Engine for WebGL game creation. It explains what WebGL is, how it works, browser support, and how to get started with WebGL game development using engines, content creation tools, and resources provided. The document conveys that WebGL allows for hardware-accelerated 3D graphics in browsers without plugins, and its support in iOS 8 marks a tipping point for web-based 3D games.

SharePoint Saturday Cape Town - Introduction to AngularJS with the Microsoft ...Sébastien Levert

SharePoint Fest Chicago - Introduction to AngularJS with the Microsoft GraphSébastien Levert

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

Introduction to AngularJS with the Microsoft GraphSPC Adriatics

This document provides an introduction to integrating AngularJS applications with the Microsoft Graph. It begins with an overview of AngularJS and what it is used for. It then discusses the Microsoft Graph and Azure Active Directory, which enables single sign-on authentication for Office 365 services. It demonstrates how to scaffold an AngularJS app, enable authentication, connect to data sources, and secure routes when using the Microsoft Graph. It also shows how to incorporate the Office UI Fabric into AngularJS apps and make HTTP calls by injecting tokens. The presentation concludes with links to additional resources and a thank you from the presenter.

SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft GraphSébastien Levert

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 Microsoft Graph will be our main datasource. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) that will speed up your development process while using your Office 365 tenant data. 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

Cross Platform Angular 2 and TypeScript DevelopmentJeremy Likness

More Related Content

What's hot (17)

The State of FrontendJimit Shah

Building applications in a Micro-frontends wayPrasanna Venkatesan

Web Based Development IntroductionEdy Segura

Micro frontends with react and redux dev dayPrasanna Venkatesan

AngularJSIvan Junior

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

What is new in ASP.NET CoreMaurice De Beijer [MVP]

Intro to Front End FrameworksProduct School

Express web development with visual studio 2010 express_MVP Ronald Rajagukguk Quek Lilian

Build Nodejs APIs using Serverless Simona Cotin

Fast prototyping apps using AngularJS, RequireJS and Twitter BootstrapYuriy Silvestrov

Introduction to NativeScript - BuildTruly Native Apps using JavaScriptLohith Goudagere Nagaraj

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

AngularJS - GrapeCity Echo TokyoChris Bannon

MVVM & Validation with Kendo UILohith Goudagere Nagaraj

Inside Wijmo 5, a Large-scale JavaScript ProductChris Bannon

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

The State of FrontendJimit Shah

Building applications in a Micro-frontends wayPrasanna Venkatesan

Web Based Development IntroductionEdy Segura

Micro frontends with react and redux dev dayPrasanna Venkatesan

AngularJSIvan Junior

Getting Started with ASP.NET vNextLohith Goudagere Nagaraj

What is new in ASP.NET CoreMaurice De Beijer [MVP]

Intro to Front End FrameworksProduct School

Express web development with visual studio 2010 express_MVP Ronald Rajagukguk Quek Lilian

Build Nodejs APIs using Serverless Simona Cotin

Fast prototyping apps using AngularJS, RequireJS and Twitter BootstrapYuriy Silvestrov

Introduction to NativeScript - BuildTruly Native Apps using JavaScriptLohith Goudagere Nagaraj

Build Hybrid Mobile Applications for Nokia Lumia DevicesLohith Goudagere Nagaraj

AngularJS - GrapeCity Echo TokyoChris Bannon

MVVM & Validation with Kendo UILohith Goudagere Nagaraj

Inside Wijmo 5, a Large-scale JavaScript ProductChris Bannon

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

Similar to SharePoint Wednesday Port Elisabeth - Introduction to AngularJS with the Microsoft Graph (20)

SharePoint Saturday Cape Town - Introduction to AngularJS with the Microsoft ...Sébastien Levert

SharePoint Fest Chicago - Introduction to AngularJS with the Microsoft GraphSébastien Levert

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

Introduction to AngularJS with the Microsoft GraphSPC Adriatics

SPC Adriatics 2016 - Introduction to AngularJS with the Microsoft GraphSébastien Levert

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 Microsoft Graph will be our main datasource. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) that will speed up your development process while using your Office 365 tenant data. 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

Cross Platform Angular 2 and TypeScript DevelopmentJeremy Likness

Web development - Developing Web as A TeamMuhammad Akbar Yasin

This document discusses developing a web application as a team. It outlines key roles like the system engineer, web programmer, and web designer. It also covers important aspects of web development like using frameworks, separating front-end and back-end development, and utilizing version control tools when collaborating as a team. The document emphasizes that while one can develop a website alone, teamwork is better, and web designers now need coding skills to build responsive designs for different devices.

SPS calgary 2017 introduction to azure functions microsoft flowVincent Biret

Vincent biret azure functions and flow (toronto)Vincent Biret

This document outlines Vincent Biret's presentation on Azure Functions and Microsoft Flow. The presentation includes demos of using Flow to automate workflows across various services and using Functions to run pieces of code in the cloud. The agenda covers introductions to Flow and Functions, demos of each, best practices for using them together, and a conclusion on how they can provide reliable development, save time and money, and empower users.

Vincent biret azure functions and flow (ottawa)Vincent Biret

This document outlines Vincent Biret's presentation on Azure Functions and Microsoft Flow. The presentation includes demos of using Flow to automate workflows across various services and using Functions to run pieces of code in the cloud. It also discusses pricing plans for Flow, supported languages for Functions, and best practices for integrating Flow and Functions. The presentation agenda covers introductions to Flow and Functions, demos of each, and a conclusion about how these tools can provide reliable development, save time and money, and empower users.

Application Insights for Integration DevelopersSriram Hariharan

How well does your solution work?, How do you know how well your solution works? In this session, Mike will show you how developers of integration solutions can use Azure Application Insights to complement existing monitoring solutions to provide developers with an additional level of insight into the way their solutions behave in the real world and how this can be applied to the types of integration components which we normally build.

Turning huge ships - Open Source and MicrosoftChristian Heilmann

Microsoft has become more open in recent years by open sourcing many products, making products cross-platform, and making training materials openly available. This open approach makes business sense for Microsoft as it attracts developers, allows employees flexibility, and taps into outside skills. Examples of Microsoft's success with open source include the Edge browser, Visual Studio Code editor, TypeScript transpiler, and ChakraCore JavaScript engine. The presenter encourages attendees to help promote Microsoft's open products and projects through conference talks, writing, and contributing translations and code.

Enhancing SharePoint with Responsive Web DesignEric Overfield

Building Scalable Web Applications using Microservices Architecture and NodeJ...Mitoc Group

Scalable applications are by nature resource intensive, expensive to build and difficult to manage. What if we can change this perception and help developers design full-stack applications that are low cost and low maintenance? This session describes the underlying architecture behind www.deep.mg, the microservices marketplace built by Mitoc Group using AngularJS, NodeJS and powered by abstracted services like AWS Lambda, Amazon CloudFront, Amazon DynamoDB, and so on. Eugene Istrati, Technology Partner at Mitoc Group, will dive deep into their approach to microservices architecture using serverless platform from AWS and demonstrate how anyone can use serverless computing to achieve high scalability, high availability, and high performance without huge efforts or expensive resources allocation.

Building Scalable Web Applications Using Microservices Architecture and NodeJ...NodejsFoundation

This document discusses building scalable web apps using microservices architecture and NodeJS inside AWS Lambda. It begins with an overview of challenges with web apps, including failures that can occur when developers are unavailable. It then defines serverless computing and microservices, and lists serverless options on AWS. It demonstrates a scalable todo web app built with microservices on AWS Lambda using the DEEP framework. The presentation concludes with Q&A and next steps.

Building great spa’s with angular js, asp.net mvc and webapiMaurice De Beijer [MVP]

This document discusses building single page applications (SPAs) using AngularJS, ASP.NET MVC, and ASP.NET WebAPI. It introduces AngularJS as a powerful JavaScript framework for building SPAs and CRUD applications. It notes that while AngularJS makes applications easy to build, large JavaScript apps can be hard to maintain. It then introduces ASP.NET WebAPI for building RESTful APIs and ASP.NET MVC as a server-side framework. It argues that combining AngularJS, WebAPI and MVC takes the best of both worlds, allowing structure from MVC while offloading UI tasks to AngularJS for performance. The document contains code demos of each technology and how they can work

AppNotch Enterpriseappnotch

Escaping the yellow bubble - rewriting Domino using MongoDb and AngularMark Leusink

Responsive Design for SavvyMoney Credit ScoreWendy Fischer

The document summarizes the process for implementing a responsive design for the SavvyMoney Credit Score product. It discusses constraints including a small team, outsourced development, and a focus on quick execution over extensive planning. It proposes a strategy of rolling out responsive design features sprint by sprint using breakpoints at 960px, 768px, and 480px. Challenges include the "Frankensite" effect of a partially responsive site and the designer's lack of coding skills and experience with responsive design. Potential responsive design tools are assessed, with Adobe Photoshop and Reflow proposed as a viable option due to integration with existing workflows and assets.

ESPC15 - Introduction to AngularJS in an Office 365 contextSébastien Levert

Every developer hears about AngularJS and all the magic it does for your 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. As a developer, you will learn the basic concepts of AngularJS and will be able to use those in an Office 365 context. You will be able to build rich applications (Single Page Application) and forms that will simplify your development process.

Intro to the SharePoint Framework Philly Code Camp Oct 2016Jennifer Kenderdine

Jennifer Kenderdine gave a presentation on the SharePoint Framework (SPFx) which allows building client-side web parts for SharePoint using modern web technologies. SPFx uses the same context and connection as the browser, allows controls to render in the DOM, and is framework agnostic. It supports both classic and modern pages in SharePoint. Developers need an Office 365 developer tenant and tools like Node.js, Yeoman and Gulp to build SPFx solutions. The development workflow involves creating a project, editing the web part with TypeScript, testing locally and deploying to a CDN.