Reutilize componentes com provedores Angular

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ços e reutilizam 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.

Para saber mais, visite Provedores angular .

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é Tudo > Portal de serviços > Configuração do Portal de serviços > Tabelas do Portal > Provedor em Angular de Widget.
   A tabela Provedores angular 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 fábricas.
4. Defina um nome.
   Você usará o nome para associar o Provedor ao widget.
5. Adicione um script no Client Script 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 lista, clique em Novo .
   5. Em Provedor angular , selecione o Provedor apropriado.
   6. Verifique Widget Campo para garantir que você esteja associando o provedor angular ao widget correto.
   7. Clique em Salvar.
7. Atualize os scripts apropriados em seu 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 script do cliente de 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 com seu widget, abra o script do cliente Provedor angular no editor de widgets.
   1. Navegar até Configuração do Portal de serviços > Editor de widgets.
   2. Em Edite um widget existente , Selecione o widget associado ao seu provedor angular.
   3. Em Mostrar , abra Dependências 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 client script 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.

O que Fazer Depois

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