Controladores AngularJS com exemplo de ng-Controller

O que é controlador em AngularJS?

A Responsável pelo Tratamento Em AngularJS, o componente recebe os dados da View, processa-os e os envia para a View, que é exibida ao usuário final. O Controller, por sua vez, contém a lógica principal do seu negócio. Ele utiliza o modelo de dados, realiza o processamento necessário e, em seguida, passa o resultado para a View.

⚠️ Nota de versão: O AngularJS (versão 1.x) chegou ao fim de seu ciclo de vida em 31 de dezembro de 2021 e não receberá mais atualizações de segurança. Os conceitos abaixo ainda se aplicam a aplicações legadas; no Angular moderno, a mesma função é desempenhada por uma classe de componente em vez de um controlador.

Saber o que é um controlador deixa uma questão em aberto: como ele se comunica com a visualização? A próxima seção responde a essa pergunta.

O que o Controller faz na perspectiva do Angular

Segue abaixo uma definição simples do funcionamento de um Controller do AngularJS:

• A principal responsabilidade do controlador é controlar os dados que são passados ​​para a visualização. O escopo e a visão têm comunicação bidirecional.
• As propriedades e eventos de visualização podem chamar funções no escopo. O trecho de código abaixo mostra isso. função($escopo) declarado com o controlador mais uma função interna que retorna $scope.firstName e $scope.lastName entrou. Em AngularJSUma função definida como uma variável é um método.

• Os dados são transmitidos do controlador para o escopo e, em seguida, alternadamente entre o escopo e a visualização.
• O escopo expõe o modelo à visualização. O modelo pode ser modificado por meio de métodos definidos no escopo, que são acionados por eventos da visualização.
• Os controladores não devem ser usados ​​para manipular o DOM. Essa é a função dos... directivas.
• A melhor prática é basear os controladores na funcionalidade. Se você tem um formulário de entrada que precisa de um controlador, crie um chamado "controlador de formulário".

Com o mecanismo compreendido, a próxima seção constrói um controlador a partir de uma página em branco.

Como construir um controlador básico em AngularJS

A seguir estão os passos para criar um controlador em AngularJS.

Etapa 1) Crie uma página HTML básica

Antes de criar um controlador, a página HTML básica precisa estar pronta. O trecho de código abaixo é uma página simples intitulada "Inscrição para Evento" que faz referência a Bootstrap e AngularJS.

1. Referências ao Bootstrap Folha de estilo CSS, usada em conjunto com o Bootstrap biblioteca.
2. Uma referência à biblioteca AngularJS. Tudo o que for feito com AngularJS a partir deste ponto será resolvido a partir deste arquivo.
3. Uma referência ao Bootstrap biblioteca, que torna certos controles responsivos.

⚠️ Correção: O código original carregava o jQuery e afirmava que o AngularJS dependia dele. Isso não é verdade. O AngularJS é distribuído com o jqLite, um subconjunto integrado da API do jQuery, e só atualiza para o jQuery completo se o jQuery for carregado corretamente. antes A referência foi removida.

Etapa 2) Verifique os arquivos e a estrutura dos arquivos

1. Os arquivos são divididos em duas pastas, como em qualquer aplicação web convencional: “css” para folhas de estilo e “lib” para código. JavaScript arquivos.
2. O arquivo bootstrap.css fica na pasta css e é responsável pela aparência e funcionalidade do site.
3. O angular.js é a biblioteca principal, baixada do site do AngularJS e armazenada na pasta lib.
4. O arquivo app.js conterá o código dos controladores.

Etapa 3) Use o código AngularJS para exibir a saída

O objetivo aqui é exibir as palavras "AngularJS" tanto como texto simples quanto dentro de uma caixa de texto quando a página for aberta no navegador.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Explicação:

1. aplicativo ng marca este elemento como a raiz de uma aplicação AngularJS. Atributos com o prefixo ng- São diretivas integradas. “DemoApp” é o nome dado ao aplicativo.
2. A div carrega controlador ng com o nome “DemoController”, que dá a esse elemento e a tudo o que está dentro dele acesso ao escopo do controlador.
3. modelo ng Cria a vinculação do modelo, associando a caixa de texto "Nome do Tutorial" à propriedade de escopo. tutorialName.
4. O módulo DemoApp é criado e o controlador atribui um valor padrão de “AngularJS” a tutorialName.

⚠️ Correções aplicadas. O anúncio original declarava chrset="UTF 8", que não é um atributo válido nem um nome de codificação válido, e carregou o AngularJS duas vezes — uma vez da CDN e outra de lib/angular.jsCarregar a biblioteca duas vezes registra novamente o sistema de módulos e produz um comportamento imprevisível. A anotação de matriz de dependências ['$scope', function($scope){…}] Também foi adicionado, sem o qual o controlador para de funcionar no momento em que o arquivo é minificado.

