Reutilizar componentes com provedores angulares

Provedores angulares 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 angulares em vez de sobrecarregar os controladores do cliente com dados persistentes e lógica adicional. Com os provedores angulares, você pode manter os dados durante o tempo de vida do 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 angular, você pode:

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

Para saber mais, visite Provedores angulares.

Dica:

Para facilitar a manutenção e a solução de problemas, remova todos os provedores não utilizados da lista relacionada de provedores angulares 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 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
   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 Client script.

   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. Navegar até<yourInstanceURL> /sp_config?id=widget_edit.
   2. Abra o widget que você deseja associar ao provedor angular.
   3. Em Listas relacionadas, selecione Provedores angulares.
   4. Na lista Provedores angulares, clique em Novo.
   5. No campo Provedor angular, selecione o provedor apropriado.
   6. Verifique o campo Widget para garantir que você esteja associando o provedor angular ao widget correto.
   7. Clique em Salvar.
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. 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 Angular Provider depois que ele for registrado com o widget, abra o client script do Angular Provider 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 angular.
   3. No menu Mostrar, abra a lista Dependências e selecione o Provedor angular.
      Nota:

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

O que Fazer Depois

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