--- 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 --- ## Web Part do MS Graph em Angular integrada com o Angular v1\. x ## Resumo Este é um exemplo de web part do MS Graph que se conecta ao Microsoft Graph e extrai informações sobre o SharePoint do seu locatário. Primeiro, ele receberá o conjunto de sites raiz (na limitação do Microsoft Graph) e exibirá todas as listas associadas ao site seguido por todos os itens da lista. ![Primeira tela](./assets/Connect.png) ![Conectado](./assets/Connected.png) ![Conjunto de sites raiz](./assets/Root.png) ![Listas no site raiz](./assets/Lists.png) ![Itens da lista de comunicados](./assets/Items.png) > Observação: Atualmente, no momento, só temos modelos desenvolvidos para a lista de comunicados. Todas as outras listas gerarão erros no momento. ## Versão do SharePoint Framework usada ![drop](https://img.shields.io/badge/drop-ga-green.svg) ## Aplicável a * [SharePoint Framework Developer Preview](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview) * [Locatário de desenvolvedor do Office 365](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant) ## Solução Solução | Autor (s) --------|--------- angulares-msgraph | David Hartman ([Slalom](https://slalom.com)) ## Histórico de versão Versão | Data | Comentários -------|----|-------- 2.0 | 19 de abril de 2017 | GA versão 1.0 | 6 de fevereiro de 2017 | Versão inicial ## Aviso de isenção de responsabilidade **ESSE CÓDIGO É FORNECIDO *EM* GARANTIA DE QUALQUER TIPO, SEJA EXPRESSA OU IMPLÍCITA, INCLUINDO QUAISQUER GARANTIAS IMPLÍCITAS DE ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA, COMERCIABILIDADE OU NÃO VIOLAÇÃO.** --- ## Diversão de configuração - clone este repositório. - na linha de comando, execute: - `npm i typings -g` - `npm i` - `gulp serve ## Registrar o aplicativo 1. Entre no [Portal de Registro do Aplicativo](https://apps.dev.microsoft.com/) usando sua conta pessoal ou sua conta corporativa ou de estudante. 2. Escolha **Adicionar um aplicativo**. 3. Insira um nome para o aplicativo e escolha **Criar aplicativo**. A página de registro é exibida, listando as propriedades do seu aplicativo. 4. Copie a ID do Aplicativo. Esse é o identificador exclusivo do aplicativo. 5. Em **Plataformas**, escolha **Adicionar plataforma**. 6. Escolha **Web**. 7. Não deixe de marcar a caixa de diálogo **Permitir Fluxo Implícito** e insira *http://{Location of SP Workbench}* como o URI de Redirecionamento. 8. Escolha **Salvar**. ## Configurando o aplicativo 1. Substitua os valores de espaço reservado **aad** e **redirect_uri** pela ID do aplicativo e URL de redirecionamento do aplicativo registrado do Azure no arquivo GraphHelper.ts Em src -> angularMsGraph -> GraphHelper.ts