Angular.js : comment exécuter une fonction au chargement de la page ?
La technique en question permet de n'exécuter du code qu'en fonction du contenu HTML de la page qui a été générée.
Il est possible de paramétrer des fonctions en JavaScript pour qu'elles s'exécutent à la fin de l'affichage de la page. Cette technique permet de n'exécuter du code qu'en fonction du contenu HTML de la page qui a été générée. En JavaScript, on se baserait sur l'événement load de la page qui indique la fin du chargement. Si l'on souhaite effectuer ce traitement avec le framework AngularJS, il faut utiliser d'autres solutions.
La méthode la plus simple est d'ajouter une fonction qui contiendra le code que l'on veut exécuter à la fin du contrôleur, puis de l'exécuter juste après.
// à la fin du contrôleur
var init = function () {
// traitement à effectuer au chargement de la page
};
// on exécute la fonction
init();
Le contrôleur étant instancié juste après que le HTML a été chargé, la fonction s'exécutera après le chargement de la page.
Une autre solution consiste à utiliser l'attribut ng-init dans une division et à déclarer la fonction en question dans le contrôleur :
// On ajoute le contrôleur avec la fonction lancée au démarrage.
<div data-ng-controller=myCtrl data-ng-init=init()></div>
// Dans le contrôleur
$scope.init = function () {
// traitement à effectuer au chargement de la page
};
AngularJS recommande de ne pas utiliser cette technique, car elle ne sert normalement que pour initialiser des valeurs dans une boucle ng-repeat, mais elle fonctionne. Faites bien attention à mettre l'attribut data-ng-controller avant l'attribut data-ng-init, car sinon, le framework essaiera d'appeler une méthode qui n'existe pas encore.
Une dernière solution est d'utiliser dans le contrôleur l'événement viewContentLoaded, qui correspond à la fin du chargement du code des vues. Il faut paramétrer une fonction qui sera exécutée lorsque cet événement se produit avec la fonction $watch() :
$scope.$watch('$viewContentLoaded', function(){
// traitement à effectuer au chargement de la page
});