AngularJS comprenant le composant du contrôleur

Auteur：Eve Cole Date de mise à jour：2025-08-01 14:32:02

Dans Angular, le contrôleur est une fonction JavaScript (type / classe) qui est utilisée comme instance d'une portée angulaire (//www.vevb.com/article/91749.htm) qui s'étend sauf la portée racine. Lorsque nous créons une nouvelle portée enfant via la portée. $ Nouvelle API (http://docs.angularjs.org/api/ng.$rootscope.scope#$new), il y a une option pour la transmettre dans le contrôleur en tant que paramètre de la méthode (je ne l'ai pas compris ici, je ne sais qu'au premier paramètre du contrôleur, une gamme nouvelle, avec une scope parentale contraignante). Cela indiquera à Angular que le contrôleur et la nouvelle portée doivent être combinés et étendre son comportement.

Le contrôleur peut être utilisé comme:

1. Définissez l'état initial de l'objet de portée.

2. Ajouter un comportement à la portée.

1. Configuration de l'état initial d'un objet de portée

Habituellement, lorsque nous créons une application, nous devons définir l'état d'initialisation pour la portée angulaire.

Angular applique un nouvel objet de portée au constructeur du contrôleur (il est estimé à être transmis en tant que paramètre) et établit l'état de portée initial. Cela signifie qu'Angular ne crée jamais d'instances de type contrôleur (c'est-à-dire n'utilise pas le nouvel opérateur pour le constructeur du contrôleur). Le constructeur est toujours appliqué aux objets de portée existants.

Nous créons l'état initial de portée en créant l'attribut modèle. Par exemple:

Fonction GreetingCtrl ($ Scope) {$ scope.greeting = "Hola!";}

Le contrôleur "Greetingctrl" crée un modèle appelé "salutation" qui peut être appliqué au modèle.

2. Ajout d'un comportement à un objet de portée

Le comportement sur un objet de portée angulaire est sous la forme d'attributs de méthode de portée pour les modèles et les vues. Ce comportement peut modifier le modèle de l'application.

Comme discuté dans le chapitre du modèle guidé (//www.vevb.com/article/91777.htm), tout objet (ou type primitif) est affecté à la portée et devient l'attribut modèle. Toute fonction attachée à la portée est disponible pour les vues de modèle et peut être appelée via l'expression angulaire ou via la directive du gestionnaire d'événements NG (tel que NGClick).

3. Utiliser correctement les contrôleurs

D'une manière générale, les contrôleurs ne devraient pas essayer d'en faire trop. Il ne doit contenir que la logique métier requise pour une seule vue (et elle ne s'est pas retournée et j'ai toujours pensé que le contrôleur n'était qu'un transfert ...).

Pour garder le contrôleur simple, le moyen courant est d'extraire le travail qui n'appartient pas au contrôleur dans le service et d'utiliser ces services par injection de dépendance dans le contrôleur. Ces choses seront discutées dans le chapitre des services d'injection de dépendance de l'assistant.

Ne faites pas ce qui suit dans le contrôleur:

Tout type de contrôleur d'opération DOM ne doit contenir que la logique métier. L'opération DOM, c'est-à-dire la logique de performance de l'application, est bien connue pour sa difficulté de test. Mettre toute logique de représentation dans le contrôleur affecte considérablement la testabilité de la logique d'application. Angular fournit la liaison des données (http://docs.angularjs.org/guide/dev_guide.templates.databinding) afin de fonctionner automatiquement (mettre à jour) le dom. Si nous souhaitons effectuer nos opérations DOM personnalisées, nous pouvons extraire la logique de présentation en directive (//www.vevb.com/article/91739.htm).
Formatage d'entrée - Utilisez des contrôles de formulaire angulaire (//www.vevb.com/article/91744.htm) à la place.
Filtrage de sortie - Utilisez plutôt des filtres angulaires.
Exécutez le code sans état ou avec état et par contrôleur - utilisez les services angulaires à la place.
Instancier ou gérer le cycle de vie des autres composants (par exemple, créer une instance de service).

4. Association des contrôleurs à des objets de portée angulaire

Nous pouvons explicitement associer des objets de contrôleur et de portée via Scope. $ Nouveau, ou utiliser implicitement la directive NgController (http://docs.angularjs.org/api/ng.directive:ngController) ou $ Route Service (http://docs.angularjs.org/api/ng.$$Route).

1. Exemple de constructeur de contrôleur et de méthode

Pour illustrer comment le composant de contrôleur fonctionne dans Angular, créons une petite application en utilisant les composants suivants:

Un modèle avec deux boutons et un message simple.
Un modèle composé d'un attribut de chaîne appelé "Spice".
Un contrôleur avec deux méthodes qui définissent les propriétés d'épices.

Le message de notre modèle contient une liaison au modèle d'épices, qui est défini sur "très" par défaut. Définissez la valeur du modèle d'épices sur "chili" ou "jalapeño" en fonction du bouton en cours de clic, et le message sera automatiquement mis à jour par la liaison des données.

 <! Doctype html> <html ng-app> <éad> <meta http-equiv = "contenu-type" content = "text / html; charset = utf-8" /> <ititle> spicy-controller </ title> <meta content = "ie = edge, chrome = 1" http-equiv = "x-ua-compatable"> <style "http-equiv =" x-ua-compatble "> <style" http-equiv = "x-ua-compatable"> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> <div ng-controller = "Spicyctrl"> <Button ng-Click = "chilispicy ()"> chili </utton> <Button ng-Click = "jalapenospicy ('jalapeño')"> jalapeño </fitton> <p> La nourriture est {{Spice} </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> function spicyctrl ($ scope) {$ scope.spice = "très"; $ scope.chilispicy = function () {$ scope.pice = "chili"; }; $ scope.jalapenospicy = fonction (val) {this.pice = val; }; } </ script> </ body> </html>

Choses à noter dans l'exemple ci-dessus:

La directive NGController est utilisée comme notre modèle (implicitement) pour créer une portée, qui sera appelée paramètre Spicyctrl.
Spicyctrl n'est qu'une fonction JavaScript normale. En tant que règle de dénomination (aléatoire), le nom commence par des lettres majuscules et se termine par "Ctrl" ou "Contrôleur".
L'attribution des valeurs d'attribut peut créer ou mettre à jour le modèle de $ Scope.
La méthode du contrôleur peut être créée en affectant directement à $ SCOPE. (méthode chilispicy)
Les deux méthodes de contrôleur sont disponibles dans des modèles (efficaces dans l'élément où réside l'attribut NG-contrôleur ainsi que dans ses éléments enfants).
Remarque: Les versions précédentes d'Angular (avant 1.0RC) nous permettent de l'utiliser au lieu de $ Scope pour définir $ Scope, mais il ne s'applique plus ici. Dans les méthodes définies sur la portée, cela équivaut à une portée $ (Angular prend cela à la portée), mais pas dans notre constructeur de contrôleur.
Remarque: La version précédente d'Angular (avant 1.0RC) ajouterait automatiquement la méthode du prototype du contrôleur à la portée, mais maintenant ce n'est pas le cas. Toutes les méthodes doivent être ajoutées manuellement à la portée. (Je me souviens qu'il y avait un guide auparavant, et je l'ai utilisé. Il n'a pas encore été mis à jour -_-!)

La méthode du contrôleur peut prendre des paramètres, comme indiqué dans l'exemple suivant:

 <! Doctype html> <html ng-app> <éad> <meta http-equiv = "contenu-type" content = "text / html; charset = utf-8" /> <itle> contrôleur-méthode-arments </ title> <meta content = "ie = edge, chrome = 1" http-equiv = "x-ua-compatable"> <style "http-equiv =" x-ua-compatble "> <style" http-equiv = "x-ua-compatable"> <style "http-equiv =" x-ua-compatable "> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> <div ng-controller = "Spicyctrl"> <entrée ng-model = "CustomSpice" value = "wasabi" /> <Button ng-Click = "Spicy (CustomSpice)"> Customspice </ Button> <br/> <Button Ng-Click = "Spicy ('CHILI')" {{Spice}} Spicy! </p> </ div> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascript"> function spicyctrl ($ scope) {$ scope.spicy = "très"; $ scope.spicy = fonction (Spice) {$ scope.pice = spice; }; } </ script> </ body> </html>

Notez que le contrôleur Spicyctrl définit désormais une méthode avec un paramètre "Spice" et appelé "épicé". Le modèle peut se référer à la méthode du contrôleur et y transmettre une chaîne constante ou une valeur de modèle.

L'héritage du contrôleur en angulaire est basé sur l'héritage de la portée. Jetons un coup d'œil à l'exemple suivant:

 <!DOCTYPE html><html ng-app><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>controller-inheritance</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> <div ng-controller = "Mainctrl"> <p> bon {{timeofday}}, {{name}}! </p> <div ng-controller = "childctrl"> <p> bon {{timeodday}}, {{nom}}! Ng-Controller = "babyCtrl"> bon {{TimeOfday}}, {{name}}! </p> </div> </ div> <script src = "../ Angular-1.0.1.js" type = "Text / Javascrip «Temps principal»; $ scope.name = 'nom principal'; } fonction childCtrl ($ scope) {$ scope.name = 'child name'; } fonction babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'nom de bébé'; } </ script> </ body> </html>

Remarquez comment nous nidons 3 ngController directement dans le modèle. Pour notre point de vue, cette structure de modèle entraînera la création de 4 portées:

Portée de la racine.
MAINCTRL PORTÉE, y compris Timeofday et Modèle de nom.
ChildCtrl Scope, remplace le modèle de nom de la portée MainCtrl, hérite du modèle Timeofday.
BabyCtrl Scope, remplace le Timeofday de la portée de Mainctrl et le nom de la portée de ChildCtrl.

Le travail hérité est le même dans le contrôleur et le modèle. Ainsi, dans notre exemple précédent, tous les modèles peuvent être réécrits via le contrôleur.

Remarque: L'héritage du prototype standard entre deux contrôleurs ne fonctionne pas comme nous l'avons pensé, car comme nous l'avons mentionné précédemment, le contrôleur n'est pas initialisé directement via Angular, mais applique plutôt cet objet Scope. (Les contrôleurs ne sont pas instanciés directement par Angular, mais sont plutôt appliqués à l'objet Scope, voici le même qu'avant, je ne comprends toujours pas.)

5. Contrôleur de test

Bien qu'il existe de nombreuses façons de tester les contrôleurs, l'une des meilleures conventions, comme indiqué ci-dessous, nécessite une injection de $ Rootscope et $ contrôleur. (Le test doit être coordonné avec jasmine.js)

 <! Doctype html> <html ng-app> <ead> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> contrôleur-test </ title> <meta content = "ie = edge, chrome = 1" http-equiv = "x-ua-compatble"> <link rolaire = "http-equiv =" x-ua-compatble "> <link rolaire =" http-equiv = "x-ua-compatble"> <link rall = "roral =" ul href = "../ jasmine.css"> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script src = "../ angular-scenario-1.0.1.js" type = "text / javascript"> </ script> <script src = "../ jasmine.js" type = "text / javascript"> </ script> <script src = "../ angular-macks-1.0.1.js" type = "text / javascript"> </ script> <script type = "text / javascrip {"Name": "Jalapeno", "Spiceness": "Hot Hot Hot!"}, {"Name": "Habanero", "Spiciness": "Lava Hot !!"}]; $ scope.pice = "Habanero"; } décrire ("MyController Function", function () {décrire ("myController", function () {var scope; BeforeEach (inject (function ($ rootscope, $ contrôleur) {scope = $ rootscope. Spices ', fonction () {attendre (Scope.Speces.Length) .tobe (3);}); }); (fonction () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new jasmine.tvialReporter (); jasmineenv.addreporter (trivialreporter); jasmineenv.pecFilter = function (spec) {return TRIVIALPORTER. };

Si nous devons tester le contrôleur imbriqué, nous devons créer la même relation d'héritage de portée dans le test que dans le DOM.

 <! Doctype html> <html ng-app> <ead> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> contrôleur-test </ title> <meta content = "ie = edge, chrome = 1" http-equiv = "x-ua-compatble"> <link rolaire = "http-equiv =" x-ua-compatble "> <link rolaire =" http-equiv = "x-ua-compatble"> <link rall = "roral =" ul href = "../ jasmine.css"> <style type = "text / css"> .ng-coak {affichage: aucun; } </ style> </ head> <body> <script src = "../ angular-1.0.1.js" type = "text / javascript"> </ script> <script src = "../ angular-scenario-1.0.1.js" type = "text / javascript"> </ script> <script src = "../ jasmine.js" type = "text / javascript"> </ script> <script src = "../ angular-mocks-1.0.1.js" type = "text / javascript"> </ script> <script type = "Text / javascript"> function Mainctrl ($ scope) {$ scope.TimeOdday = 'Main Time'; $ scope.name = 'nom principal'; } fonction childCtrl ($ scope) {$ scope.name = 'child name'; } fonction babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'nom de bébé'; } décrire ("myController", function () {var MainScope, ChildScope, babyscope; BeforeEach (inject (function ($ rootscope, $ contrôleur) {MainScope = $ rootscope. $ new (); var mainctrl = $ contrôleur (Mainctrl, {$ scope: MainScope}); childscope = MainScope. $ new ();); $ Controller (ChildCtrl, {$ Scope: ChildScope}); attendre (MAINSCEUX.NAME) .Tobe (nom principal "); (fonction () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new jasmine.tvialReporter (); jasmineenv.addreporter (trivialreporter); jasmineenv.pecFilter = function (spec) {return TRIVIALPORTER. };

Ce qui précède est les informations sur AngularJS Comprenant le composant du contrôleur. Nous continuerons d'ajouter des informations pertinentes à l'avenir. Merci pour votre soutien!