Réutiliser les composants avec des fournisseurs d’angle

Les fournisseurs d’angle 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 d’angle au lieu de surcharger vos contrôleurs clients avec des données persistantes et une logique supplémentaire. Avec les fournisseurs Angular, vous pouvez gérer les données pendant toute la durée de vie de vos Portail de services composants et objets de données sur 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 lorsque vous modifiez des enregistrements ou des filtres.
• Partager le contexte entre les widgets.
• Maintenir et conserver l’état.
• Créez des comportements et injectez-les dans plusieurs widgets.

Pour en savoir plus, consultez 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’angles de widget s’ouvre.
2. Cliquez sur Nouveau et créez un enregistrement.
3. Sélectionnez le type de fournisseur d’angle.
   • Directive
   • Usine
   • Service
   Pour faciliter la migration vers ECMAScript 6 ou 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 .

   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 d’angle à un widget.
   1. Accédez à <yourInstanceURL>/sp_config ?id=widget_edit.
   2. Ouvrez le widget que vous souhaitez associer au fournisseur d’angle.
   3. Dans 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 d’angle au widget approprié.
   7. Cliquez sur Enregistrer.
7. Mettez à jour les scripts appropriés dans votre widget pour injecter le fournisseur d’angle dans le widget.

   Injectez l’instanciateur dans le script client de votre widget en transmettant le nom de l’instanciateur comme argument dans votre fonction contrôleur client. Vous pouvez ensuite accéder à l’objet défini dans la fonction d’instanciateur 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 du widget.

8. Pour modifier le fournisseur d’angle après son enregistrement avec votre widget, ouvrez le script client du fournisseur d’angle 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 d’angle.
   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 des dépendances . Cette liste inclut toutes les ressources externes dont dépend votre widget.
      Le script client Angular Provider s’affiche dans l’éditeur de widget. Dans l’interface de l’éditeur de widget, vous pouvez modifier et enregistrer votre widget et vos scripts de fournisseur en même temps.

Que faire ensuite

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