97 lines
2.6 KiB
Markdown
97 lines
2.6 KiB
Markdown
---
|
||
page_type: sample
|
||
products:
|
||
- office-sp
|
||
- ms-graph
|
||
languages:
|
||
- javascript
|
||
- typescript
|
||
extensions:
|
||
contentType: samples
|
||
technologies:
|
||
- SharePoint Framework
|
||
- Microsoft Graph
|
||
services:
|
||
- SharePoint
|
||
platforms:
|
||
- AngularJS
|
||
createdDate: 2/16/2017 12:00:00 AM
|
||
---
|
||
## 通过 Angular v1.x 构建的 Angular MS Graph web 部件
|
||
|
||
## 摘要
|
||
此 MS Graph Web 部件连接到 Microsoft Graph,并从租户中提取 SharePoint 信息。
|
||
首先拉取跟网站集(当前由 Microsoft Graph 限制),
|
||
随后显示后面跟着列表内所有项目的网站的关联列表。
|
||
|
||
![首屏](./assets/Connect.png)
|
||
|
||
![已登录](./assets/Connected.png)
|
||
|
||
![根网站集](./assets/Root.png)
|
||
|
||
![根网站中列表](./assets/Lists.png)
|
||
|
||
![通知列表项](./assets/Items.png)
|
||
|
||
|
||
> 注意:我当前只拥有专为通知列表开发的模型。所有其他列表当前都会产生错误。
|
||
|
||
## 使用的 SharePoint Framework 版本
|
||
![drop](https://img.shields.io/badge/drop-ga-green.svg)
|
||
|
||
## 适用于
|
||
|
||
* [SharePoint Framework 开发人员预览版](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
|
||
* [Office 365 开发人员租户](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
|
||
|
||
## 解决方案
|
||
|
||
解决方案|作者
|
||
--------|---------
|
||
angular-msgraph|David Hartman ([Slalom](https://slalom.com))
|
||
|
||
## 版本历史记录
|
||
|
||
版本 |日期 |注释
|
||
-------|----|--------
|
||
2.0 |2017年4月19日 | GA 发布
|
||
1.0 |2017 年 2 月 6日 |首次发布
|
||
|
||
## 免责声明
|
||
**此代码*按原样提供*,不提供任何明示或暗示的担保,包括对特定用途适用性、适销性或不侵权的默示担保。**
|
||
|
||
---
|
||
|
||
## 配置 Bliss
|
||
- 克隆此存储库。
|
||
- 在命令行中运行:
|
||
- `npm i typings -g`
|
||
- `npm i`
|
||
- `gulp serve
|
||
|
||
## 注册应用程序
|
||
|
||
1. 使用个人或工作或学校帐户登录到[应用注册门户](https://apps.dev.microsoft.com/)。
|
||
|
||
2. 选择“**添加应用**”。
|
||
|
||
3. 输入应用的名称,并选择“**创建应用程序**”。
|
||
|
||
将显示注册页,其中列出应用的属性。
|
||
|
||
4. 复制应用程序 ID。这是应用的唯一标识符。
|
||
|
||
5. 在“**平台**”下,选择“**添加平台**”。
|
||
|
||
6. 选择“**Web**”。
|
||
|
||
7. 请确保已选中“**允许隐式流**”复选框,输入 *http://{Location of SP Workbench}* 作为重定向 URI。
|
||
|
||
8. 选择“**保存**”。
|
||
|
||
## 配置应用程序
|
||
1. 使用 src -> angularMsGraph -> GraphHelper.ts 下 GraphHelper.
|
||
ts 文件中的已注册 Azure 应用的应用程序 ID 和重定向 url 替换 **aad** 和 **redirect\_uri** 占位符值
|
||
|
||
<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/angular-msgraph" /> |