Saída:

Porque tutorialName Foi atribuído o valor “AngularJS”, e esse valor aparece na caixa de texto e na linha de texto simples. Uma única propriedade é suficiente para uma demonstração; controladores reais geralmente também expõem comportamentos, o que será abordado na próxima seção.

Como definir métodos em controladores AngularJS

Normalmente, define-se vários métodos em um controlador para separar a lógica de negócios. Se o controlador tivesse que somar dois números e subtrair o resultado, por exemplo, usaria um método para cada número.tracPara dois números, você criaria um método para cada operação.

O exemplo abaixo define um método personalizado dentro de um controlador AngularJS que retorna uma string.

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Explicação:

1. Uma função é associada ao objeto de escopo como membro. tNameRetorna o valor atual de tutorialName.
2. A visualização chama o método com {{tName()}}Os parênteses são importantes: sem eles, a expressão imprime a própria função em vez de seu resultado.

⚠️ Correção: o método original lia $scope.tName = function() { return $scope.tName; };Essa função retorna a si mesma, e não o nome do tutorial, então a página renderizou o corpo da função em vez do texto. Agora ela retorna $scope.tutorialName.

Saída:

Até agora, tudo estava em um único arquivo. Os aplicativos de produção mantêm os controladores separados, o que será demonstrado na próxima seção.

Exemplo de controlador AngularJS com ng-Controller

O exemplo "HelloWorld" acima colocou toda a funcionalidade em um único arquivo. Agora é hora de mover o código do controlador para seu próprio arquivo.

Passo 1) No arquivo app.js, adicione o seguinte código ao seu controlador.

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

O código acima faz o seguinte:

1. Define um módulo chamado “app” que contém o controlador.
2. Cria um controlador chamado “HelloWorldCtrl” que exibe a mensagem “Olá Mundo”.
3. Utiliza o objeto de escopo para passar informações do controlador para a visualização, neste caso, uma variável chamada message.

Passo 2) No arquivo Sample.html, adicione uma div contendo a diretiva ng-controller e uma referência à variável membro. messageLembre-se de fazer referência ao arquivo app.js, que contém o código-fonte do controlador.

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Correção: O arquivo app.js precisa ser carregado. depois de angular.js, já que ele chama angular.moduleO original também carregava a biblioteca duas vezes e continha o mesmo chrset erro de digitação.

Saída:

Todos os exemplos até agora leram e escreveram propriedades diretamente em $scopeA seção abaixo aborda a alternativa recomendada pela equipe do AngularJS.

Como usar a sintaxe `controllerAs` no AngularJS

Ligação direta a $scope Funciona, mas torna-se ambíguo assim que os controladores são aninhados. Uma expressão de visualização como {{name}} Não dá nenhuma pista sobre qual controlador é o dono. nameE como os escopos filhos herdam prototipicamente dos escopos pais, um controlador aninhado que escreve em um primitivo herdado cria silenciosamente sua própria cópia sombra. controllerAs A sintaxe resolve ambos os problemas, atribuindo um alias a cada controlador.

Passo 1) Dê um alias ao controlador na visualização usando o as palavra-chave e, em seguida, prefixe cada associação com esse alias.

Passo 2) Dentro do controlador, associe propriedades a this em vez de $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Seguem-se três vantagens. As encadernações tornam-se autodocumentadas, porque demo.tutorialName nomeia seu proprietário. Controladores aninhados param de colidir, já que um pai possui um alias. outer e uma criança com outro nome inner ambos podem expor nameOs valores também são vinculados por meio de um objeto em vez de um tipo primitivo simples, contornando essa limitação.ping A armadilha em que uma edição feita em um processo filho nunca chega ao processo pai.

💡 Dica: Capture this em uma variável como vm na parte superior do controlador. Dentro de um retorno de chamada, this refere-se a algo completamente diferente, e a referência capturada mantém a vinculação correta.

Escolher um estilo de vinculação é uma decisão. Decidir o que deve estar presente em um controlador é outra, e a comparação abaixo traça essa linha divisória.

Controlador versus Serviço no AngularJS

Iniciantes frequentemente sobrecarregam o controlador com tarefas que deveriam ser executadas por um serviço. A distinção reside no ciclo de vida e na reutilização: um controlador existe apenas enquanto sua visualização está na tela, enquanto um serviço é um singleton que existe durante toda a vida útil da aplicação.

Mantenha os controladores enxutos. Se dois controladores precisam da mesma lógica, ou se um valor precisa sobreviver à navegação entre telas, mova-o para um serviço e injete esse serviço onde for necessário. Um teste prático é verificar se o código ainda faria sentido com a tela atual fechada. Se a resposta for sim, ele pertence a um serviço.

Perguntas Frequentes