Puis-je lier un fichier javascript externe à un contrôleur AngularJS?
Cela peut être une question stupide. Je sais que les contrôleurs AngularJS utilisent du code javascript pour que la logique de l'application reste en dehors de la vue. Mais je me demandais si je pouvais lier un fichier javascript externe à un contrôleur afin qu'il ne soit pas trop long.
Si cela est possible, partagerez-vous également la syntaxe de la procédure à suivre? Quelque chose comme:
app.controller('demoCtrl', ['$scope', function ($scope) {
$scope.msgtxt='Hello World';
src=somejavascriptfile.js;
}]);
Si votre problème est que la logique du contrôleur est trop longue, vous avez raison de dire qu'il s'agit d'une odeur de code. Vous voulez rendre le contrôleur aussi fin que possible, juste assez de logique pour gérer les événements de vue et mettre à jour le modèle (portée). Si vous voulez refactoriser votre code de contrôleur, la première étape consiste à extraire la logique en service (s) (dans les fournisseurs/usines/services de jargon angulaire). Les services peuvent ensuite être injectés dans votre contrôleur, de la même manière que vous avez injecté le service $scope.
Lisez cet article sur le site pour plus de détails sur la procédure à suivre.
La prochaine étape peut être de rechercher une logique (principalement liée à l'interface utilisateur) pouvant être extraite dans des directives.
Si vous devez utiliser une bibliothèque javascript externe dans votre application angular, la meilleure solution consiste à ajouter ce script à la section des scripts de votre fichier html et à envelopper la fonctionnalité dans un service ou une directive (s'il est lié à l'interface utilisateur). Assurez-vous de vérifier s’il existe des modules angulaires disponibles pour la bibliothèque tierce que vous souhaitez extraire.
Non seulement vous pouvez diviser votre code de contrôleur entre différents fichiers, mais vous le faites probablement devrait. Un contrôleur angulaire est responsable de la logique métier derrière une vue, et uniquement de celle-là. Vous vous trompez si, à l'intérieur du contrôleur, vous êtes (liste non exhaustive):
- accéder à votre backend depuis celui-ci
- manipuler le DOM
- écrire un code utilitaire pour afficher des alertes dans votre application (par exemple)
Vos composants doivent être concis} et de responsabilité unique.
Voici un exemple de la manière dont vous exporteriez une partie de votre code dans un service. Vous ne liez pas un fichier js à partir d'un contrôleur, mais vous le chargez dans votre page et injectez le service en tant qu'argument de votre contrôleur:
1) Chargez votre service dans index.html:
<script src="js/factories/loggerService.js"></script>
2) Implémentez votre service dans loggerService.js
app.factories('loggerService', function () {
//
// Implement here some logging methods
//
// IMPORTANT: do not bloat this service with methods not related
// with logging
//
});
3) Injectez votre service dans votre contrôleur:
app.controller('demoCtrl', function ($scope, loggerService) {
loggerService.info(...)
});
En passant, cette loggerService ne serait utile que si vous avez besoin de quelque chose de différent du service fourni par le service intégré angulaire $log
Dans un fichier différent, définissez un service contenant la logique et appelez-le simplement à partir du contrôleur.
app.controller('demoCtrl', ['$scope', function (ServiceFromDifferentFile, $scope) {
$scope.msgtxt='Hello World';
ServiceFromDifferentFile.doStuff()
}]);