├── .gitignore ├── README_assets └── screenshot.png ├── package.json ├── starter-project ├── package.json ├── public │ ├── scripts │ │ ├── app.js │ │ ├── config.js │ │ └── graphHelper.js │ ├── styles.css │ ├── index.html │ ├── views │ │ └── main.html │ └── controllers │ │ └── mainController.js ├── bower.json ├── server.js └── LICENSE ├── .gitattributes ├── public ├── scripts │ ├── config.js │ ├── app.js │ └── graphHelper.js ├── styles.css ├── index.html ├── views │ └── main.html └── controllers │ └── mainController.js ├── bower.json ├── server.js ├── LICENSE ├── README-Localized ├── README-zh-cn.md ├── README-zh-tw.md ├── README-ja-jp.md ├── README-pt-br.md ├── README-ru-ru.md ├── README-es-es.md ├── README-de-de.md └── README-fr-fr.md ├── README.md └── CONTRIBUTING.md /.gitignore: -------------------------------------------------------------------------------- 1 | logs/* 2 | !.gitkeep 3 | .vscode/ 4 | bower_components/ 5 | node_modules/ 6 | tmp 7 | .DS_Store 8 | .idea -------------------------------------------------------------------------------- /README_assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/microsoftgraph/angular-connect-sample/master/README_assets/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Microsoft-Graph-Connect-Angular", 3 | "version": "1.1.0", 4 | "license": "MIT", 5 | "main": "server.js", 6 | "dependencies": { 7 | "express": "^4.12.3", 8 | "morgan": "^1.5.2", 9 | "path": "^0.11.14" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /starter-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Microsoft-Graph-Connect-Angular", 3 | "version": "1.1.0", 4 | "license": "MIT", 5 | "main": "server.js", 6 | "dependencies": { 7 | "express": "^4.12.3", 8 | "morgan": "^1.5.2", 9 | "path": "^0.11.14" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /starter-project/public/scripts/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | (function () { 7 | angular.module('app', [ 8 | 'angular-loading-bar' 9 | ]) 10 | })(); 11 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /public/scripts/config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | var APPLICATION_CONFIG = { 7 | clientID: "ENTER_YOUR_CLIENT_ID", 8 | redirectUri: "http://localhost:8080/", 9 | interactionMode: "popUp", 10 | graphEndpoint: "https://graph.microsoft.com/v1.0/me", 11 | graphScopes: ["user.read mail.send"] 12 | }; -------------------------------------------------------------------------------- /starter-project/public/scripts/config.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | var APPLICATION_CONFIG = { 7 | clientID: "ENTER_YOUR_CLIENT_ID", 8 | redirectUri: "http://localhost:8080/", 9 | interactionMode: "popUp", 10 | graphEndpoint: "https://graph.microsoft.com/v1.0/me", 11 | graphScopes: ["user.read mail.send"] 12 | }; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microsoft-graph-connect-angular", 3 | "description": "", 4 | "main": "server.js", 5 | "authors": [ 6 | "Dan Silver " 7 | ], 8 | "homepage": "https://github.com/microsoftgraph/angular-connect-sample", 9 | "private": true, 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "graph-sdk": "https://github.com/microsoftgraph/msgraph-sdk-javascript.git" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /starter-project/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microsoft-graph-connect-angular", 3 | "description": "", 4 | "main": "server.js", 5 | "authors": [ 6 | "Dan Silver " 7 | ], 8 | "homepage": "https://github.com/microsoftgraph/angular-connect-sample", 9 | "private": true, 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "graph-sdk": "https://github.com/microsoftgraph/msgraph-sdk-javascript.git" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /public/scripts/app.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | (function () { 7 | angular.module('app', [ 8 | 'angular-loading-bar' 9 | ]) 10 | })(); 11 | 12 | var authToken; 13 | var graphClient = MicrosoftGraph.Client.init({ 14 | authProvider: function(done) { 15 | if (typeof authToken === "undefined") { 16 | done({err: "No auth token"}) 17 | } else { 18 | done(null, authToken); //first parameter takes an error if you can't get an access token 19 | } 20 | } 21 | }); -------------------------------------------------------------------------------- /public/styles.css: -------------------------------------------------------------------------------- 1 | .navbar-header { 2 | box-sizing: border-box; 3 | display: block; 4 | height: 40px; 5 | line-height: 40px; 6 | font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; 7 | font-size: 17px; 8 | padding-left: 20px; 9 | position: relative; 10 | font-weight: bold; 11 | } 12 | 13 | @media (min-width: 480px) { 14 | .navbar-header { 15 | float: left; 16 | margin-right: 20px; 17 | font-size: 20px; 18 | padding: 0; 19 | } 20 | } 21 | 22 | .ms-TextField { 23 | width: 300px; 24 | display: inline-block; 25 | } 26 | 27 | .icon-holder { 28 | display: inline-block; 29 | width: 30px; 30 | } 31 | 32 | .big-icon { 33 | font-size: 30px; 34 | top: 5px; 35 | position: relative; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /starter-project/public/styles.css: -------------------------------------------------------------------------------- 1 | .navbar-header { 2 | box-sizing: border-box; 3 | display: block; 4 | height: 40px; 5 | line-height: 40px; 6 | font-family: 'Segoe UI Semilight WestEuropean', 'Segoe UI Semilight', 'Segoe WP Semilight', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; 7 | font-size: 17px; 8 | padding-left: 20px; 9 | position: relative; 10 | font-weight: bold; 11 | } 12 | 13 | @media (min-width: 480px) { 14 | .navbar-header { 15 | float: left; 16 | margin-right: 20px; 17 | font-size: 20px; 18 | padding: 0; 19 | } 20 | } 21 | 22 | .ms-TextField { 23 | width: 300px; 24 | display: inline-block; 25 | } 26 | 27 | .icon-holder { 28 | display: inline-block; 29 | width: 30px; 30 | } 31 | 32 | .big-icon { 33 | font-size: 30px; 34 | top: 5px; 35 | position: relative; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | var express = require('express'); 7 | var app = express(); 8 | var morgan = require('morgan'); 9 | var path = require('path'); 10 | 11 | // Initialize variables. 12 | var port = process.env.PORT || 8080; 13 | 14 | // Configure morgan module to log all requests. 15 | app.use(morgan('dev')); 16 | 17 | // Set the front-end folder to serve public assets. 18 | app.use(express.static(__dirname + '/public')); 19 | app.use("/bower_components", express.static(path.join(__dirname, 'bower_components'))); 20 | 21 | // Set up our one route to the index.html file. 22 | app.get('*', function (req, res) { 23 | res.sendFile(path.join(__dirname + '/public/index.html')); 24 | }); 25 | 26 | // Start the server. 27 | app.listen(port); 28 | console.log('Listening on port ' + port + '...'); -------------------------------------------------------------------------------- /starter-project/server.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | var express = require('express'); 7 | var app = express(); 8 | var morgan = require('morgan'); 9 | var path = require('path'); 10 | 11 | // Initialize variables. 12 | var port = process.env.PORT || 8080; 13 | 14 | // Configure morgan module to log all requests. 15 | app.use(morgan('dev')); 16 | 17 | // Set the front-end folder to serve public assets. 18 | app.use(express.static(__dirname + '/public')); 19 | app.use("/bower_components", express.static(path.join(__dirname, 'bower_components'))); 20 | 21 | // Set up our one route to the index.html file. 22 | app.get('*', function (req, res) { 23 | res.sendFile(path.join(__dirname + '/public/index.html')); 24 | }); 25 | 26 | // Start the server. 27 | app.listen(port); 28 | console.log('Listening on port ' + port + '...'); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Microsoft Corporation 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /starter-project/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Microsoft Corporation 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Microsoft Graph Connect sample 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /starter-project/public/index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Microsoft Graph Connect sample 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /public/views/main.html: -------------------------------------------------------------------------------- 1 | 3 |
4 | 5 |
6 |
    7 |
  • Microsoft Graph Connect sample
    • 8 |
  • Disconnect
    • 9 |
10 |
11 | 12 | 13 |
14 |
15 |

Use the button below to connect to Microsoft Graph.

16 | 19 |
20 |
21 |

Hi, {{ main.displayName }}!

22 |

You're now connected to Microsoft Graph. Click the button below to send a message from your account using the Microsoft Graph API.

23 |
24 | 25 |
26 | 29 |
30 |

Successfully sent an email to {{ main.emailAddressSent }}!

31 |
32 |
33 |

Something went wrong, couldn't send an email.

34 |
35 |
36 |
37 |
-------------------------------------------------------------------------------- /starter-project/public/views/main.html: -------------------------------------------------------------------------------- 1 | 3 |
4 | 5 |
6 |
    7 |
  • Microsoft Graph Connect sample
    • 8 |
  • Disconnect
    • 9 |
10 |
11 | 12 | 13 |
14 |
15 |

Use the button below to connect to Microsoft Graph.

16 | 19 |
20 |
21 |

Hi, {{ main.displayName }}!

22 |

You're now connected to Microsoft Graph. Click the button below to send a message from your account using the Microsoft Graph API.

23 |
24 | 25 |
26 | 29 |
30 |

Successfully sent an email to {{ main.emailAddressSent }}!

31 |
32 |
33 |

Something went wrong, couldn't send an email.

34 |
35 |
36 |
37 |
-------------------------------------------------------------------------------- /starter-project/public/scripts/graphHelper.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | "use strict"; 7 | 8 | function createApplication(applicationConfig) { 9 | 10 | var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, function (errorDesc, token, error, tokenType) { 11 | // Called after loginRedirect or acquireTokenPopup 12 | }); 13 | 14 | return clientApplication; 15 | } 16 | 17 | var clientApplication; 18 | 19 | (function () { 20 | angular 21 | .module('app') 22 | .service('GraphHelper', ['$http', function ($http) { 23 | 24 | // Initialize the auth request 25 | clientApplication = createApplication(APPLICATION_CONFIG); 26 | 27 | return { 28 | 29 | // Sign in and sign out the user 30 | login: function login() { 31 | clientApplication.loginPopup(APPLICATION_CONFIG.graphScopes).then(function (idToken) { 32 | clientApplication.acquireTokenSilent(APPLICATION_CONFIG.graphScopes).then(function (accessToken) { 33 | localStorage.token = accessToken; 34 | window.location.reload(); 35 | }, function (error) { 36 | clientApplication.acquireTokenPopup(APPLICATION_CONFIG.graphScopes).then(function (accessToken) { 37 | localStorage.token = accessToken; 38 | }, function (error) { 39 | window.alert("Error acquiring the popup:\n" + error); 40 | }); 41 | }) 42 | }, function (error) { 43 | window.alert("Error during login:\n" + error); 44 | }); 45 | }, 46 | logout: function logout() { 47 | clientApplication.logout(); 48 | delete localStorage.token; 49 | delete localStorage.user; 50 | }, 51 | 52 | // Get the profile of the current user 53 | 54 | // Send an email on behalf of the current user 55 | 56 | } 57 | }]); 58 | })(); -------------------------------------------------------------------------------- /public/scripts/graphHelper.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | 7 | "use strict"; 8 | 9 | function createApplication(applicationConfig) { 10 | 11 | var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, null, function (errorDesc, token, error, tokenType) { 12 | // Called after loginRedirect or acquireTokenPopup 13 | }); 14 | 15 | return clientApplication; 16 | } 17 | 18 | var clientApplication; 19 | 20 | (function () { 21 | angular 22 | .module('app') 23 | .service('GraphHelper', ['$http', function ($http) { 24 | 25 | // Initialize the auth request. 26 | clientApplication = createApplication(APPLICATION_CONFIG); 27 | 28 | return { 29 | 30 | // Sign in and sign out the user. 31 | login: function login() { 32 | clientApplication.loginPopup(APPLICATION_CONFIG.graphScopes).then(function (idToken) { 33 | clientApplication.acquireTokenSilent(APPLICATION_CONFIG.graphScopes).then(function (accessToken) { 34 | localStorage.token = accessToken; 35 | window.location.reload(); 36 | }, function (error) { 37 | clientApplication.acquireTokenPopup(APPLICATION_CONFIG.graphScopes).then(function (accessToken) { 38 | localStorage.token = accessToken; 39 | }, function (error) { 40 | window.alert("Error acquiring the popup:\n" + error); 41 | }); 42 | }) 43 | }, function (error) { 44 | window.alert("Error during login:\n" + error); 45 | }); 46 | }, 47 | logout: function logout() { 48 | clientApplication.logout(); 49 | delete localStorage.token; 50 | delete localStorage.user; 51 | }, 52 | 53 | // Get the profile of the current user. 54 | me: function me() { 55 | return graphClient.api('/me').get(); 56 | }, 57 | 58 | // Send an email on behalf of the current user. 59 | sendMail: function sendMail(email) { 60 | return graphClient.api('/me/sendMail').post({ 'message' : email, 'saveToSentItems': true }); 61 | } 62 | } 63 | }]); 64 | })(); 65 | -------------------------------------------------------------------------------- /README-Localized/README-zh-cn.md: -------------------------------------------------------------------------------- 1 | # 使用 Microsoft Graph 的 Office 365 Angular Connect 示例 2 | 3 | 连接到 Office 365 是每个应用开始使用 Office 365 服务和数据必须采取的第一步。该示例演示如何连接并调用 Microsoft Graph API（旧称 Office 365 统一 API），以及如何使用 Office 结构 UI 创建 Office 365 体验。 4 | 5 | > 注意：尝试 [Office 365 API 入门](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup)页面，其简化了注册，使您可以更快地运行该示例。 6 | 7 | ![Office 365 Angular Connect 示例的屏幕截图](../README assets/screenshot.png) 8 | 9 | ## 先决条件 10 | 11 | 要使用 Office 365 Angular Connect 示例，您需要以下内容： 12 | * [Node.js](https://nodejs.org/)。需要提供节点才能在开发服务器上运行示例和安装依赖项。 13 | * Office 365 帐户。您可以注册 [Office 365 开发人员订阅](https://aka.ms/devprogramsignup) 其中包含开始构建 Office 365 应用所需的资源。 14 | 15 | > 注意：如果您已经订阅，之前的链接会将您转至包含以下信息的页面：*抱歉，您无法将其添加到当前帐户*。在这种情况下，请使用当前 Office 365 订阅中的帐户。 16 | * 用于注册您的应用程序的 Microsoft Azure 租户。Azure Active Directory (AD) 为应用程序提供了用于进行身份验证和授权的标识服务。您还可在此处获得试用订阅：[Microsoft Azure](https://account.windowsazure.com/SignUp)。 17 | 18 | > 重要说明：您还需要确保您的 Azure 订阅已绑定到 Office 365 租户。要执行这一操作，请参阅 Active Directory 团队的博客文章：[创建和管理多个 Microsoft Azure Active Directory](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx)。**添加新目录**一节将介绍如何执行此操作。您还可以参阅[设置 Office 365 开发环境](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription)和**关联您的 Office 365 帐户和 Azure AD 以创建并管理应用**一节获取详细信息。 19 | * 在 Azure 中注册的应用程序的客户端 ID。必须向该示例应用程序授予**以登录用户身份发送邮件**和**以登录用户身份发送邮件**权限以使用 **Microsoft Graph** 应用程序。[在 Azure 中添加 Web 应用程序](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp)并向其[授予适当的权限](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure)。 20 | 21 | > 注意：在应用注册过程中，务必将 **http://127.0.0.1:8080/** 指定为**登录 URL**。 22 | 23 | ## 配置并运行应用 24 | 25 | 1. 使用最喜爱的 IDE，打开 *public/scripts* 中的 **config.js**。 26 | 2. 用所注册的 Azure 应用程序的客户端 ID 替换 *ENTER_YOUR_CLIENT_ID*。 27 | 3. 通过在命令行的项目根目录中运行 ```npm install``` 来安装项目依赖项和节点的程序包管理器 (npm)。 28 | 4. 通过在项目根目录中运行 ```node server.js``` 启动开发服务器。 29 | 5. 导航到 Web 浏览器中的 ```http://127.0.0.1:8080/```。 30 | 31 | 若要了解有关该示例的详细信息，请参阅 [graph.microsoft.io 上的 Angular 演练](http://graph.microsoft.io/docs/platform/angular)。 32 | 33 | ## 问题和意见 34 | 35 | 我们乐意倾听您有关 Office 365 Angular Connect 示例的反馈。您可以在该存储库中的[问题](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues)部分将问题和建议发送给我们。 36 | 37 | 我们非常重视您的反馈意见。请在[堆栈溢出](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph)上与我们联系。使用 [MicrosoftGraph] 和 [office365] 标记出您的问题。 38 | 39 | ## 其他资源 40 | 41 | * [Office 开发人员中心](http://dev.office.com/) 42 | * [Microsoft Graph API](http://graph.microsoft.io) 43 | * [Angular Office 365 Profile 示例](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office UI 结构](http://dev.office.com/fabric) 45 | 46 | ## 版权 47 | 版权所有 (c) 2016 Microsoft。保留所有权利。 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-zh-tw.md: -------------------------------------------------------------------------------- 1 | # 使用 Microsoft Graph 的 Office 365 Angular Connect 範例 2 | 3 | 連接到 Office 365 是每個應用程式要開始使用 Office 365 服務和資料時必須採取的第一個步驟。此範例示範如何連接而後呼叫 Microsoft Graph API (之前稱為 Office 365 統一 API)，並使用 Office Fabric UI 來打造 Office 365 經驗。 4 | 5 | > 附註：嘗試可簡化註冊的 [Office 365 API 入門](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup)頁面，以便您能更快速地執行這個範例。 6 | 7 | ![Office 365 Angular Connect 範例螢幕擷取畫面](../README assets/screenshot.png) 8 | 9 | ## 必要條件 10 | 11 | 若要使用 Office 365 Angular Connect 範例，您需要下列各項： 12 | * [Node.js](https://nodejs.org/)。需要有 Node 才能在開發伺服器上執行範例以及安裝相依項目。 13 | * Office 365 帳戶。您可以註冊 [Office 365 開發人員訂閱](https://aka.ms/devprogramsignup)，其中包含在開始建置 Office 365 應用程式時，您所需的資源。 14 | 15 | > 附註：如果您已有訂用帳戶，則先前的連結會讓您連到顯示 *抱歉，您無法將之新增到您目前的帳戶* 訊息的頁面。在此情況下，請使用您目前的 Office 365 訂用帳戶所提供的帳戶。 16 | * 用來註冊您的應用程式的 Microsoft Azure 租用戶。Azure Active Directory (AD) 會提供識別服務，以便應用程式用於驗證和授權。在這裡可以取得試用版的訂用帳戶：[Microsoft Azure](https://account.windowsazure.com/SignUp)。 17 | 18 | > 重要事項：您還需要確定您的 Azure 訂用帳戶已繫結至您的 Office 365 租用戶。若要執行這項操作，請參閱 Active Directory 小組的部落格文章：[建立和管理多個 Windows Azure Active Directory](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx)。**新增目錄**一節將說明如何執行這項操作。如需詳細資訊，也可以參閱[設定 Office 365 開發環境](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription)和**建立 Office 365 帳戶與 Azure AD 的關聯以便建立和管理應用程式**一節。 19 | * 在 Azure 中註冊之應用程式的用戶端識別碼。此範例應用程式必須取得 **Microsoft Graph** 應用程式的 [以登入的使用者身分傳送郵件] 權限。[在 Azure 中新增 Web 應用程式](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp)和[授與適當的權限](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure)給它。 20 | 21 | > 附註：在應用程式註冊過程中，請務必指定 **http://127.0.0.1:8080/** 做為 [登入 URL]。 22 | 23 | ## 設定和執行應用程式 24 | 25 | 1. 使用您最愛的 IDE，開啟 *public/scripts* 中的 **config.js**。 26 | 2. 用已註冊之 Azure 應用程式的用戶端識別碼來取代 *ENTER_YOUR_CLIENT_ID*。 27 | 3. 在命令列上執行專案根目錄中的 ```npm install```，隨著 Node 的封裝管理員 (npm) 一起安裝專案相依項目。 28 | 4. 執行專案根目錄中的 ```node server.js``` 以啟動開發伺服器。 29 | 5. 在網頁瀏覽器中瀏覽至 ```http://127.0.0.1:8080/```。 30 | 31 | 若要深入了解此範例，請造訪 [graph.microsoft.io 上的 Angular 逐步解說](http://graph.microsoft.io/docs/platform/angular)。 32 | 33 | ## 問題與意見 34 | 35 | 我們很樂於收到您對於 Office 365 Angular Connect 範例的意見反應。您可以在此儲存機制的[問題](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues)區段中，將您的問題及建議傳送給我們。 36 | 37 | 我們很重視您的意見。請透過 [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph) 與我們連絡。以 [MicrosoftGraph] 和 [office365] 標記您的問題。 38 | 39 | ## 其他資源 40 | 41 | * [Office 開發中心](http://dev.office.com/) 42 | * [Microsoft Graph API](http://graph.microsoft.io) 43 | * [適用於 Angular 的 Office 365 Profile 範例](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office UI 結構](http://dev.office.com/fabric) 45 | 46 | ## 著作權 47 | Copyright (c) 2016 Microsoft.著作權所有，並保留一切權利。 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-ja-jp.md: -------------------------------------------------------------------------------- 1 | # Microsoft Graph を使った Office 365 Angular Connect サンプル 2 | 3 | 各アプリで Office 365 のサービスとデータの操作を開始するため、最初に Office 365 に接続する必要があります。このサンプルでは、Microsoft Graph API (以前は Office 365 統合 API と呼ばれていた) に接続してから呼び出す方法を示し、Office Fabric UI を使って Office 365 エクスペリエンスを作成します。 4 | 5 | > 注:このサンプルをより迅速に実行するため、「[Office 365 API を使う](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup)」ページに記載された登録の簡略化をお試しください。 6 | 7 | [Office 365 Angular Connect サンプルのスクリーンショット](../README assets/screenshot.png) 8 | 9 | ## 前提条件 10 | 11 | Office 365 Angular Connect サンプルを使うには、次のものが必要です: 12 | * [Node.js](https://nodejs.org/)。Node は、開発サーバーでサンプルを実行して、依存関係をインストールするために必要です。 13 | * Office 365 アカウント。[Office 365 Developer](https://aka.ms/devprogramsignup) サブスクリプションにサイン アップすることができます。ここには、Office 365 アプリのビルドを開始するために必要なリソースが含まれています。 14 | 15 | > 注: サブスクリプションが既に存在する場合、上記のリンクをクリックすると、*申し訳ありません、現在のアカウントに追加できません* と表示されたページに移動します。その場合は、現在使用している Office 365 サブスクリプションのアカウントをご利用いただけます。 16 | * アプリケーションを登録する Microsoft Azure テナント。Azure Active Directory (AD) は、アプリケーションが認証と承認に使用する ID サービスを提供します。試用版サブスクリプションは、[Microsoft Azure](https://account.windowsazure.com/SignUp) で取得できます。 17 | 18 | > 重要事項: Azure サブスクリプションが Office 365 テナントにバインドされていることを確認する必要があります。確認するには、Active Directory チームのブログ投稿「[複数の Windows Azure Active Directory を作成および管理する](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx)」を参照してください。「**新しいディレクトリを追加する**」セクションで、この方法について説明しています。また、詳細については、「[Office 365 開発環境をセットアップする](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription)」や「**Office 365 アカウントを Azure AD と関連付けてアプリを作成および管理する**」セクションも参照してください。 19 | * Azure に登録されたアプリケーションのクライアント ID。このサンプル アプリケーションには、**サインインしているユーザーとしてメールを送信する**アクセス許可と、**Microsoft Graph** アプリケーションの**サインインしているユーザーとしてメールを送信する**アクセス許可を付与する必要があります。[Azure に Web アプリケーションを追加](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp)し、[適切なアクセス許可を付与](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure)します。 20 | 21 | > 注:アプリ登録プロセス時に、**サインオン URL** として **http://127.0.0.1:8080/** を必ず指定します。 22 | 23 | ## アプリの構成と実行 24 | 25 | 1. 任意の IDE を使って、*パブリック/スクリプト* で **config.js** を開きます。 26 | 2. *ENTER_YOUR_CLIENT_ID* を登録済みの Azure アプリケーションのクライアント ID と置き換えます。 27 | 3. コマンド ライン上のプロジェクトのルート ディレクトリで ```npm install``` を実行して、ノードのパッケージ マネージャー (npm) でプロジェクトの依存関係をインストールします。 28 | 4. プロジェクトのルート ディレクトリで ```node server.js``` を実行して、開発サーバーを起動します。 29 | 5. Web ブラウザーで ```http://127.0.0.1:8080/``` に移動します。 30 | 31 | サンプルについて詳しくは、「[graph.microsoft.io の Angular に関するチュートリアル](http://graph.microsoft.io/docs/platform/angular)」をご覧ください。 32 | 33 | ## 質問とコメント 34 | 35 | Office 365 Angular Connect サンプルについて、Microsoft にフィードバックをお寄せください。質問や提案につきましては、このリポジトリの「[問題](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues)」セクションに送信できます。 36 | 37 | お客様からのフィードバックを重視しています。[スタック・オーバーフロー](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph)でご連絡いただけます。質問には [MicrosoftGraph] と [office365] でタグ付けしてください。 38 | 39 | ## その他の技術情報 40 | 41 | * [Office デベロッパー センター](http://dev.office.com/) 42 | * [Microsoft Graph API](http://graph.microsoft.io) 43 | * [Angular 用 Office 365 プロファイル サンプル](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office の UI ファブリック](http://dev.office.com/fabric) 45 | 46 | ## 著作権 47 | Copyright (c) 2016 Microsoft. All rights reserved. 48 | 49 | 50 | -------------------------------------------------------------------------------- /starter-project/public/controllers/mainController.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | (function () { 7 | angular 8 | .module('app') 9 | .controller('MainController', MainController); 10 | 11 | function MainController($scope, $http, $log, GraphHelper) { 12 | let vm = this; 13 | 14 | // View model properties 15 | vm.displayName; 16 | vm.emailAddress; 17 | vm.emailAddressSent; 18 | vm.requestSuccess; 19 | vm.requestFinished; 20 | 21 | // View model methods 22 | vm.sendMail = sendMail; 23 | vm.login = login; 24 | vm.logout = logout; 25 | vm.isAuthenticated = isAuthenticated; 26 | vm.initAuth = initAuth; 27 | 28 | ///////////////////////////////////////// 29 | // End of exposed properties and methods. 30 | 31 | function initAuth() { 32 | // Check initial connection status. 33 | if (localStorage.token) { 34 | processAuth(); 35 | } 36 | } 37 | 38 | // Set the default headers and user properties 39 | 40 | vm.initAuth(); 41 | 42 | function isAuthenticated() { 43 | return localStorage.getItem('user') !== null; 44 | } 45 | 46 | function login() { 47 | GraphHelper.login(); 48 | } 49 | 50 | function logout() { 51 | GraphHelper.logout(); 52 | } 53 | 54 | // Send an email on behalf of the current user 55 | 56 | 57 | // Get the HTMl for the email to send. 58 | function getEmailContent() { 59 | return "

Congratulations " + vm.displayName + ",

This is a message from the Microsoft Graph Connect sample. You are well on your way to incorporating Microsoft Graph endpoints in your apps.

What’s next?

Give us feedback

  • If you have any trouble running this sample, please log an issue.
  • For general questions about the Microsoft Graph API, post to Stack Overflow. Make sure that your questions or comments are tagged with [microsoftgraph].

Thanks and happy coding!
Your Microsoft Graph samples development team

"; 60 | }; 61 | 62 | }; 63 | })(); -------------------------------------------------------------------------------- /README-Localized/README-pt-br.md: -------------------------------------------------------------------------------- 1 | # Exemplo de conexão com o Office 365 para Angular usando o Microsoft Graph 2 | 3 | A primeira etapa para que os aplicativos comecem a funcionar com dados e serviços do Office 365 é estabelecer uma conexão com essa plataforma. Este exemplo mostra como conectar e chamar a API do Microsoft Graph (antiga API unificada do Office 365) e usa o Office Fabric UI para criar uma experiência do Office 365. 4 | 5 | > Observação: Experimente a página [Introdução às APIs do Office 365](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup), que simplifica o registro para que você possa executar esse exemplo com mais rapidez. 6 | 7 | ![Captura de tela do exemplo do Office 365 para Angular](../README assets/screenshot.png) 8 | 9 | ## Pré-requisitos 10 | 11 | Para usar o exemplo de conexão com o Office 365 para Angular, é necessário o seguinte: 12 | * [Node.js](https://nodejs.org/). O nó é necessário para executar o exemplo em um servidor de desenvolvimento e para instalar as dependências. 13 | * Uma conta do Office 365. Você pode se inscrever para [uma assinatura do Office 365 Developer](https://aka.ms/devprogramsignup), que inclui os recursos de que você precisa para começar a criar aplicativos do Office 365. 14 | 15 | > Observação: Caso já tenha uma assinatura, o link anterior direciona você para uma página com a mensagem *Não é possível adicioná-la à sua conta atual*. Nesse caso, use uma conta de sua assinatura atual do Office 365. 16 | * Um locatário do Microsoft Azure para registrar o seu aplicativo. O Active Directory (AD) do Azure fornece serviços de identidade que os aplicativos usam para autenticação e autorização. Você pode adquirir uma assinatura de avaliação aqui: [Microsoft Azure](https://account.windowsazure.com/SignUp). 17 | 18 | > Importante: Você também deve assegurar que a sua assinatura do Azure esteja vinculada ao seu locatário do Office 365. Para saber como fazer isso, confira a postagem de blog da equipe do Active Directory: [Criar e gerenciar vários Microsoft Azure Active Directory](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx). A seção **Adicionar um novo diretório** explica como fazer isso. Para saber mais, confira o artigo [Configurar o seu ambiente de desenvolvimento do Office 365](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription) e a seção **Associar a sua conta do Office 365 ao Azure AD para criar e gerenciar aplicativos**. 19 | * Uma ID do cliente de um aplicativo registrado no Microsoft Azure. Este exemplo de aplicativo deve ter permissão para **Enviar email como usuário conectado** e **Enviar email como usuário conectado** para o aplicativo **Microsoft Graph**. Para isso, [adicione um aplicativo Web no Microsoft Azure](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp) e [conceda as permissões adequadas](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure). 20 | 21 | > Observação: Durante o processo de registro do aplicativo, não deixe de especificar **http://127.0.0.1:8080/** como **URL de Entrada**. 22 | 23 | ## Configurar e executar o aplicativo 24 | 25 | 1. Abra **config.js** em *public/scripts* usando o seu IDE favorito. 26 | 2. Substitua *ENTER_YOUR_CLIENT_ID* pela ID do cliente do aplicativo Azure registrado. 27 | 3. Instale as dependências do projeto com o NPM (Gerenciador de Pacotes de Nós) executando ```npm install``` no diretório raiz do projeto, na linha de comando. 28 | 4. Inicie o servidor de desenvolvimento executando ```node server.js``` no diretório raiz do projeto. 29 | 5. Acesse ```http://127.0.0.1:8080/``` no navegador da Web. 30 | 31 | Para saber mais sobre o exemplo, confira a [explicação passo a passo sobre o Angular em graph.microsoft.io](http://graph.microsoft.io/docs/platform/angular). 32 | 33 | ## Perguntas e comentários 34 | 35 | Gostaríamos de saber a sua opinião sobre o exemplo de conexão com o Office 365 para Angular. Você pode enviar perguntas e sugestões na seção [Problemas](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues) deste repositório. 36 | 37 | Os seus comentários são importantes para nós. Junte-se a nós na página do [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph). Marque as suas perguntas com [MicrosoftGraph] e [office365]. 38 | 39 | ## Recursos adicionais 40 | 41 | * [Centro de Desenvolvimento do Office](http://dev.office.com/) 42 | * [API do Microsoft Graph](http://graph.microsoft.io) 43 | * [Exemplo de perfil do Office 365 para Angular](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office UI Fabric](http://dev.office.com/fabric) 45 | 46 | ## Direitos autorais 47 | Copyright © 2016 Microsoft. Todos os direitos reservados. 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-ru-ru.md: -------------------------------------------------------------------------------- 1 | # Пример приложения Angular, подключающегося к Office 365 и использующего Microsoft Graph 2 | 3 | Подключение к Office 365 — это первый шаг, который должно выполнить каждое приложение, чтобы начать работу со службами и данными Office 365. В этом примере показано, как подключить и вызвать API Microsoft Graph (прежнее название — единый API Office 365), а также использовать платформу Office UI Fabric для работы с Office 365. 4 | 5 | > Примечание. Перейдите на страницу [Начало работы с API Office 365](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup) для упрощенной регистрации, чтобы ускорить запуск этого примера. 6 | 7 | ![Снимок экрана приложения Angular Connect для Office 365](../README assets/screenshot.png) 8 | 9 | ## Необходимые условия 10 | 11 | Чтобы использовать пример приложения Angular, подключающегося к Office 365, требуются следующие компоненты: 12 | * [Node.js](https://nodejs.org/). Платформа Node необходима для установки зависимостей и запуска примера на сервере разработки. 13 | * Учетная запись Office 365. Вы можете [подписаться на план Office 365 для разработчиков](https://aka.ms/devprogramsignup), включающий ресурсы, которые необходимы для создания приложений Office 365. 14 | 15 | > Примечание. Если у вас уже есть подписка, при выборе приведенной выше ссылки откроется страница с сообщением *К сожалению, вы не можете добавить это к своей учетной записи*. В этом случае используйте учетную запись, сопоставленную с текущей подпиской на Office 365. 16 | * Клиент Microsoft Azure для регистрации приложения. В Azure Active Directory (AD) доступны службы идентификации, которые приложения используют для проверки подлинности и авторизации. Здесь можно получить пробную подписку: [Microsoft Azure](https://account.windowsazure.com/SignUp). 17 | 18 | > Важно! Убедитесь, что ваша подписка на Azure привязана к клиенту Office 365. Для этого просмотрите запись в блоге команды Active Directory, посвященную [созданию нескольких каталогов Microsoft Azure AD и управлению ими](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx). Инструкции приведены в разделе о **добавлении нового каталога**. Дополнительные сведения см. в статье [Как настроить среду разработки для Office 365](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription) и, в частности, в разделе **Связывание Azure AD и учетной записи Office 365 для создания приложений и управления ими**. 19 | * Идентификатор клиента для приложения, зарегистрированного в Azure. Этому примеру приложения необходимо предоставить разрешения **Отправка почты от имени вошедшего пользователя** и **Отправка почты от имени вошедшего пользователя** для приложения, использующего **Microsoft Graph**. [Добавьте приложение в Azure](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp) и [предоставьте ему необходимые разрешения](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure). 20 | 21 | > Примечание. При регистрации приложения укажите **http://127.0.0.1:8080/** как значение параметра **URL-адрес входа**. 22 | 23 | ## Настройка и запуск приложения 24 | 25 | 1. С помощью используемого интерфейса IDE откройте файл **config.js** в папке *public/scripts*. 26 | 2. Замените *ENTER_YOUR_CLIENT_ID* на идентификатор клиента для зарегистрированного в Azure приложения. 27 | 3. Установите зависимости проекта с помощью диспетчера пакетов Node (npm), выполнив команду ```npm install``` для корневого каталога проекта в командной строке. 28 | 4. Запустите сервер разработки, выполнив команду ```node server.js``` для корневого каталога проекта. 29 | 5. Введите адрес ```http://127.0.0.1:8080/``` в веб-браузере. 30 | 31 | Дополнительные сведения о примере см. в [пошаговых инструкциях касательно Angular на сайте graph.microsoft.io](http://graph.microsoft.io/docs/platform/angular). 32 | 33 | ## Вопросы и комментарии 34 | 35 | Мы будем рады получить от вас отзывы о примере приложения Angular, подключающегося к Office 365. Вы можете отправлять нам вопросы и предложения в разделе [Issues](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues) этого репозитория. 36 | 37 | Ваш отзыв важен для нас. Для связи с нами используйте сайт [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph). Помечайте свои вопросы тегами [MicrosoftGraph] и [office365]. 38 | 39 | ## Дополнительные ресурсы 40 | 41 | * [Центр разработки для Office](http://dev.office.com/) 42 | * [API Microsoft Graph](http://graph.microsoft.io) 43 | * [Пример профиля Office 365 для Angular](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office UI Fabric](http://dev.office.com/fabric) 45 | 46 | ## Авторское право 47 | (c) Корпорация Майкрософт (Microsoft Corporation), 2016. Все права защищены. 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-es-es.md: -------------------------------------------------------------------------------- 1 | # Ejemplo Connect de Angular para Office 365 con Microsoft Graph 2 | 3 | Conectarse a Office 365 es el primer paso que debe realizar cada aplicación para empezar a trabajar con los datos y servicios de Office 365. Este ejemplo muestra cómo conectar y cómo llamar después a la API de Microsoft Graph (anteriormente denominada API unificada de Office 365), y usa la interfaz de usuario Fabric de Office para crear una experiencia de Office 365. 4 | 5 | > Nota: Consulte la página [Introducción a las API de Office 365](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup), que simplifica el registro para que este ejemplo se ejecute más rápidamente. 6 | 7 | [Captura de pantalla de ejemplo Connect de Angular de Office 365](../README assets/screenshot.png) 8 | 9 | ## Requisitos previos 10 | 11 | Para usar el ejemplo Connect de Angular para Office 365, necesita lo siguiente: 12 | * [Node.js](https://nodejs.org/). Node es necesario para ejecutar el ejemplo en un servidor de desarrollo y para instalar las dependencias. 13 | * Una cuenta de Office 365. Puede registrarse para obtener [una suscripción a Office 365 Developer](https://aka.ms/devprogramsignup) que incluye los recursos que necesita para empezar a compilar aplicaciones de Office 365. 14 | 15 | > Nota: Si ya dispone de una suscripción, el vínculo anterior le dirige a una página con el mensaje *No se puede agregar a su cuenta actual*. En ese caso, use una cuenta de su suscripción actual de Office 365. 16 | * Un inquilino de Microsoft Azure para registrar la aplicación. Azure Active Directory (AD) proporciona servicios de identidad que las aplicaciones usan para autenticación y autorización. Puede adquirir una suscripción de prueba aquí: [Microsoft Azure](https://account.windowsazure.com/SignUp). 17 | 18 | > Importante: También necesita asegurarse de que su suscripción de Azure está enlazada a su inquilino de Office 365. Para ello, consulte la publicación del blog del equipo de Active Directory, [Crear y administrar varios directorios de Windows Azure Active Directory](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx). La sección **Agregar un nuevo directorio** le explicará cómo hacerlo. Para obtener más información, también puede consultar [Configurar el entorno de desarrollo de Office 365](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription) y la sección **Asociar su cuenta de Office 365 con Azure AD para crear y administrar aplicaciones**. 19 | * Un identificador de cliente de una aplicación registrada en Azure. A esta aplicación de ejemplo se le debe conceder el permiso **Enviar correo como usuario con sesión iniciada** para la aplicación **Microsoft Graph**. [Agregar una aplicación web en Azure](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp) y [concederle los permisos adecuados](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure). 20 | 21 | > Nota: Durante el proceso de registro de la aplicación, asegúrese de especificar **http://127.0.0.1:8080/** como la **dirección URL de inicio de sesión**. 22 | 23 | ## Configurar y ejecutar la aplicación 24 | 25 | 1. Con su IDE favorito, abra **config.js** en *public/scripts*. 26 | 2. Reemplace *ENTER_YOUR_CLIENT_ID* por el identificador de cliente de la aplicación registrada en Azure. 27 | 3. Instale las dependencias del proyecto con el administrador de paquetes de Node (npm) ejecutando ```npm install``` en el directorio raíz del proyecto, en la línea de comandos. 28 | 4. Inicie el servidor de desarrollo mediante la ejecución de ```node server.js``` en el directorio raíz del proyecto. 29 | 5. Vaya a ```http://127.0.0.1:8080/``` en el explorador web. 30 | 31 | Para obtener más información sobre el ejemplo, consulte el [Tutorial de Angular en graph.microsoft.io](http://graph.microsoft.io/docs/platform/angular). 32 | 33 | ## Preguntas y comentarios 34 | 35 | Nos encantaría recibir sus comentarios acerca del ejemplo Connect de Angular para Office 365. Puede enviarnos sus preguntas y sugerencias a través de la sección [Problemas](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues) de este repositorio. 36 | 37 | Su opinión es importante para nosotros. Conecte con nosotros en [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph). Etiquete sus preguntas con [MicrosoftGraph] y [office365]. 38 | 39 | ## Recursos adicionales 40 | 41 | * [Centro para desarrolladores de Office](http://dev.office.com/) 42 | * [API de Microsoft Graph](http://graph.microsoft.io) 43 | * [Ejemplo de perfil de Office 365 para Angular](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office UI Fabric](http://dev.office.com/fabric) 45 | 46 | ## Copyright 47 | Copyright (c) 2016 Microsoft. Todos los derechos reservados. 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-de-de.md: -------------------------------------------------------------------------------- 1 | # Office 365 Angular Connect-Beispiel unter Verwendung von Microsoft Graph 2 | 3 | Für die Arbeit mit Office 365-Diensten und -Daten muss jede App zunächst eine Verbindung zu Office 365 herstellen. In diesem Beispiel wird gezeigt, wie die Verbindung zu und dann der Aufruf der Microsoft Graph-API (wurde zuvor als vereinheitlichte Office 365-API bezeichnet) erfolgt. Ferner wird darin die Office Fabric-Benutzeroberfläche zum Erstellen einer Office 365-Erfahrung verwendet. 4 | 5 | > Hinweis: Rufen Sie die Seite [Erste Schritte mit Office 365-APIs](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup) auf. Auf dieser wird die Registrierung vereinfacht, damit Sie dieses Beispiel schneller ausführen können. 6 | 7 | ![Screenshot des Office 365 Angular Connect-Beispiels](../README assets/screenshot.png) 8 | 9 | ## Voraussetzungen 10 | 11 | Zum Verwenden des Office 365 Angular Connect-Beispiels benötigen Sie Folgendes: 12 | * [Node.js](https://nodejs.org/). Node ist für das Ausführen des Beispiels auf einem Entwicklungsserver und für das Installieren der Abhängigkeiten erforderlich. 13 | * Ein Office 365-Konto. Sie können sich für ein [Office 365-Entwicklerabonnement](https://aka.ms/devprogramsignup) registrieren, das alle Ressourcen umfasst, die Sie zum Einstieg in die Entwicklung von Office 365-Apps benötigen. 14 | 15 | > Hinweis: Wenn Sie bereits über ein Abonnement verfügen, gelangen Sie über den vorherigen Link zu einer Seite mit der Meldung „Leider können Sie Ihrem aktuellen Konto diesen Inhalt nicht hinzufügen“. Verwenden Sie in diesem Fall ein Konto aus Ihrem aktuellen Office 365-Abonnement. 16 | * Ein Microsoft Azure-Mandant zum Registrieren Ihrer Anwendung. Von Azure Active Directory (AD) werden Identitätsdienste bereitgestellt, die durch Anwendungen für die Authentifizierung und Autorisierung verwendet werden. Hier kann ein Testabonnement erworben werden: [Microsoft Azure](https://account.windowsazure.com/SignUp) 17 | 18 | > Wichtig: Sie müssen zudem sicherstellen, dass Ihr Azure-Abonnement an Ihren Office 365-Mandanten gebunden ist. Rufen Sie dafür den Blogpost [Creating and Managing Multiple Windows Azure Active Directories](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx) des Active Directory-Teams auf. Im Abschnitt **Adding a new directory** finden Sie Informationen über die entsprechende Vorgehensweise. Weitere Informationen finden Sie zudem unter [Einrichten Ihrer Office 365-Entwicklungsumgebung](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription) im Abschnitt **Verknüpfen Ihres Office 365-Kontos mit Azure AD zum Erstellen und Verwalten von Apps**. 19 | * Eine Client-ID einer in Azure registrierten Anwendung. Dieser Beispielanwendung müssen die Berechtigungen **Senden von E-Mails als angemeldeter Benutzer** und **Senden von E-Mails als angemeldeter Benutzer** für die **Microsoft Graph**-Anwendung gewährt werden. [Fügen Sie eine Webanwendung in Azure hinzu](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp), und [gewähren Sie ihr die entsprechenden Berechtigungen](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure). 20 | 21 | > Hinweis: Stellen Sie während des App-Registrierungsvorgangs sicher, dass Sie **http://127.0.0.1:8080/** als die **Anmelde-URL** angeben. 22 | 23 | ## Konfigurieren und Ausführen der App 24 | 25 | 1. Öffnen Sie unter Verwendung Ihrer bevorzugten IDE die Datei **config.js** in „public/scripts“. 26 | 2. Ersetzen Sie *IHRE_CLIENT_ID_EINGEBEN* durch die Client-ID Ihrer registrierten Azure-Anwendung. 27 | 3. Installieren Sie Projektabhängigkeiten mithilfe des Paket-Managers von Node (npm), indem Sie ```npm install``` im Stammverzeichnis des Projekts an der Befehlszeile ausführen. 28 | 4. Starten Sie den Entwicklungsserver, indem Sie ```node server.js``` im Stammverzeichnis des Projekts ausführen. 29 | 5. Navigieren Sie zu ```http://127.0.0.1:8080/``` im Webbrowser. 30 | 31 | Weitere Informationen über das Beispiel finden Sie unter [Vorgehensweisen für Angular unter graph.microsoft.io.](http://graph.microsoft.io/docs/platform/angular). 32 | 33 | ## Fragen und Kommentare 34 | 35 | Wir schätzen Ihr Feedback hinsichtlich des Office 365 Angular Connect-Beispiels. Sie können uns Ihre Fragen und Vorschläge über den Abschnitt [Probleme](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues) dieses Repositorys senden. 36 | 37 | Ihr Feedback ist uns wichtig. Nehmen Sie unter [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph) Kontakt mit uns auf. Taggen Sie Ihre Fragen mit [MicrosoftGraph] und [office365]. 38 | 39 | ## Zusätzliche Ressourcen 40 | 41 | * [Office Dev Center](http://dev.office.com/) 42 | * [Microsoft Graph-API](http://graph.microsoft.io) 43 | * [Office 365 Profile-Beispiel für Angular](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Office-Benutzeroberfläche Fabric](http://dev.office.com/fabric) 45 | 46 | ## Copyright 47 | Copyright (c) 2016 Microsoft. Alle Rechte vorbehalten. 48 | 49 | 50 | -------------------------------------------------------------------------------- /README-Localized/README-fr-fr.md: -------------------------------------------------------------------------------- 1 | # Exemple de connexion d’Angular à Office 365 à l’aide de Microsoft Graph 2 | 3 | La connexion à Office 365 est la première étape que chaque application doit suivre pour commencer à travailler avec les données et services Office 365. Cet exemple explique comment connecter, puis appeler l’API Microsoft Graph (anciennement appelée API unifiée Office 365). Il utilise la structure d’interface utilisateur d’Office pour créer une expérience Office 365. 4 | 5 | > Remarque : Consultez la page relative à la [prise en main des API Office 365](http://dev.office.com/getting-started/office365apis?platform=option-angular#setup) pour enregistrer plus facilement votre application et exécuter plus rapidement cet exemple. 6 | 7 | [Capture d’écran d’un exemple de connexion d’une application Angular à Office 365](../README assets/screenshot.png) 8 | 9 | ## Conditions requises 10 | 11 | Pour utiliser l’exemple de connexion d’Angular à Office 365, vous devez disposer des éléments suivants : 12 | * [Node.js](https://nodejs.org/). Node est requis pour exécuter l’exemple sur un serveur de développement et installer des dépendances. 13 | * Un compte Office 365. Vous pouvez souscrire à [un abonnement Office 365 Développeur](https://aka.ms/devprogramsignup) comprenant les ressources dont vous avez besoin pour commencer à créer des applications Office 365. 14 | 15 | > Remarque : si vous avez déjà un abonnement, le lien précédent vous renvoie vers une page avec le message suivant : « Désolé, vous ne pouvez pas ajouter ceci à votre compte existant ». Dans ce cas, utilisez un compte lié à votre abonnement Office 365 existant. 16 | * Un client Microsoft Azure pour enregistrer votre application. Azure Active Directory (AD) fournit des services d’identité que les applications utilisent à des fins d’authentification et d’autorisation. Un abonnement d’évaluation peut être demandé ici : [Microsoft Azure](https://account.windowsazure.com/SignUp). 17 | 18 | > Important : vous devez également vous assurer que votre abonnement Azure est lié à votre client Office 365. Pour cela, consultez le billet du blog de l’équipe d’Active Directory relatif à la [création et la gestion de plusieurs fenêtres dans les répertoires Azure Active Directory](http://blogs.technet.com/b/ad/archive/2013/11/08/creating-and-managing-multiple-windows-azure-active-directories.aspx). La section sur l’**ajout d’un nouveau répertoire** vous explique comment procéder. Pour en savoir plus, vous pouvez également consulter la rubrique relative à la [configuration de votre environnement de développement Office 365](https://msdn.microsoft.com/office/office365/howto/setup-development-environment#bk_CreateAzureSubscription) et la section sur l’**association de votre compte Office 365 à Azure Active Directory pour créer et gérer des applications**. 19 | * Un ID client d’une application enregistrée dans Azure. Cet exemple d’application doit obtenir l’autorisation **Envoyer du courrier en tant qu’utilisateur connecté** pour l’application **Microsoft Graph**. [Ajoutez une application web dans Azure](https://msdn.microsoft.com/office/office365/HowTo/add-common-consent-manually#bk_RegisterWebApp) et [accordez-lui les autorisations appropriées](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/wiki/Grant-permissions-to-the-Connect-application-in-Azure). 20 | 21 | > Remarque : pendant l’enregistrement de l’application, veillez à indiquer **http://127.0.0.1:8080/** comme **URL d’authentification**. 22 | 23 | ## Configuration et exécution de l’application 24 | 25 | 1. À l’aide de votre IDE favori, ouvrez **config.js** dans public/scripts. 26 | 2. Remplacez *ENTER_YOUR_CLIENT_ID* par l’ID client de votre application Azure inscrite. 27 | 3. Installez les dépendances du projet avec le gestionnaire de package de Node (npm) en exécutant ```npm install``` dans le répertoire racine du projet dans la ligne de commande. 28 | 4. Démarrez le serveur de développement en exécutant ```node server.js``` dans le répertoire racine du projet. 29 | 5. Accédez à ```http://127.0.0.1:8080/``` dans votre navigateur web. 30 | 31 | Pour en savoir plus sur cet exemple, consultez la [procédure pas à pas de l’exécution de l’application Angular sur graph.microsoft.io.](http://graph.microsoft.io/docs/platform/angular). 32 | 33 | ## Questions et commentaires 34 | 35 | Nous serions ravis de connaître votre opinion sur l’exemple de connexion d’Angular à Office 365. Vous pouvez nous faire part de vos questions et suggestions dans la rubrique [Problèmes](https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect/issues) de ce référentiel. 36 | 37 | Votre avis compte beaucoup pour nous. Communiquez avec nous sur [Stack Overflow](http://stackoverflow.com/questions/tagged/office365+or+microsoftgraph). Posez vos questions avec les tags [MicrosoftGraph] et [Office 365]. 38 | 39 | ## Ressources supplémentaires 40 | 41 | * [Centre de développement Office](http://dev.office.com/) 42 | * [API Microsoft Graph](http://graph.microsoft.io) 43 | * [Exemple de profil Office 365 pour Angular](https://github.com/OfficeDev/O365-Angular-Profile) 44 | * [Structure de l’interface utilisateur Office](http://dev.office.com/fabric) 45 | 46 | ## Copyright 47 | Copyright (c) 2016 Microsoft. Tous droits réservés. 48 | 49 | 50 | -------------------------------------------------------------------------------- /public/controllers/mainController.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. 3 | * See LICENSE in the source repository root for complete license information. 4 | */ 5 | 6 | (function () { 7 | angular 8 | .module('app') 9 | .controller('MainController', MainController); 10 | 11 | function MainController($scope, $http, $log, GraphHelper) { 12 | let vm = this; 13 | 14 | // View model properties 15 | vm.displayName; 16 | vm.emailAddress; 17 | vm.emailAddressSent; 18 | vm.requestSuccess; 19 | vm.requestFinished; 20 | 21 | // View model methods 22 | vm.sendMail = sendMail; 23 | vm.login = login; 24 | vm.logout = logout; 25 | vm.isAuthenticated = isAuthenticated; 26 | vm.initAuth = initAuth; 27 | 28 | ///////////////////////////////////////// 29 | // End of exposed properties and methods. 30 | 31 | function initAuth() { 32 | // Check initial connection status. 33 | if (localStorage.token) { 34 | processAuth(); 35 | } 36 | } 37 | 38 | // Set the default headers and user properties. 39 | function processAuth() { 40 | 41 | // let the authProvider access the access token 42 | authToken = localStorage.token; 43 | 44 | if (localStorage.getItem('user') === null) { 45 | 46 | // Get the profile of the current user. 47 | GraphHelper.me().then(function(user) { 48 | 49 | // Save the user to localStorage. 50 | localStorage.setItem('user', angular.toJson(user)); 51 | 52 | vm.displayName = user.displayName; 53 | vm.emailAddress = user.mail || user.userPrincipalName; 54 | }); 55 | } else { 56 | let user = angular.fromJson(localStorage.user); 57 | 58 | vm.displayName = user.displayName; 59 | vm.emailAddress = user.mail || user.userPrincipalName; 60 | } 61 | 62 | } 63 | 64 | vm.initAuth(); 65 | 66 | function isAuthenticated() { 67 | return localStorage.getItem('user') !== null; 68 | } 69 | 70 | function login() { 71 | GraphHelper.login(); 72 | } 73 | 74 | function logout() { 75 | GraphHelper.logout(); 76 | } 77 | 78 | // Send an email on behalf of the current user. 79 | function sendMail() { 80 | 81 | authToken = localStorage.token; 82 | 83 | // Build the HTTP request payload (the Message object). 84 | var email = { 85 | Subject: 'Welcome to Microsoft Graph development with Angular and the Microsoft Graph Connect sample', 86 | Body: { 87 | ContentType: 'HTML', 88 | Content: getEmailContent() 89 | }, 90 | ToRecipients: [ 91 | { 92 | EmailAddress: { 93 | Address: vm.emailAddress 94 | } 95 | } 96 | ] 97 | }; 98 | 99 | // Save email address so it doesn't get lost with two way data binding. 100 | vm.emailAddressSent = vm.emailAddress; 101 | GraphHelper.sendMail(email) 102 | .then(function (response) { 103 | $log.debug('HTTP request to the Microsoft Graph API returned successfully.', response); 104 | vm.requestSuccess = true; 105 | vm.requestFinished = true; 106 | $scope.$apply(); 107 | }, function (error) { 108 | $log.error('HTTP request to the Microsoft Graph API failed.'); 109 | vm.requestSuccess = false; 110 | vm.requestFinished = true; 111 | $scope.$apply(); 112 | }); 113 | 114 | }; 115 | 116 | // Get the HTMl for the email to send. 117 | function getEmailContent() { 118 | return "

Congratulations " + vm.displayName + ",

This is a message from the Microsoft Graph Connect sample. You are well on your way to incorporating Microsoft Graph endpoints in your apps.

What’s next?

Give us feedback

  • If you have any trouble running this sample, please log an issue.
  • For general questions about the Microsoft Graph API, post to Stack Overflow. Make sure that your questions or comments are tagged with [microsoftgraph].

Thanks and happy coding!
Your Microsoft Graph samples development team

"; 119 | }; 120 | }; 121 | })(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [ARCHIVED] Microsoft Graph JavaScript SDK Connect Sample for AngularJS 2 | 3 | ## IMPORTANT 4 | 5 | **This project is being archived and replaced with the [Build Angular single-page apps with Microsoft Graph](https://github.com/microsoftgraph/msgraph-training-angularspa). As part of the archival process, we're closing all open issues and pull requests.** 6 | 7 | **You can continue to use this sample "as-is", but it won't be maintained moving forward. We apologize for any inconvenience.** 8 | 9 | ## Table of contents 10 | 11 | * [Introduction](#introduction) 12 | * [Prerequisites](#prerequisites) 13 | * [Register the application](#register-the-application) 14 | * [Build and run the sample](#build-and-run-the-sample) 15 | * [Code of note](#code-of-note) 16 | * [Questions and comments](#questions-and-comments) 17 | * [Contributing](#contributing) 18 | * [Additional resources](#additional-resources) 19 | 20 | ## Introduction 21 | 22 | This sample shows how to connect an AngularJS app to a Microsoft work or school (Azure Active Directory) or personal (Microsoft) account using the Microsoft Graph API with the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) to send an email. In addition, the sample uses the Office Fabric UI for styling and formatting the user experience. 23 | 24 | ![Microsoft Graph Connect sample screenshot](./README_assets/screenshot.png) 25 | 26 | This sample uses the [Microsoft Authentication Library Preview for JavaScript (msal.js)](https://github.com/AzureAD/microsoft-authentication-library-for-js) to get an access token. 27 | 28 | ## Prerequisites 29 | 30 | To use the Microsoft Graph Connect sample for AngularJS, you need the following: 31 | * [Node.js](https://nodejs.org/). Node is required to run the sample on a development server and to install dependencies. 32 | 33 | * [Bower](https://bower.io). Bower is required to install front-end dependencies. 34 | 35 | * Either a [Microsoft account](https://www.outlook.com) or [Office 365 for business account](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account) 36 | 37 | ## Register the application 38 | 39 | 1. Sign in to the [Azure Portal](https://portal.azure.com/) to register an application. 40 | 41 | 1. If your account gives you access to more than one tenant, select your account in the top right corner, and set your portal session to the desired Azure AD tenant. 42 | 43 | 1. In the left-hand navigation pane, select the **Azure Active Directory** service, and then select **App registrations (Preview) > New registration**. 44 | 45 | 1. When the **Register an application** page appears, enter a name for your application. 46 | 47 | 1. Under **Supported account types**, select **Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com)**. 48 | 49 | 1. Select the **Web** platform under the **Redirect URI** section and set the value to *http://localhost:8080/*. 50 | 51 | 1. When finished, select **Register**. On the app **Overview** page, note down the **Application ID** value. 52 | 53 | 1. This quickstart requires the [Implicit grant flow](https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow) to be enabled. In the left-hand navigation pane of the registered application, select **Authentication**. 54 | 55 | 1. In **Advanced settings**, under **Implicit grant**, enable both **ID tokens** and **Access tokens** checkboxes. ID tokens and Access tokens are required since this app needs to sign in users and call an API. 56 | 57 | 1. Select **Save**. 58 | 59 | ## Build and run the sample 60 | 61 | 1. Download or clone the Microsoft Graph Connect Sample for AngularJS. 62 | 63 | 2. Using your favorite IDE, open **config.js** in *public/scripts*. 64 | 65 | 3. Replace the **clientID** placeholder value with the application ID of your registered Azure application. 66 | 67 | 4. In a command prompt, run the following command in the root directory. This installs the Microsoft Graph JavaScript SDK and other dependencies. 68 | 69 | ``` 70 | npm install 71 | bower install 72 | ``` 73 | 74 | 5. Run `npm start` to start the development server. 75 | 76 | 6. Navigate to `http://localhost:8080` in your web browser. 77 | 78 | 7. Choose the **Connect** button. 79 | 80 | 8. Sign in with your personal or work or school account and grant the requested permissions. If a textbox with your signed-in email address does not replace the `Connect` button, please allow pop-ups for the url `http://localhost:8080` in the browser. 81 | 82 | 9. Optionally edit the recipient's email address, and then choose the **Send mail** button. When the mail is sent, a Success message is displayed below the button. 83 | 84 | ## Contributing 85 | 86 | If you'd like to contribute to this sample, see [CONTRIBUTING.MD](/CONTRIBUTING.md). 87 | 88 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 89 | 90 | ## Questions and comments 91 | 92 | We'd love to get your feedback about this sample. You can send your questions and suggestions in the [Issues](https://github.com/microsoftgraph/angular-connect-rest-sample/issues) section of this repository. 93 | 94 | Questions about Microsoft Graph development in general should be posted to [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Make sure that your questions or comments are tagged with [microsoftgraph]. 95 | 96 | ## Additional resources 97 | 98 | - [Other Microsoft Graph Connect samples](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect) 99 | - [Microsoft Graph](http://graph.microsoft.io) 100 | 101 | ## Copyright 102 | Copyright (c) 2016 Microsoft. All rights reserved. 103 | 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contribute to this documentation 2 | 3 | Thank you for your interest in our documentation! 4 | 5 | * [Ways to contribute](#ways-to-contribute) 6 | * [Contribute using GitHub](#contribute-using-github) 7 | * [Contribute using Git](#contribute-using-git) 8 | * [How to use Markdown to format your topic](#how-to-use-markdown-to-format-your-topic) 9 | * [FAQ](#faq) 10 | * [More resources](#more-resources) 11 | 12 | ## Ways to contribute 13 | 14 | Here are some ways you can contribute to this documentation: 15 | 16 | * To make small changes to an article, [Contribute using GitHub](#contribute-using-github). 17 | * To make large changes, or changes that involve code, [Contribute using Git](#contribute-using-git). 18 | * Report documentation bugs via GitHub Issues 19 | * Request new documentation at the [Office Developer Platform UserVoice](http://officespdev.uservoice.com) site. 20 | 21 | ## Contribute using GitHub 22 | 23 | Use GitHub to contribute to this documentation without having to clone the repo to your desktop. This is the easiest way to create a pull request in this repository. Use this method to make a minor change that doesn't involve code changes. 24 | 25 | **Note** Using this method allows you to contribute to one article at a time. 26 | 27 | ### To Contribute using GitHub 28 | 29 | 1. Find the article you want to contribute to on GitHub. 30 | 31 | If the article is in MSDN, choose the **suggest and submit changes** link in the **Contribute to this content** section and you'll be taken to the same article on GitHub. 32 | 2. Once you are on the article in GitHub, sign in to GitHub (get a free account [Join GitHub](https://github.com/join). 33 | 3. Choose the **pencil icon** (edit the file in your fork of this project) and make your changes in the **<>Edit file** window. 34 | 4. Scroll to the bottom and enter a description. 35 | 5. Choose **Propose file change**>**Create pull request**. 36 | 37 | You now have successfully submitted a pull request. Pull requests are typically reviewed within 10 business days. 38 | 39 | 40 | ## Contribute using Git 41 | 42 | Use Git to contribute substantive changes, such as: 43 | 44 | * Contributing code. 45 | * Contributing changes that affect meaning. 46 | * Contributing large changes to text. 47 | * Adding new topics. 48 | 49 | ### To Contribute using Git 50 | 51 | 1. If you don't have a GitHub account, set one up at [GitHub](https://github.com/join). 52 | 2. After you have an account, install Git on your computer. Follow the steps in [Setting up Git Tutorial](https://help.github.com/articles/set-up-git/). 53 | 3. To submit a pull request using Git, follow the steps in [Use GitHub, Git, and this repository](#use-github-git-and-this-repository). 54 | 4. You will be asked to sign the Contributor's License Agreement if you are: 55 | 56 | * A member of the Microsoft Open Technologies group. 57 | * A contributors who doesn't work for Microsoft. 58 | 59 | As a community member, you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to a project. You only need to complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document. 60 | 61 | Signing the CLA does not grant you rights to commit to the main repository, but it does mean that the Office Developer and Office Developer Content Publishing teams will be able to review and approve your contributions. You will be credited for your submissions. 62 | 63 | Pull requests are typically reviewed within 10 business days. 64 | 65 | ## Use GitHub, Git, and this repository 66 | 67 | **Note:** Most of the information in this section can be found in [GitHub Help] articles. If you're familiar with Git and GitHub, skip to the **Contribute and edit content** section for the specifics of the code/content flow of this repository. 68 | 69 | ### To set up your fork of the repository 70 | 71 | 1. Set up a GitHub account so you can contribute to this project. If you haven't done this, go to [GitHub](https://github.com/join) and do it now. 72 | 2. Install Git on your computer. Follow the steps in the [Setting up Git Tutorial] [Set Up Git]. 73 | 3. Create your own fork of this repository. To do this, at the top of the page, choose the **Fork** button. 74 | 4. Copy your fork to your computer. To do this, open Git Bash. At the command prompt enter: 75 | 76 | git clone https://github.com//.git 77 | 78 | Next, create a reference to the root repository by entering these commands: 79 | 80 | cd 81 | git remote add upstream https://github.com/microsoftgraph/.git 82 | git fetch upstream 83 | 84 | Congratulations! You've now set up your repository. You won't need to repeat these steps again. 85 | 86 | ### Contribute and edit content 87 | 88 | To make the contribution process as seamless as possible, follow these steps. 89 | 90 | #### To contribute and edit content 91 | 92 | 1. Create a new branch. 93 | 2. Add new content or edit existing content. 94 | 3. Submit a pull request to the main repository. 95 | 4. Delete the branch. 96 | 97 | **Important** Limit each branch to a single concept/article to streamline the work flow and reduce the chance of merge conflicts. Content appropriate for a new branch includes: 98 | 99 | * A new article. 100 | * Spelling and grammar edits. 101 | * Applying a single formatting change across a large set of articles (for example, applying a new copyright footer). 102 | 103 | #### To create a new branch 104 | 105 | 1. Open Git Bash. 106 | 2. At the Git Bash command prompt, type `git pull upstream master:`. This creates a new branch locally that is copied from the latest MicrosoftGraph master branch. 107 | 3. At the Git Bash command prompt, type `git push origin `. This alerts GitHub to the new branch. You should now see the new branch in your fork of the repository on GitHub. 108 | 4. At the Git Bash command prompt, type `git checkout ` to switch to your new branch. 109 | 110 | #### Add new content or edit existing content 111 | 112 | You navigate to the repository on your computer by using File Explorer. The repository files are in `C:\Users\\`. 113 | 114 | To edit files, open them in an editor of your choice and modify them. To create a new file, use the editor of your choice and save the new file in the appropriate location in your local copy of the repository. While working, save your work frequently. 115 | 116 | The files in `C:\Users\\` are a working copy of the new branch that you created in your local repository. Changing anything in this folder doesn't affect the local repository until you commit a change. To commit a change to the local repository, type the following commands in GitBash: 117 | 118 | git add . 119 | git commit -v -a -m "" 120 | 121 | The `add` command adds your changes to a staging area in preparation for committing them to the repository. The period after the `add` command specifies that you want to stage all of the files that you added or modified, checking subfolders recursively. (If you don't want to commit all of the changes, you can add specific files. You can also undo a commit. For help, type `git add -help` or `git status`.) 122 | 123 | The `commit` command applies the staged changes to the repository. The switch `-m` means you are providing the commit comment in the command line. The -v and -a switches can be omitted. The -v switch is for verbose output from the command, and -a does what you already did with the add command. 124 | 125 | You can commit multiple times while you are doing your work, or you can commit once when you're done. 126 | 127 | #### Submit a pull request to the main repository 128 | 129 | When you're finished with your work and are ready to have it merged into the main repository, follow these steps. 130 | 131 | #### To submit a pull request to the main repository 132 | 133 | 1. In the Git Bash command prompt, type `git push origin `. In your local repository, `origin` refers to your GitHub repository that you cloned the local repository from. This command pushes the current state of your new branch, including all commits made in the previous steps, to your GitHub fork. 134 | 2. On the GitHub site, navigate in your fork to the new branch. 135 | 3. Choose the **Pull Request** button at the top of the page. 136 | 4. Verify the Base branch is `microsoftgraph/@master` and the Head branch is `/@`. 137 | 5. Choose the **Update Commit Range** button. 138 | 6. Add a title to your pull request, and describe all the changes you're making. 139 | 7. Submit the pull request. 140 | 141 | One of the site administrators will process your pull request. Your pull request will surface on the microsoftgraph/ site under Issues. When the pull request is accepted, the issue will be resolved. 142 | 143 | #### Create a new branch after merge 144 | 145 | After a branch is successfully merged (that is, your pull request is accepted), don't continue working in that local branch. This can lead to merge conflicts if you submit another pull request. To do another update, create a new local branch from the successfully merged upstream branch, and then delete your initial local branch. 146 | 147 | For example, if your local branch X was successfully merged into the OfficeDev/microsoft-graph-docs master branch and you want to make additional updates to the content that was merged. Create a new local branch, X2, from the OfficeDev/microsoft-graph-docs master branch. To do this, open GitBash and execute the following commands: 148 | 149 | cd microsoft-graph-docs 150 | git pull upstream master:X2 151 | git push origin X2 152 | 153 | You now have local copies (in a new local branch) of the work that you submitted in branch X. The X2 branch also contains all the work other writers have merged, so if your work depends on others' work (for example, shared images), it is available in the new branch. You can verify that your previous work (and others' work) is in the branch by checking out the new branch... 154 | 155 | git checkout X2 156 | 157 | ...and verifying the content. (The `checkout` command updates the files in `C:\Users\\microsoft-graph-docs` to the current state of the X2 branch.) Once you check out the new branch, you can make updates to the content and commit them as usual. However, to avoid working in the merged branch (X) by mistake, it's best to delete it (see the following **Delete a branch** section). 158 | 159 | #### Delete a branch 160 | 161 | Once your changes are successfully merged into the main repository, delete the branch you used because you no longer need it. Any additional work should be done in a new branch. 162 | 163 | #### To delete a branch 164 | 165 | 1. In the Git Bash command prompt, type `git checkout master`. This ensures that you aren't in the branch to be deleted (which isn't allowed). 166 | 2. Next, at the command prompt, type `git branch -d `. This deletes the branch on your computer only if it has been successfully merged to the upstream repository. (You can override this behavior with the `–D` flag, but first be sure you want to do this.) 167 | 3. Finally, type `git push origin :` at the command prompt (a space before the colon and no space after it). This will delete the branch on your github fork. 168 | 169 | Congratulations, you have successfully contributed to the project! 170 | 171 | ## How to use Markdown to format your topic 172 | 173 | ### Article template 174 | 175 | The [markdown template](/articles/0-markdown-template-for-new-articles.md) contains the basic Markdown for a topic that includes a table of contents, sections with subheadings, links to other Office developer topics, links to other sites, bold text, italic text, numbered and bulleted lists, code snippets, and images. 176 | 177 | 178 | ### Standard Markdown 179 | 180 | All of the articles in this repository use Markdown. A complete introduction (and listing of all the syntax) can be found at [Markdown Home] []. 181 | 182 | ## FAQ 183 | 184 | ### How do I get a GitHub account? 185 | 186 | Fill out the form at [Join GitHub](https://github.com/join) to open a free GitHub account. 187 | 188 | ### Where do I get a Contributor's License Agreement? 189 | 190 | You will automatically be sent a notice that you need to sign the Contributor's License Agreement (CLA) if your pull request requires one. 191 | 192 | As a community member, **you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to this project**. You only need complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document. 193 | 194 | ### What happens with my contributions? 195 | 196 | When you submit your changes, via a pull request, our team will be notified and will review your pull request. You will receive notifications about your pull request from GitHub; you may also be notified by someone from our team if we need more information. We reserve the right to edit your submission for legal, style, clarity, or other issues. 197 | 198 | ### Can I become an approver for this repository's GitHub pull requests? 199 | 200 | Currently, we are not allowing external contributors to approve pull requests in this repository. 201 | 202 | ### How soon will I get a response about my change request or issue? 203 | 204 | We typically review pull requests and respond to issues within 10 business days. 205 | 206 | ## More resources 207 | 208 | * To learn more about Markdown, go to the Git creator's site [Daring Fireball]. 209 | * To learn more about using Git and GitHub, first check out the [GitHub Help section] [GitHub Help]. 210 | 211 | [GitHub Home]: http://github.com 212 | [GitHub Help]: http://help.github.com/ 213 | [Set Up Git]: http://help.github.com/win-set-up-git/ 214 | [Markdown Home]: http://daringfireball.net/projects/markdown/ 215 | [Daring Fireball]: http://daringfireball.net/ 216 | --------------------------------------------------------------------------------