In Angular ist Controller eine JavaScript -Funktion (Typ/Klasse), die als Instanz eines Winkelbereichs (//www.vevb.com/article/91749.htm) verwendet wird, das sich mit Ausnahme des Wurzelbereichs erstreckt. Wenn wir einen neuen Kinderbereich durch den Bereich erstellen. Dies zeigt Angular, dass der Controller und der neue Umfang kombiniert werden müssen und sein Verhalten erweitern müssen.
Controller kann verwendet werden als:
1. Stellen Sie den Ausgangszustand des Zielfernrohrobjekts fest.
2. Fügen Sie Verhalten zum Umfang hinzu.
1. Einrichten des Anfangszustands eines Bereichsobjekts
Wenn wir eine Anwendung erstellen, müssen wir normalerweise den Initialisierungszustand für den Winkelbereich festlegen.
Angular wendet ein neues Zielfernrohr -Objekt auf den Controller -Konstruktor an (es wird geschätzt, dass es als Parameter übergeben wird) und legt den anfänglichen Umfangszustand fest. Dies bedeutet, dass Angular niemals Instanzen vom Typ Controller erzeugt (d. H. Der neue Bediener für den Controller -Konstruktor verwendet). Der Konstruktor wird immer auf vorhandene Zielfernrohrobjekte angewendet.
Wir erstellen den Anfangszustand des Umfangs, indem wir das Modellattribut erstellen. Zum Beispiel:
Funktion Grußctrl ($ scope) {$ scope.greeting = "Hola!";}
Der Controller "Grußctrl" erstellt ein Modell namens "Gruß", das auf die Vorlage angewendet werden kann.
2.. Hinzufügen eines Verhaltens zu einem Zielfernrohrobjekt Hinzufügen
Das Verhalten an einem Winkelbereichsobjekt besteht in der Form von Bereichsattributen für Vorlagen und Ansichten. Dieses Verhalten kann das Modell der Anwendung ändern.
Wie im Kapitel "Guided Model" (//www.vevb.com/article/91777.htm) erläutert, wird jedem Objekt (oder primitiven Typ) dem Umfang zugewiesen und wird zum Modellattribut. Jede Funktion, die an den Bereich beigefügt ist, ist für Vorlagenansichten verfügbar und kann über Winkelausdruck oder über NG -Ereignishandleranweisung (z. B. NGCLICK) aufgerufen werden.
3.. Die Controller korrekt verwenden
Im Allgemeinen sollten Controller nicht versuchen, zu viel zu tun. Es sollte nur die Geschäftslogik enthalten, die für eine einzige Ansicht erforderlich ist (und es hat sich nicht umgedreht, und ich habe immer gedacht, dass Controller nur eine Weiterleitung ist ...).
Um den Controller einfach zu halten, besteht die allgemeine Möglichkeit darin, die Arbeiten zu extrahieren, die nicht zum Controller in den Dienst gehören, und diese Dienste durch Abhängigkeitsinjektion im Controller zu nutzen. Diese Dinge werden im Kapitel Abhängigkeitsinjektionsdienste des Assistenten erörtert.
Machen Sie nicht Folgendes im Controller:
4. Assoziieren Sie Controller mit Winkelsbereichsobjekten
Wir können Controller und Scope -Objekte explizit mit Scope assoziieren.
1. Beispiel für Controller -Konstruktor und -Methode
Um zu veranschaulichen, wie die Controller -Komponente in Angular funktioniert, erstellen wir eine kleine Anwendung mit den folgenden Komponenten:
Die Nachricht in unserer Vorlage enthält eine Bindung an das Gewürzmodell, das standardmäßig auf "sehr" eingestellt ist. Legen Sie den Wert des Gewürzmodells auf "Chili" oder "Jalapeño" gemäß der zugeklickten Schaltfläche fest, und die Nachricht wird automatisch durch Datenbindung aktualisiert.
<! DocType html> <html ng-App> <Head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <titel> würziges kontroller </title> <meta content = "ie type = "text/css"> .ng-cloak {display: keine; " src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion SpicyCtrl ($ scope) {$ scope.spice = "sehr"; $ scope.chilispicy = function () {$ scope.spice = "chili"; }; $ scope.jalapenospicy = function (val) {this.spice = val; }; } </script> </body> </html>Dinge, die im obigen Beispiel zu beachten sind:
Die Controller -Methode kann die Parameter entnehmen, wie im folgenden Beispiel gezeigt:
<! DocType html> <html ng-App> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <title> controller-method-arments </title> <meta content = ie = edge, chrome = 1 "http-Armente" X-Ua-° C. type = "text/css"> .ng-cloak {display: keine; } </style> </head> <body> <div ng-controller = "spicyctrl"> <Eingabe ng-model = "customspice" value = "Wasabi"/> <button ng-klick = "würzig (CustomSpice)"> Customspice </button> <button <ptaste ng-klick = "Spicy ('Chili'). {{Spice}} spicy! $ scope.spicy = function (Spice) {$ scope.spice = Spice; }; } </script> </body> </html>Beachten Sie, dass der SpicyCtrl -Controller jetzt nur eine Methode mit einem Parameter "Gewürz" definiert und "würzig" bezeichnet. Die Vorlage kann auf die Controller -Methode verweisen und einen konstanten Zeichenfolge oder einen Modellwert an sie übergeben.
Die Controller -Vererbung in Angular basiert auf der Vererbung der Bereichsumfang. Schauen wir uns das folgende Beispiel an:
<! DocType html> <html ng-App> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <titel> Controller-Inheritanz </title> <meta content = "ie type = "text/css"> .ng-cloak {display: keine; } </style> </head> <body> <div ng-controller = "mainctrl"> <p> good {{timeofday}}, {{name}}! ng-controller = "babyctrl"> good {{timeofday}}, {{name}}! "Hauptzeit"; $ scope.name = 'Hauptname'; } function ChildCtrl ($ scope) {$ scope.name = 'child name'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'babyname'; } </script> </body> </html>Beachten Sie, wie wir 3 NgController direkt in die Vorlage nisten. Für unsere Ansicht wird diese Vorlagenstruktur 4 Bereiche erstellen:
Die ererbte Arbeit ist in Controller und Modell gleich. In unserem vorherigen Beispiel können alle Modelle über den Controller umgeschrieben werden.
Hinweis: Der Standard -Prototyp -Vererbung zwischen zwei Controllern funktioniert nicht wie wir dachten, da der Controller, wie bereits erwähnt, nicht direkt durch Angular initialisiert wird, sondern dieses Zielfernrohr angewendet wird. (Controller werden nicht direkt durch Angular instanziiert, sondern auf das Zielfernrohrobjekt angewendet. Hier ist dieselbe wie zuvor, ich verstehe immer noch nicht.)
5. Teststeuerung
Während es viele Möglichkeiten gibt, Controller zu testen, erfordert eine der besten Konventionen, wie unten gezeigt, eine Injektion von $ rootscope und $ controller. (Der Test muss mit Jasmine.js koordiniert werden)
<! DocType html> <html ng-App> <Head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <titel> controller-Test </title> <meta content = "ie = edel, chrome = 1" http-äquiv = · · ua-compatible "; href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: keine; " type = "text/javaScript"> </script> <script src = "../ Angular-mocks-1.0.1.js" Typ = "text/javaScript"> </script> <script type = "text/javaScript"> Funktion MyController ($ scope) {$ scope.spices = [{{{{{{{{name ",": ":", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",": "pasila", ",", ":" pasiler ",", ",", ",": "pasiel", " {"Name": "Jalapeno", "Spiceiness": "Heiß heiß!"}, {"Name": "Habanero", "Schärfe": "Lava Hot !!"}]; $ scope.spice = "Habanero"; } beschreiben ("MyController -Funktion", function () {beschreiben ("mycontroller", function () {var scope; voran (inject (function ($ rootscope, $ controller) {scope = $ rootscope. Spices ', function () {erwartete (scope.spices.length) .tobe (3); }); (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialreporter = neuer jasmin.trivialreporter (); jasmineenv.addreporter (trivialReporter); var currentWindowonload = Fenster;Wenn wir den verschachtelten Controller testen müssen, müssen wir im Test die gleiche Vererbungsbeziehung wie im DOM erstellen.
<! DocType html> <html ng-App> <Head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <titel> controller-Test </title> <meta content = "ie = edel, chrome = 1" http-äquiv = · · ua-compatible "; href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: keine; " type = "text/javaScript"> </script> <script src = "../ Angular-mocks-1.0.1.js" Typ = "text/javascript"> </script> <script type = "text/javascript"> Funktion mainCtrl ($ scope) {$ scope.timeofday = 'Main Time'; $ scope.name = 'Hauptname'; } function ChildCtrl ($ scope) {$ scope.name = 'child name'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ scope.name = 'babyname'; } beschreiben ("MyController", function () {var mainScope, childscope, babyScope; voran (inject ($ ($ rootscope, $ controller) {mainScope = $ rootscope. $ controller (ChildCtrl, $ Scope: ChildScope}); erwarten (mineScope.name) .tobe ("Hauptname"). (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialreporter = neuer jasmin.trivialreporter (); jasmineenv.addreporter (trivialReporter); var currentWindowonload = Fenster;Das obige ist die Informationen über AngularJS, die die Controller -Komponente verstehen. Wir werden in Zukunft weiterhin relevante Informationen hinzufügen. Vielen Dank für Ihre Unterstützung!