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 开发人员预览版](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
|||
|
* [Office 365 开发人员租户](http://dev.office.com/sharepoint/docs/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://telemetry.sharepointpnp.com/sp-dev-fx-webparts/samples/angular-msgraph" />
|