Controladores AngularJS com exemplo de ng-Controller
James Hartmann
O que é controlador em AngularJS?
A Responsável pelo Tratamento no AngularJS pega os dados da visualização, processa os dados e, em seguida, envia esses dados para a visualização que é exibida ao usuário final. O Controlador terá sua lógica de negócios principal. O controlador usará o modelo de dados, realizará o processamento necessário e então passará a saída para a visualização que por sua vez será exibida ao usuário final.
O que o controlador faz da perspectiva do Angular?
A seguir está uma definição simples de funcionamento do Controlador 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 da visualização podem chamar “funções” no escopo. Além disso, os eventos na visão podem chamar “métodos” no escopo. O trecho de código abaixo fornece um exemplo simples de função.
- As função($escopo) que é definido ao definir o controlador e uma função interna que é usada para retornar a concatenação de $scope.firstName e $scope.lastName.
- In AngularJS, quando você define uma função como uma variável, ela é conhecida como Método.
- Dessa forma, os dados passam do controlador para o escopo e, em seguida, passam do escopo para a visualização.
- O escopo é usado para expor o modelo à visualização. O modelo pode ser modificado por meio de métodos definidos no escopo que podem ser acionados por meio de eventos da visualização. Podemos definir a ligação de modelo bidirecional do escopo ao modelo.
- Idealmente, os controladores não devem ser usados para manipular o DOM. Isto deverá ser feito pelas directivas que veremos mais tarde.
- A melhor prática é ter controladores baseados em funcionalidade. Por exemplo, se você tem um formulário para entrada e precisa de um controlador para isso, crie um controlador chamado “form controller”.
Como construir um controlador básico em AngularJS
Abaixo estão as etapas para criar um controlador em AngularJS:
Etapa 1) Crie uma página HTML básica
Antes de começarmos com a criação de um controlador, precisamos primeiro ter nossa configuração básica de página HTML em vigor.
O trecho de código abaixo é uma página HTML simples com o título “Registro de evento” e referências a bibliotecas importantes, como Bootstrap, jQuery e Angular.
- Estamos adicionando referências às folhas de estilo CSS do bootstrap, que serão usadas em conjunto com as bibliotecas do bootstrap.
- Estamos adicionando referências às bibliotecas angularjs. Portanto, agora tudo o que fizermos com angular.js daqui para frente será referenciado nesta biblioteca.
- Estamos adicionando referências à biblioteca bootstrap para tornar nossa página web mais responsiva para determinados controles.
- Adicionamos referências às bibliotecas jquery que serão usadas para manipulação de DOM. Isso é exigido pelo Angular porque algumas das funcionalidades do Angular dependem desta biblioteca.
Por padrão, o trecho de código acima estará presente em todos os nossos exemplos, para que possamos mostrar apenas o código angularJS específico nas seções subsequentes.
Etapa 2) Verifique os arquivos e a estrutura dos arquivos
Em segundo lugar, vamos dar uma olhada em nossos arquivos e na estrutura de arquivos com os quais começaremos durante o curso.
- Primeiro, separamos nossos arquivos em 2 pastas, como é feito com qualquer aplicativo da web convencional. Temos a pasta “CSS”. Ele conterá todos os nossos arquivos de folhas de estilos em cascata, e então teremos nossa pasta “lib” que terá todos os nossos JavaScript arquivos.
- O arquivo bootstrap.css é colocado na pasta CSS e é usado para adicionar uma boa aparência ao nosso site.
- O angular.js é nosso arquivo principal que foi baixado do site angularJS e mantido em nossa pasta lib.
- O arquivo app.js conterá nosso código para os controladores.
- O arquivo bootstrap.js é usado para complementar o arquivo bootstrap.cs para adicionar funcionalidade de bootstrap ao nosso aplicativo da web.
- O arquivo jquery será usado para adicionar funcionalidade de manipulação de DOM ao nosso site.
Etapa 3) Use o código AngularJS para exibir a saída
O que queremos fazer aqui é apenas exibir as palavras “AngularJS” tanto em formato de texto quanto em uma caixa de texto quando a página for visualizada no navegador. Vamos ver um exemplo de como usar angular.js para fazer isso:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp',[]);
app.controller('DemoController', function($scope){
$scope.tutorialName = "Angular JS";
});
</script>
</body>
</html>
Code Explicação:
- As aplicativo ng A palavra-chave é usada para indicar que este aplicativo deve ser considerado um aplicativo angular. Qualquer coisa que comece com o prefixo 'ng' é conhecido como um Directivas. “DemoApp” é o nome dado ao nosso aplicativo Angular.JS.
- Criamos uma tag div e nesta tag adicionamos uma diretiva ng-controller junto com o nome do nosso Controller “DemoController”. Isso basicamente torna nossa tag div a capacidade de acessar o conteúdo do Demo Controller. Você precisa mencionar o nome do controlador sob a diretiva para garantir que é capaz de acessar a funcionalidade definida no controlador.
- Estamos criando uma ligação de modelo usando a diretiva ng-model. O que isso faz é vincular a caixa de texto do Nome do Tutorial a ser vinculada à variável de membro “tutorialName”.
- Estamos criando uma variável de membro chamada “tutorialName” que será usada para exibir as informações que o usuário digita na caixa de texto para Tutorial Name.
- Estamos criando um módulo que será anexado ao nosso aplicativo DemoApp. Portanto, este módulo agora passa a fazer parte da nossa aplicação.
- No módulo, definimos uma função que atribui um valor padrão de “AngularJS” à nossa variável tutorialName.
Se o comando for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:
Como atribuímos à variável tutorialName o valor “Angular JS”, isso é exibido na caixa de texto e na linha de texto simples.
Como definir métodos em controladores AngularJS
Normalmente, seria desejável definir vários métodos no controlador para separar a lógica de negócios.
Por exemplo, suponha que você queira que seu controlador faça duas coisas básicas,
- Execute a adição de 2 números
- Execute a substituiçãotracção de 2 números
O ideal seria criar dois métodos dentro do seu controlador: um para realizar a adição e outro para realizar a subtração.tracção.
Vamos ver um exemplo simples de como você pode definir métodos personalizados em um controlador Angular.JS. O controlador simplesmente retornará uma string.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name :<input type="text" ng-model="tutorialName"><br>
<br>
This tutorial is {{tutorialName}}
</div>
<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
$scope.tutorialName = "Angular JS";
$scope.tName = function() {
return $scope.tName;
};
});
</script>
</body>
</html>
Code Explicação:
- Aqui, estamos apenas definindo uma função que retorna uma string de “AngularJS”. A função é anexada ao objeto de escopo por meio de uma variável de membro chamada tutorialName.
- Se o comando for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:
Exemplo de controlador AngularJS com ng-Controller
Vejamos um exemplo de “HelloWorld” onde todas as funcionalidades foram colocadas em um único arquivo. Agora é hora de colocar o código do controlador em arquivos separados.
Vamos seguir as etapas abaixo para fazer isso:
Passo 1) No arquivo app.js, adicione o seguinte código para seu controlador
angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
$scope.message = "Hello World"
});
O código acima faz o seguinte:
- Defina um módulo chamado “app” que conterá o controlador junto com a funcionalidade do controlador.
- Crie um controlador com o nome “HelloWorldCtrl”. Este controlador será usado para ter a funcionalidade de exibir uma mensagem “Hello World”.
- O objeto de escopo é usado para passar informações do controlador para a visualização. Portanto, no nosso caso, o objeto de escopo será usado para armazenar uma variável chamada “mensagem”.
- Estamos definindo a variável mensagem e atribuindo a ela o valor “Hello World”.
Passo 2) Agora, em seu arquivo Sample.html, adicione uma classe div que conterá a diretiva ng-controller e, em seguida, adicione uma referência à variável de membro “message”
Também não se esqueça de adicionar uma referência ao arquivo de script app.js que contém o código-fonte do seu controlador.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Se o código acima for inserido corretamente, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:
Resumo
- A principal responsabilidade do controlador é criar um objeto de escopo que por sua vez é passado para a visão
- Como construir um controlador simples usando as diretivas ng-app, ng-controller e ng-model
- Como adicionar métodos personalizados a um controlador que pode ser usado para separar várias funcionalidades dentro de um módulo angularjs.
- Os controladores podem ser definidos em arquivos externos para separar esta camada da camada View. Normalmente, essa é uma prática recomendada ao criar aplicativos da web.
