---
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 на основе Angular 1.x с использованием MS Graph

## Сводка
Это пример веб-части на платформе MS Graph, которая подключается к Microsoft Graph и получает данные SharePoint из вашего клиента.
Сначала она получает корневое семейство веб-сайтов (в настоящее время ограничено Microsoft Graph),
а затем отображает все списки, связанные с сайтом, а также все элементы списка.

![Первый экран](./assets/Connect.png)

![Вход выполнен](./assets/Connected.png)

![Корневое семейство веб-сайтов](./assets/Root.png)

![Списки в корневом сайте](./assets/Lists.png)

![Элементы списка извещений](./assets/Items.png)


> Примечание. В настоящее время есть только модели, разработанные для списка извещений. Во всех остальных списках будут возникать ошибки.

## Использованная версия SharePoint Framework 
![Удалить](https://img.shields.io/badge/drop-ga-green.svg)

## Область применения

* [SharePoint Framework Developer Preview](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Клиент Office 365 для разработчиков](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)

## Решение

Решение|Автор(-ы)
--------|---------
Angular-MSGraph|Дэвид Хартман ([Slalom](https://slalom.com))

## Журнал версий

Версия|Дата|Комментарии
-------|----|--------
2.0|19 апреля 2017 г.|Общедоступный выпуск
1.0|6 февраля 2017 г.|Первоначальный выпуск

## Заявление об отказе
**ЭТОТ КОД ПРЕДОСТАВЛЯЕТСЯ *КАК ЕСТЬ* БЕЗ КАКОЙ-ЛИБО ЯВНОЙ ИЛИ ПОДРАЗУМЕВАЕМОЙ ГАРАНТИИ, ВКЛЮЧАЯ ПОДРАЗУМЕВАЕМЫЕ ГАРАНТИИ ПРИГОДНОСТИ ДЛЯ КАКОЙ-ЛИБО ЦЕЛИ, ДЛЯ ПРОДАЖИ ИЛИ ГАРАНТИИ ОТСУТСТВИЯ НАРУШЕНИЯ ПРАВ ИНЫХ ПРАВООБЛАДАТЕЛЕЙ.**

---

## Язык настройки (BLISS)
- Клонируйте этот репозиторий
- Введите в командной строке следующую команду:
 - `npm i typings -g`
 - `npm i`
 - `gulp serve

## Регистрация приложения

1. Войдите на [портал регистрации приложений](https://apps.dev.microsoft.com/) с помощью личной, рабочей или учебной учетной записи.

2. Нажмите кнопку **Добавить приложение**.

3. Введите имя приложения и нажмите кнопку **Создать приложение**.

   Откроется страница регистрации со свойствами приложения.

4. Скопируйте идентификатор приложения. Это уникальный идентификатор приложения.

5. В разделе **Платформы** нажмите кнопку **Добавить платформу**.

6. Выберите **Интернет**.

7. Убедитесь, что установлен флажок **Разрешить неявный поток** и введите URI перенаправления *http://{Расположение SP Workbench}*.

8. Выберите команду **Сохранить**.

## Настройка приложения
1. Замените **aad** и **redirect_uri** на идентификатор приложения и URL-адрес перенаправления приложения, зарегистрированного в Azure, в файле GraphHelper.ts (src -> angularMsGraph -> GraphHelper.ts)

<img src="https://pnptelemetry.azurewebsites.net/sp-dev-fx-webparts/samples/angular-msgraph" />