AngularJS entendendo o componente do controlador

Autor：Eve Cole Data da Última Atualização：2025-08-01 14:32:02

No Angular, o controlador é uma função JavaScript (tipo/classe) usada como uma instância de um escopo angular (//www.vevb.com/article/91749.htm) que se estende, exceto o escopo raiz. Quando criamos um novo escopo infantil através do escopo. Isso dirá a Angular que o controlador e o novo escopo precisam ser combinados e estender seu comportamento.

O controlador pode ser usado como:

1. Defina o estado inicial do objeto de escopo.

2. Adicione o comportamento ao escopo.

1. Configurando o estado inicial de um objeto de escopo

Geralmente, quando criamos um aplicativo, precisamos definir o estado de inicialização para o escopo angular.

O Angular aplica um novo objeto de escopo ao construtor do controlador (estimado como um parâmetro) e estabelece o estado de escopo inicial. Isso significa que o Angular nunca cria instâncias do tipo controlador (ou seja, não usa o novo operador para o construtor do controlador). O construtor é sempre aplicado aos objetos de escopo existentes.

Criamos o estado inicial de escopo, criando o atributo do modelo. Por exemplo:

função greetingctrl ($ scope) {$ scope.greeting = "hola!";}

O controlador "GreetingCtrl" cria um modelo chamado "saudação" que pode ser aplicado ao modelo.

2. Adicionando comportamento a um objeto de escopo

O comportamento em um objeto de escopo angular está na forma de atributos do método de escopo para modelos e visões. Esse comportamento pode modificar o modelo do aplicativo.

Conforme discutido no capítulo do modelo guiado (//www.vevb.com/article/91777.htm), qualquer objeto (ou tipo primitivo) é atribuído ao escopo e se torna o atributo do modelo. Qualquer função anexada ao escopo está disponível para visualizações de modelo e pode ser chamada via expressão angular ou via diretiva de manipulador de eventos NG (como o NGCLICK).

3. Usando controladores corretamente

De um modo geral, os controladores não devem tentar fazer muito. Ele deve conter apenas a lógica de negócios necessária para uma única visualização (e não mudou e eu sempre pensei que o controlador é apenas um encaminhamento ...).

Para manter o controlador simples, a maneira comum é extrair o trabalho que não pertence ao controlador para o serviço e usar esses serviços por meio de injeção de dependência no controlador. Essas coisas serão discutidas no capítulo dos Serviços de Injeção de Dependência do Mágico.

Não faça o seguinte no controlador:

Qualquer tipo de controlador de operação DOM deve conter apenas a lógica de negócios. A operação DOM, ou seja, a lógica de desempenho do aplicativo, é bem conhecida por sua dificuldade de teste. Colocar qualquer lógica de representação no controlador afeta muito a testabilidade da lógica do aplicativo. O Angular fornece ligação de dados (http://docs.angularjs.org/guide/dev_guide.templates.databinding) para operar automaticamente (atualizar) o DOM. Se quisermos executar nossas operações de DOM personalizadas, podemos extrair a lógica de apresentação para a Directive (//www.vevb.com/article/91739.htm).
Formatação de entrada - Use controles de forma angular (//www.vevb.com/article/91744.htm).
Filtragem de saída - use filtros angulares.
Execute o código sem estado ou com estado, compartilhado com controlador - use serviços angulares.
Instanciar ou gerenciar o ciclo de vida de outros componentes (por exemplo, crie uma instância de serviço).

4. Associando controladores a objetos de escopo angular

Podemos associar explicitamente objetos controladores e escopo através do escopo.

1. Exemplo de construtor e método do controlador

Para ilustrar como o componente do controlador funciona no Angular, vamos criar um pequeno aplicativo usando os seguintes componentes:

Um modelo com dois botões e uma mensagem simples.
Um modelo composto por um atributo de string chamado "Spice".
Um controlador com dois métodos que definem propriedades de especiarias.

A mensagem em nosso modelo contém uma ligação ao modelo de especiarias, que é definido como "muito" por padrão. Defina o valor do modelo de especiarias como "Chili" ou "Jalapeño" de acordo com o botão que está sendo clicado, e a mensagem será atualizada automaticamente pela ligação de dados.

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> picante-controller </title> content = "ie = borda, cromado = 1" type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng-controller = "spicyctrl"> <button ng-click = "chilispicy ()"> chili </botão> <button ng-click = "jalapenospicy ('jalapeño')"> jalapeño) </button! src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> function spicyctrl ($ scope) {$ scope.spice = "muito"; $ scope.chilispicy = function () {$ scope.spice = "chili"; }; $ scope.jalapeNospicy = function (val) {this.spice = val; }; } </script> </body> </html>

Coisas a serem observadas no exemplo acima:

A Diretiva NGController é usada como nosso modelo (implicitamente) para criar escopo, que será chamado de parâmetro spicyctrl.
Spicyctrl é apenas uma função JavaScript normal. Como regra de nomeação (aleatória), o nome começa com letras maiúsculas e termina com "Ctrl" ou "Controller".
Atribuir valores de atributo pode criar ou atualizar o modelo de $ scope.
O método do controlador pode ser criado atribuindo diretamente a $ SCOPE. (Método Chilispicy)
Ambos os métodos de controlador estão disponíveis em modelos (eficazes no elemento em que o atributo NG controlador reside e em seus elementos filhos).
NOTA: As versões anteriores do Angular (antes de 1.0rc) nos permitem usá -lo em vez de $ escopo para definir $ scope, mas não se aplica mais aqui. Nos métodos definidos no escopo, isso é equivalente ao scope $ (o Angular leva isso ao escopo), mas não em nosso construtor de controladores.
Nota: A versão anterior do Angular (antes de 1.0rc) adicionaria automaticamente o método de protótipo do controlador ao escopo, mas agora não. Todos os métodos precisam ser adicionados manualmente ao escopo. (Lembro que havia um guia antes e usei isso. Ele ainda não foi atualizado -_-!)

O método do controlador pode levar parâmetros, conforme mostrado no exemplo a seguir:

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-method-arents </title <meta-"ie = borda, xromo = 1" type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng --Controller = "spicyctrl"> <input ng-model = "CustomSpice" value = "wasabi"/> <butão ng-click = "spicy (spicy)"> chumbo </button> <br/> <blot ng-click = "Spice)" chut) "> chapy 'chili (pice) {{spice}} picante! $ scope.spicy = function (spice) {$ scope.spice = spice; }; } </script> </body> </html>

Observe que o controlador Spicyctrl agora define apenas um método com um parâmetro "Spice" e chamou "Spicy". O modelo pode se referir ao método do controlador e passar um valor constante de string ou modelo para ele.

A herança do controlador no angular é baseada na herança do escopo. Vamos dar uma olhada no exemplo a seguir:

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-inheritance </title> <meta = "ie = borda, roma = 1" htttppp-http-ek </title> content = "ie = borda, roma = 1" htttpp-http-ek </title> type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad Head> <body> <div ng-controller = "malanctrl"> <p> bom {{timeofday}}, {{name}}! </p> <div ng --Controller = "Childctrl"> <p> bom {{timeofday) ng-CONTROLLER = "babyctrl"> bom {{timeofday}}, {{name}}! </p> </div> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script "" " $ scope.TimeOfday = 'Principal Hora'; $ scope.name = 'Nome principal'; } função childctrl ($ scope) {$ scope.name = 'nome da criança'; } função babyctrl ($ scope) {$ scope.TimeOfday = 'Baby time'; $ scope.name = 'Nome do bebê'; } </script> </body> </html>

Observe como aninhamos 3 ngController diretamente no modelo. Para nossa visão, esta estrutura de modelo fará com que 4 escopos sejam criados:

escopo da raiz.
Mainctrl Scope, incluindo TimeOfday e Model Name.
O escopo Childctrl, substitui o modelo de nome do escopo do mainCtrl, herda o modelo TimeOfday.
O escopo do babyctrl, substitui o horário de dia do escopo do Mainctrl e o nome do escopo Childctrl.

O trabalho herdado é o mesmo em controlador e modelo. Portanto, em nosso exemplo anterior, todos os modelos podem ser reescritos através do controlador.

Nota: A herança do protótipo padrão entre dois controladores não funciona como pensávamos, porque, como mencionamos anteriormente, o controlador não é inicializado diretamente através do angular, mas aplica esse objeto de escopo. (Os controladores não são instanciados diretamente pelo angular, mas são aplicados ao objeto de escopo, aqui é o mesmo de antes, ainda não entendo.)

5. Controlador de teste

Embora existam muitas maneiras de testar controladores, uma das melhores convenções, como mostrado abaixo, requer injeção de $ RootsCope e $ controlador. (O teste precisa ser coordenado com 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 = = bordas, chrome = 1 "http-test-iC-" e "ie = croma) href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad 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> 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 = [{{{{ {"Nome": "Jalapeno", "Spicureiness": "Hot Hot Hot!"}, {"Nome": "Habanero", "Spicity": "Lava Hot !!"}]; $ scope.spice = "Habanero"; } descrever ("função myController", function () {descrever ("myController", function () {var scope; antes each (injeção (function ($ rootscope, $ controller) {scope = $ rootscope. Especiarias ', function () {espera (Scope.spices.Length) .ToBe (3); }); (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter (); jasmineenv.addReporter (SpecialReporter); trivernport; Var CurrentWindowonload = Window.onload;

Se precisarmos testar o controlador aninhado, precisamos criar a mesma relação de herança de escopo no teste e no DOM.

 <! Doctype html> <html ng-app> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> controlador-test </title> <meta-content = = bordas, chrome = 1 "http-test-iC-" e "ie = croma) href = "../ jasmine.css"> <style type = "text/css"> .ng-cloak {display: nenhum; } </style> </ad 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> type = "text/javascript"> </script> <script src = "../ angular-mocks-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javasscript"> function mainCtrl ($ scope) {$ scope.timeofday = 'main'; $ scope.name = 'Nome principal'; } função childctrl ($ scope) {$ scope.name = 'nome da criança'; } função babyctrl ($ scope) {$ scope.TimeOfday = 'Baby time'; $ scope.name = 'Nome do bebê'; } descrever ("mycontroller", function () {var mainscope, ChildScope, BabyScope; antes e cada vez (função ($ rootscope, $ controlador) {mainscope = $ rootscope. $ controlador (Childctrl, {$ SCOPE: ChildScope}); Espere (Nome principal "). (function () {var jasmineenv = jasmine.getenv (); jasmineenv.updateInterval = 1000; var trivialReporter = new jasmine.TrivialReporter (); jasmineenv.addReporter (SpecialReporter); trivernport; Var CurrentWindowonload = Window.onload;

O exposto acima são as informações sobre o AngularJs que entendem o componente do controlador. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio!