---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Reutilize componentes com provedores Angular

# Reutilize componentes com provedores Angular {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

Os provedores Angular são componentes reutilizáveis que podem ser injetados em vários widgets. Para garantir o carregamento rápido de widgets e um portal de alto desempenho, crie provedores Angular em vez de sobrecarregar seus controladores de cliente com dados persistentes e lógica adicional. Com os provedores Angular, você pode manter dados durante toda a vida útil do seu Portal de serviçose reutilize componentes e objetos de dados em vários widgets.

## Antes de Iniciar

Função necessária: administrador ou sp_admin

## Por Que e Quando Desempenhar Esta Tarefa

Ao criar um provedor Angular, você pode:  
* Mantenha widgets sincronizados ao mudar registros ou filtros.
* Compartilhar contexto entre widgets.
* Manter e persistir estado.
* Crie comportamentos e injete-os em vários widgets.
{#angular-providers__ul_mm2_2zq_yz}

Para saber mais, visite [Provedores Angular](https://docs.angularjs.org/guide/providers).  
Dica:  
Para facilitar a manutenção e a solução de problemas, remova todos os provedores não utilizados da lista relacionada Provedores Angular na tabela Widget \[sp_widget\].

## Procedimento

1. Navegar até TudoPortal de serviçosConfiguração do Portal de serviçosTabelas do PortalProvedor em Angular de Widget.  
   A tabela Provedores angulares de widget é aberta.
2. Clique em Novo para criar um novo registro.
3. Selecione o tipo de provedor Angular.
   * Diretiva
   * Fábrica
   * Serviço

   {#angular-providers__choices_sgd_jl5_b1b}  
   Para facilitar a migração para o ECMAScript 6 ou posterior, considere o uso de serviços em vez de fábricas.
4. Defina um nome.  
   Você usará o nome para associar o provedor ao widget.
5. Adicione um script no Script do cliente campo.  
   Uma fábrica básica que formata um número na moeda dos EUA.

       function formatterFactory(){
         var myVal = Number;
         return {
           format: function(myVal) {
             return '$' + myVal.toFixed(2);
           }
         }
       }

6. Associe o provedor Angular a um widget.
   1. Navegue até `<yourInstanceURL>/sp_config?id_widget_edit `.
   2. Abra o widget que você deseja associar ao provedor Angular.
   3. Em Listas relacionadas , selecione Provedores Angular .
   4. Em Provedores Angular clique em Novo .
   5. Em Provedor angular Selecione o provedor apropriado.
   6. Verifique o. Widget Campo para garantir que você esteja associando o provedor Angular ao widget correto.
   7. Clique em Salvar.
   {#angular-providers__substeps_adg_wln_zz}
7. Atualize os scripts apropriados no widget para injetar o provedor Angular no widget.  
   Injete a fábrica no script do cliente do widget passando o nome da fábrica como um argumento na função do controlador do cliente. Em seguida, você pode acessar o objeto definido na função de fábrica no script do cliente do widget.  

       function(formatterFactory) {
         /* widget controller */
         var c = this;
         console.log(formatterFactory.format(300));
       }

   Se estiver definindo uma diretiva, use a diretiva no modelo HTML do widget.
8. Para editar o provedor Angular depois que ele for registrado no widget, abra o script do cliente Provedor Angular no editor de widgets.
   1. Navegar até Configuração do Portal de serviçosEditor de widgets.
   2. Em Edite um widget existente , Selecione o widget associado ao seu provedor Angular.
   3. Em Mostrar , abra o. Dependências Liste e selecione o provedor Angular.  
      Nota:  
      Somente provedores Angular associados ao widget são exibidos no Dependências lista. Esta lista inclui todos os recursos externos dos quais seu widget depende.  
      O script do cliente do provedor Angular é exibido no editor de widgets. Na interface do editor de widgets, você pode editar e salvar o widget e os scripts do provedor ao mesmo tempo.
   {#angular-providers__substeps_nly_y1k_d1b}
{#angular-providers__steps_rxz_qzq_yz}

## O que Fazer Depois

Para usar um provedor Angular com vários widgets, registre seu provedor com cada widget e atualize os scripts apropriados.