
MCP Server : Implémenter un serveur Model Context Protocol en TypeScript
Découvrez comment créer un serveur MCP en TypeScript à l'aide du SDK officiel. Apprenez à fournir un contexte riche aux LLMs.
Comme vu dans l’article précédent, une directive est un marqueur HTML interprété par AngularJS via son $compile. Nous allons donc nous intéresser ici aux divers moyens nous permettant d’avoir une gestion la plus fine possible des transformations de nos directives.
Nous pouvons donc agir à quatre moments clefs de la vie d’une directive :
Ci-dessous une directive implémentant tous ces concepts :
angular.module('exemple', [])
.directive('myDirective', function() {
return {
restrict: 'EA',
controller: function($scope, $element, $attrs, $transclude) {
// controller code
},
compile: function(tElement, tAttributes, transcludeFn) {
// compile code
return {
pre: function(scope, element, attributes, controller, transcludeFn) {
// pre-link code
},
post: function(scope, element, attributes, controller,transcludeFn) {
// post-link code
}
};
}
};
});
La fonction pre-link étant rarement utile, nous pouvons la supprimer. Dans ce cas le compile doit retourner la fonction post-link.
angular.module('exemple', [])
.directive('myDirective', function() {
return {
restrict: 'EA',
controller: function($scope, $element, $attrs, $transclude) {
// controller code
},
compile: function(tElement, tAttributes, transcludeFn) {
// compile code
return function(scope, element, attributes, controller,transcludeFn) {
// post-link code
}
}
};
});
Si l'on ne souhaite effectuer aucune manipulation du template, la fonction compile devient inutile Dans ce cas il est possible de déclarer uniquement un link contenant la fonction post-link.
angular.module('exemple', [])
.directive('myDirective', function() {
return {
restrict: 'EA',
controller: function($scope, $element, $attrs, $transclude) {
// controller code
},
link: function(scope, element, attributes, controller,transcludeFn) {
// post-link code
}
};
});
Il peut arriver qu'une directive doive modifier les éléments du DOM se trouvant à l’intérieur d'elle. Dans ce cas, la transclusion est notre amie, et nous permet de récupérer le contenu interne à la directive pour le manipuler.
Pour se faire il suffit de spécifier à sa directive qu'elle souhaite utiliser la transclusion.
angular.module('exemple', [])
.directive('myDirective', function () {
return {
restrict: 'EA',
transclude: true,
scope: {
chapo: @
},
template: template.html
link: function(scope, element, attributes, controller,transcludeFn) {
// post-link code
}
};
});
Mais cela seul ne suffit pas, il vous faudra aussi définir dans son template l'emplacement où la transclusion sera faite
<div> <h2>{{chapo}}</h2> <div ng-transclude></div> </div>
Dans certains cas plus complexes, il faudra passer par la fonction $transclude, qui est un peu plus complexe mais pas insurmontable.
Nous voilà donc au terme de notre promenade dans le monde merveilleux des directives sous Angular 1.x. Souvent un peu complexe à prendre en main au début, on peut très rapidement en devient friand parfois de façon un peu excessive.
Si je peux vous donner un conseil assurez-vous que la fonctionnalité va être répété sinon il peut être contre-productif de faire une directive.
En complément n'hésitez à aller voir le guide du site officiel, et bon Angular à tous !
Auteur(s)
Denis Schneider
Vous souhaitez en savoir plus sur le sujet ?
Organisons un échange !
Notre équipe d'experts répond à toutes vos questions.
Nous contacterDécouvrez nos autres contenus dans le même thème
Découvrez comment créer un serveur MCP en TypeScript à l'aide du SDK officiel. Apprenez à fournir un contexte riche aux LLMs.
Découvrez comment créer un plugin ESLint en TypeScript avec la nouvelle configuration "flat config" et publiez-le sur npm.
Apprenez à concevoir une barre de recherche accessible pour le web, conforme RGAA. Bonnes pratiques, erreurs fréquentes à éviter et exemples concrets en HTML et React/MUI.