"Étendre" un controlleur avec Angular

Il n'a pas l'air aisé de faire hériter des controlleurs entre eux avec Angular. Et pourtant c'est quelque chose de relativement simple. Regardons d'abord qu'est-ce-qu'un controlleur et tout deviendra très clair.

C'est quoi un controlleur ?

Un controlleur, dans Angular, est une simple fonction. Cette fonction prend en paramètre un $scope. Ce $scope sert de lien avec la vue. Sans ce $scope, le controlleur ne sert pas à grand chose, du moins, il ne peut pas contrôler de vue puisque le seul lien entre les deux est cet objet $scope.

Et donc, cette fonction qui fait office de contrôlleur, que fait-elle ? Elle se contente de modifier l'objet $scope en lui ajouter des attributs et des fonctions afin de les exposer à la vue.

Pourquoi hériter ?

Parfois, il arrive d'avoir des vues quasiment identiques à quelques détails près. Ce qui va changer, ça sera par exemple le nom d'un attribut ou un service. Prenons un exemple :

Nous avons deux controlleurs qui font strictement la même chose si ce n'est qu'ils utilisent un service différent mais qui proposent la même API. On a donc envie de mutualiser ce code dans un controlleur commun afin d'éviter de dupliquer du code. Mais comment faire ?

Comment "hériter" ?

Je met "hériter" entre quote car ce n'est pas du tout de l'héritage dont il s'agit ici. Comme expliqué plus haut, le controlleur ne fait que modifier un object $scope. Notre but est donc d'avoir une fonction "parente" qui va modeler le $scope de façon générique et des fonctions "filles" qui vont juste passer des paramètres particulier à la fonction "parente" pour que son $scope soit modelé à son goût. Et voici ce que ça donne :

Évidemment, ici, les controlleurs enfants sont plus longs que le parent. Il faut imaginer que le parent fasse bien plus que 3 lignes pour y voir un intérêt.

Je ne suis pas certain que ça soit une façon de procéder des plus conseillées, mais en tout cas, ça marche. Merci de me donner vos avis si vous avez de meilleurs idées.

Hadrien

Hi, I'm a french Javascript Lead Developer, Web Architect from Toulouse, France. I've worked for 12 years for many projects with YUI, AngularJS, Aurelia.io and now React and React native.

Toulouse, France https://hadrien.eu