Angularjs Comprender el componente del controlador

Autor：Eve Cole Fecha de actualización：2025-08-01 14:32:02

En Angular, el controlador es una función JavaScript (tipo/clase) que se usa como una instancia de un alcance angular (//www.vevb.com/article/91749.htm) que se extiende excepto el alcance de la raíz. Cuando creamos un nuevo alcance infantil a través del alcance. $ New API (http://docs.angularjs.org/api/ng.$rootscope.scope#$new), existe una opción para pasarlo al controlador como un parámetro de parámetro de unión (no lo entendí aquí, solo sé que el primer parámetro del controlador es un Scope recién creado, con un parámetro vinculante). Esto le dirá a Angular que el controlador y el nuevo alcance deben combinarse y extender su comportamiento.

El controlador se puede usar como:

1. Establezca el estado inicial del objeto de alcance.

2. Agregue el comportamiento al alcance.

1. Configuración del estado inicial de un objeto de alcance

Por lo general, cuando creamos una aplicación, necesitamos establecer el estado de inicialización para el alcance angular.

Angular aplica un nuevo objeto de alcance al constructor del controlador (se estima que se pasa como parámetro) y establece el estado de alcance inicial. Esto significa que Angular nunca crea instancias de tipo controlador (es decir, no usa el nuevo operador para el constructor del controlador). El constructor siempre se aplica a los objetos de alcance existentes.

Creamos el estado inicial del alcance creando el atributo del modelo. Por ejemplo:

Función GreetingCtrl ($ Scope) {$ scope.greeting = "Hola!";}

El controlador "SaludingCtrl" crea un modelo llamado "Saludo" que se puede aplicar a la plantilla.

2. Agregar comportamiento a un objeto de alcance

El comportamiento en un objeto de alcance angular es en forma de atributos del método de alcance para plantillas y vistas. Este comportamiento puede modificar el modelo de la aplicación.

Como se discutió en el Capítulo Guiado Modelo (//www.vevb.com/article/91777.htm), se asigna cualquier objeto (o tipo primitivo) al alcance y se convierte en el atributo del modelo. Cualquier función conectada al alcance está disponible para vistas de plantilla, y puede llamarse a través de la expresión angular o mediante la Directiva del controlador de eventos NG (como NgClick).

3. Uso de controladores correctamente

En términos generales, los controladores no deben tratar de hacer demasiado. Solo debe contener la lógica comercial requerida para una sola vista (y no ha cambiado y siempre he pensado que el controlador es solo un reenvío ...).

Para mantener el controlador simple, la forma común es extraer el trabajo que no pertenece al controlador al servicio y usar estos servicios a través de la inyección de dependencia en el controlador. Estas cosas se discutirán en el capítulo de Servicios de inyección de dependencia del mago.

No hagas lo siguiente en el controlador:

Cualquier tipo de controlador de operaciones DOM solo debe contener lógica de negocios. La operación DOM, es decir, la lógica de rendimiento de la aplicación, es bien conocida por su dificultad de prueba. Poner cualquier lógica de representación en el controlador afecta en gran medida la probabilidad de la lógica de la aplicación. Angular proporciona enlace de datos (http://docs.angularjs.org/guide/dev_guide.templates.databinding) para operar automáticamente (actualizar) el DOM. Si queremos realizar nuestras operaciones DOM personalizadas, podemos extraer la lógica de presentación en la Directiva (//www.vevb.com/article/91739.htm).
Formateo de entrada: use controles de forma angular (//www.vevb.com/article/91744.htm) en su lugar.
Filtrado de salida: use filtros angulares en su lugar.
Ejecute código apáculo o estatal, compartido con controlador: use Servicios Angulares en su lugar.
Instanciar o administrar el ciclo de vida de otros componentes (por ejemplo, crear una instancia de servicio).

4. Asociación de controladores con objetos de alcance angular

Podemos asociar explícitamente objetos de controlador y alcance a través del alcance. $ Nuevo, o usar implícitamente la Directiva NgController (http://docs.angularjs.org/api/ng.directive:ngController) o $ Route Service (http://docs.angularjs.org/api/ng.$routo).

1. Ejemplo de constructor y método del controlador

Para ilustrar cómo funciona el componente del controlador en Angular, creemos una pequeña aplicación utilizando los siguientes componentes:

Una plantilla con dos botones y un mensaje simple.
Un modelo compuesto por un atributo de cadena llamado "especias".
Un controlador con dos métodos que establecen propiedades de especias.

El mensaje en nuestra plantilla contiene un enlace al modelo SPICE, que se establece en "muy" de forma predeterminada. Establezca el valor del modelo SPICE en "Chili" o "Jalapeño" de acuerdo con el botón que se hace clic, y el mensaje se actualizará automáticamente mediante la vinculación de datos.

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Spicy-Controller </ttitte> <meta content = "iE = Edge, Chrome = 1" htttp-eEquiv = "x-ua-Ua-compatible" COMATIS " type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "spicyctrl"> <button ng-click = "chilispicy ()"> chili </boton> <button ng-chick = "jalapeSpicy ('jalapeño')"> jalapeño </boton> <p> la comida es {{{}}}}}} src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> function spicyctrl ($ scope) {$ scope.spice = "muy"; $ scope.chilispicy = function () {$ scope.spice = "chili"; }; $ scope.jalapeSpicy = function (val) {this.spice = val; }; } </script> </body> </html>

Cosas a tener en cuenta en el ejemplo anterior:

La Directiva NgController se usa como nuestra plantilla (implícitamente) para crear un alcance, que se llamará parámetro SpicyCTRL.
SpicyCTRL es solo una función de JavaScript normal. Como regla de nombres (aleatorias), el nombre comienza con letras mayúsculas y termina con "CTRL" o "controlador".
Asignar valores de atributos puede crear o actualizar el modelo de $ Scope.
El método del controlador se puede crear asignando directamente a $ alcance. (Método Chilispicy)
Ambos métodos de controlador están disponibles en plantillas (efectivas tanto en el elemento donde reside el atributo Ng-Controler, así como sus elementos infantiles).
Nota: Las versiones anteriores de Angular (antes de 1.0RC) nos permiten usar esto en lugar de $ alcance para definir $ alcance, pero ya no se aplica aquí. En los métodos definidos en el alcance, esto es equivalente al alcance de $ (Angular lleva esto al alcance), pero no en nuestro constructor de controladores.
Nota: La versión anterior de Angular (antes de 1.0RC) agregaría automáticamente el método prototipo del controlador al alcance, pero ahora no lo hará. Todos los métodos deben agregarse manualmente al alcance. (Recuerdo que había una guía antes, y usé esto. Todavía no se ha actualizado -_-!)

El método del controlador puede tomar parámetros, como se muestra en el siguiente ejemplo:

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-metodarments </ttitle> <meta content = "iE = edge, crome = 1" htttp-equiv = "x-ua-ua-COM type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-concontroller = "spicyctrl"> <input ng-model = "customSpice" value = "wasabi"/> <botutet ng-chick = "spicy (customSpice)"> CustomSpice </boton> <br/> <botón ng-click = "spicy ('chili')"> chili <button <button <p> <p> la comida es {{Spice}} Spicy! </p> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function spicyctrl ($ scope) {$ scope.spicy = "muy"; $ scope.spicy = function (spice) {$ scope.spice = spice; }; } </script> </body> </html>

Tenga en cuenta que el controlador SpicyCTRL ahora solo define un método con un parámetro "Spice" y llamado "Spicy". La plantilla puede consultar el método del controlador y pasar una cadena constante o un valor de modelo.

La herencia del controlador en Angular se basa en la herencia del alcance. Echemos un vistazo al siguiente ejemplo:

 < type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "mainctrl"> <p> bueno {{timeOfday}}, {{name}}! </p> <div ng-confontroller = "childCtrl"> <p> bueno {{tiempo de tiempo}}, {}}}} ng-Controller = "babyctrl"> bueno {{timeOfday}}, {{name}}! </p> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javaScript"> function mainctrl ($ scope) 'Tiempo principal'; $ scope.name = 'nombre principal'; } function childCtrl ($ scope) {$ scope.name = 'name child'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ Scope.name = 'Nombre del bebé'; } </script> </body> </html>

Observe cómo anidamos 3 ngcontroller directamente en la plantilla. Para nuestra opinión, esta estructura de plantilla hará que se creen 4 ámbitos:

alcance de la raíz.
Alcance de MainCTRL, incluido el modelo de tiempo y el modelo de nombre.
El alcance de ChildCtrl, anula el modelo de nombre del alcance de MainCtrl, hereda el modelo de tiempo de tiempo.
Alcance de BabyCtrl, anula el tiempo de tiempo del alcance de MainCtrl y el nombre del alcance de ChildCtrl.

El trabajo heredado es el mismo en controlador y modelo. Entonces, en nuestro ejemplo anterior, todos los modelos se pueden reescribir a través del controlador.

Nota: La herencia del prototipo estándar entre dos controladores no funciona como pensamos, porque como mencionamos anteriormente, el controlador no se inicializa directamente a través de Angular, sino que aplica ese objeto de alcance. (Los controladores no son instanciados directamente por Angular, sino que se aplican al objeto de alcance, aquí es lo mismo que antes, todavía no entiendo).

5. Controlador de prueba

Si bien hay muchas formas de probar controladores, una de las mejores convenciones, como se muestra a continuación, requiere la inyección de $ Rootscope y $ controlador. (La prueba debe coordinarse con Jasmine.js)

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-test </title> <meta content = "iE = borde, Chrome = 1" http-equiv = "x-ua-cacompá" rel = "stylesheet" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none; } </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 MyController($scope) { $scope.spices = [ {"name":"pasilla", "spiciness":"mild"}, {"Nombre": "Jalapeno", "Speciainess": "¡Hot Hot Hot!"}, {"Nombre": "Hananero", "Spiceness": "Lava Hot !!"}]; $ scope.spice = "habanero"; } Describa ("MyController Function", function () {describe ("myController", function () {var alcance; antes de inyect (function ($ rootscope, $ controler) {scope = $ rootscope. $ new (); var ctrl = $ controler (myControler, {$ scope: scope});});}); it ('debería crear "" debería crear "" debería crear "" debería crear "". Spices ', funcional () }); (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new Jasmine.trivialReporter (); jasmineenv.addreporter (trivialReporter); jasMineenv.specfilter (especific) Var CurrentWindowonLoad = Window.Onload;

Si necesitamos probar el controlador anidado, necesitamos crear la misma relación de herencia de alcance en la prueba que en el DOM.

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-test </title> <meta content = "iE = borde, Chrome = 1" http-equiv = "x-ua-cacompá" rel = "stylesheet" href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: none; } </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.timeofay = 'time principal'; $ scope.name = 'nombre principal'; } function childCtrl ($ scope) {$ scope.name = 'name child'; } function babyctrl ($ scope) {$ scope.timeofday = 'baby time'; $ Scope.name = 'Nombre del bebé'; } Describa ("myController", function () {var MainsCope, ChildScope, BabyScope; BeforeEach (inyect (function ($ rootscope, $ controlador) {Mainscope = $ rootscope. $ new (); var mainCtrl = $ controlador (mainctrl, {$ scope: mainscope}); childscope = mainscope. $ new ();) $ controlador (ChildCtrl, {$ alcance: childscope}); Espere (MainsCope.name). (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new Jasmine.trivialReporter (); jasmineenv.addreporter (trivialReporter); jasMineenv.specfilter (especific) Var CurrentWindowonLoad = Window.Onload;

Lo anterior es la información sobre AngularJS comprendiendo el componente del controlador. Continuaremos agregando información relevante en el futuro. ¡Gracias por su apoyo!