Reutilizar componentes com provedores em angular

Provedores em 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 em angular em vez de sobrecarregar os controladores do cliente com dados persistentes e lógica adicional. Com os provedores em angular, você pode manter os dados durante a vida útil de seu Portal de serviços e reutilizar 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 em angular, você pode:

• Mantenha os widgets em sincronia ao alterar registros ou filtros.
• Compartilhar contexto entre widgets.
• Manter e persistir o estado.
• Crie comportamentos e os injete em vários widgets.

Para saber mais, visite Angular Providers.

Dica:

Para facilitar a manutenção e a solução de problemas, remova todos os provedores não utilizados da lista relacionada Provedores em angular na tabela Widget [sp_widget].

Procedimento

1. Navegar até Todos > Portal de serviços > Configuração do Portal de serviços > Tabelas do Portal > Provedor em Angular de Widget.
   A tabela Provedores em angular do widget é aberta.
2. Clique em Novo para criar um novo registro.
3. Selecione o tipo de Provedor em angular.
   • Diretiva
   • Fábrica
   • Serviço
   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 seu widget.
5. Adicione um script no campo Script de cliente.

   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 em angular a um widget.
   1. Navegue até<yourInstanceURL> /sp_config?id=widget_edit.
   2. Abra o widget que você deseja associar ao Provedor em angular.
   3. Em Listas relacionadas, selecione Provedores em angular.
   4. Na lista Provedores em angular, clique em Novo.
   5. No campo Provedor em angular, selecione o Provedor apropriado.
   6. Verifique o campo Widget para garantir que você esteja associando o Provedor em angular ao widget correto.
   7. Clique em Salvar.
7. Atualize os scripts apropriados no seu widget para injetar o Provedor em 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. Você pode acessar o objeto definido na função de fábrica no client script 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 em angular depois que ele for registrado com o widget, abra o client script do Provedor em angular no editor de widget.
   1. Navegar até Configuração do Portal de serviços > Editor de widgets.
   2. Em Editar um widget existente, selecione o widget associado ao seu Provedor em angular.
   3. No menu Mostrar, abra a lista Dependências e selecione o Provedor em angular.
      Nota:

      Somente Provedores em angular associados ao widget são exibidos na lista Dependências. Esta lista inclui todos os recursos externos dos quais seu widget depende.
      O script do cliente do Provedor em angular é exibido no editor de widget. Na interface do editor de widget, você pode editar e salvar seu widget e os scripts do provedor ao mesmo tempo.

O que Fazer Depois

Para usar um Provedor em angular com vários widgets, registre seu Provedor com cada widget e atualize os scripts apropriados.