Réutiliser des composants avec des fournisseurs d’angle

Les fournisseurs Angular sont des composants réutilisables qui peuvent être injectés dans plusieurs widgets. Pour garantir un chargement rapide des widgets et un portail performant, créez des fournisseurs Angular au lieu de surcharger vos contrôleurs clients avec des données persistantes et une logique supplémentaire. Avec les fournisseurs Angular, vous pouvez conserver les données pendant toute la durée de vie de vos Portail de services widgets et les réutiliser dans plusieurs widgets.

Avant de commencer

Rôle requis : admin ou sp_admin

Pourquoi et quand exécuter cette tâche

En créant un fournisseur Angular, vous pouvez :

• synchronisez les widgets lors du changement d’enregistrements ou de filtres.
• Contexte de partage entre les widgets.
• Conserver et conserver l’état.
• Créez des comportements et injectez-les dans plusieurs widgets.

Pour en savoir plus, rendez-vous sur la page Fournisseurs Angular.

Conseil :

Pour faciliter la maintenance et le dépannage, supprimez tous les fournisseurs inutilisés de la liste connexe Fournisseurs d’angle dans la table Widget [sp_widget].

Procédure

1. Accédez à la Tous > Portail de services > Configuration du Portail de services > Tables de portails > Fournisseur d'angles de widget.
   La table Fournisseurs d’angle de widget s’ouvre.
2. Cliquez sur Nouveau et créez un enregistrement.
3. Sélectionnez le type de fournisseur Angular.
   • Directive
   • Usine
   • Service
   Pour faciliter la migration vers ECMAScript 6 ou une version ultérieure, envisagez d’utiliser des services plutôt que des usines.
4. Définissez un nom.
   Vous utiliserez le nom pour associer le fournisseur à votre widget.
5. Ajoutez un script dans le champ Script client .

   Une usine de base qui formate un nombre en devise américaine.

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

6. Associez le fournisseur Angular à un widget.
   1. Accédez à <yourInstanceURL>/sp_config ?id=widget_edit.
   2. Ouvrez le widget que vous souhaitez associer au fournisseur Angular.
   3. Sous Listes connexes, sélectionnez Fournisseurs d’angle.
   4. Dans la liste Fournisseurs d’angle , cliquez sur Nouveau.
   5. Dans le champ Fournisseur d’angle , sélectionnez le fournisseur approprié.
   6. Vérifiez le champ Widget pour vous assurer que vous associez le fournisseur Angular au widget correct.
   7. Cliquez sur Enregistrer.
7. Mettez à jour les scripts appropriés dans votre widget pour injecter le fournisseur Angular dans le widget.

   Injectez la fabrique dans votre script client widget en passant le nom de la fabrique comme argument dans votre fonction de contrôleur client. Vous pouvez alors accéder à l’objet défini dans la fonction factory dans votre script client widget.

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

   Si vous définissez une directive, utilisez-la dans le modèle HTML de widget.

8. Pour modifier le fournisseur Angular après son enregistrement auprès de votre widget, ouvrez le script client du fournisseur Angular dans l’éditeur de widget.
   1. Accédez à la Configuration du Portail de services > Éditeur de widget.
   2. Sous Modifier un widget existant, sélectionnez le widget associé à votre fournisseur Angular.
   3. Dans le menu Afficher , ouvrez la liste Dépendances et sélectionnez le fournisseur Angular.
      Remarque :

      Seuls les fournisseurs d’angle associés au widget sont affichés dans la liste Dépendances . Cette liste inclut toutes les ressources externes dont dépend votre widget.
      Le script client du fournisseur Angular s’affiche dans l’éditeur de widget. Dans l’interface de l’éditeur de widget, vous pouvez modifier et enregistrer vos scripts de widget et de fournisseur en même temps.

Que faire ensuite

Pour utiliser un fournisseur Angular avec plusieurs widgets, enregistrez votre fournisseur avec chaque widget et mettez à jour les scripts appropriés.