O que é Controller em AngularJs?
Um Controlador em 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, em seguida, passará a saída para a visualização que, por sua vez, será exibida ao usuário final.
Neste tutorial, você aprenderá-
- O que o controlador faz da perspectiva do Angular
- Como construir um controlador básico
- Como definir métodos no controlador
- Usando o ng-controller em arquivos externos
- A principal responsabilidade do controlador é controlar os dados que são passados para a visualização. O escopo e a visualização têm comunicação bidirecional.
- As propriedades da visualização podem chamar "funções" no escopo. Além disso, os eventos na visualização podem chamar "métodos" no escopo. O trecho de código a seguir fornece um exemplo simples de uma função.
- A função ($ scope) que é definida ao definir o controlador e uma função interna que é usada para retornar a concatenação de $ scope.firstName e $ scope.lastName.
- No 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 osciloscópio e, em seguida, passam de um lado para outro do osciloscópio para a visualização.
- O escopo é usado para expor o modelo à vista. 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 vinculação de modelo bidirecional do escopo ao modelo.
- Idealmente, os controladores não devem ser usados para manipular o DOM. Isso deve ser feito pelas diretrizes que veremos mais adiante.
- A melhor prática é ter controladores baseados na funcionalidade. Por exemplo, se você tem um formulário para entrada e precisa de um controlador para isso, crie um controlador chamado "controlador de formulário".
- Estamos adicionando referências às folhas de estilo CSS de bootstrap, que serão usadas em conjunto com as bibliotecas de bootstrap.
- Estamos adicionando referências às bibliotecas do angularjs. Portanto, tudo o que fizermos com angular.js daqui para frente será referenciado a partir desta biblioteca.
- Estamos adicionando referências à biblioteca de bootstrap para tornar nossa página da web mais responsiva para determinados controles.
- Adicionamos referências às bibliotecas jquery que serão usadas para manipulação DOM. Isso é exigido pelo Angular porque algumas das funcionalidades do Angular dependem dessa biblioteca.
- 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 folha de estilo em cascata e, em seguida, teremos nossa pasta "lib" que terá todos os nossos arquivos JavaScript.
- 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 do 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 a funcionalidade de bootstrap ao nosso aplicativo da web.
- O arquivo jquery será usado para adicionar a funcionalidade de manipulação DOM ao nosso site.
O que o controlador faz da perspectiva do Angular
A seguir está uma definição simples de funcionamento do Angular JS Controller.
Como construir um controlador básico
Antes de começarmos com a criação de um controlador, precisamos primeiro ter nossa configuração de página HTML básica no lugar.
O trecho de código a seguir é uma página HTML simples que tem o título "Registro de eventos" e referências a bibliotecas importantes como Bootstrap, jquery e Angular.
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.
Em segundo lugar, vamos dar uma olhada em nossos arquivos e estrutura de arquivos, com os quais vamos começar durante o curso.
Vamos ver um exemplo de como usar angular.js,
O que queremos fazer aqui é apenas exibir as palavras "AngularJS" em formato de texto e em uma caixa de texto quando a página for visualizada no navegador.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicação do código:
- A palavra - chave ng-app é usada para denotar que este aplicativo deve ser considerado um aplicativo angular. Qualquer coisa que comece com o prefixo 'ng' é conhecida como uma diretiva. "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 de nosso Controlador "DemoController". Isso basicamente torna nosso tag div a capacidade de acessar o conteúdo do Controlador de demonstração. Você precisa mencionar o nome do controlador sob a diretiva para garantir que você seja capaz de acessar a funcionalidade definida dentro do controlador.
- Estamos criando uma vinculaçã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 do Nome do tutorial.
- Estamos criando um módulo que será anexado ao nosso aplicativo DemoApp. Portanto, este módulo agora se torna parte de nosso aplicativo.
- 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.
Resultado:
Como atribuímos à variável tutorialName um valor "Angular JS", isso é exibido na caixa de texto e na linha de texto simples.
Como definir métodos no controlador
Normalmente, seria desejável definir vários métodos no controlador para separar a lógica de negócios.
Por exemplo, suponha que se você quisesse que seu controlador fizesse 2 coisas básicas,
- Realize a adição de 2 números
- Realize a subtração de 2 números
Você, então, idealmente criaria 2 métodos dentro de seu controlador, um para realizar a adição e outro para realizar a subtraçã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.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicação do código:
- 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.
Resultado:
Usando o ng-controller em arquivos externos
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.
Etapa 1) No arquivo app.js, adicione o seguinte código para o 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 manterá o controlador junto com a funcionalidade do controlador.
- Crie um controlador com o nome "HelloWorldCtrl". Este controlador será usado para ter uma funcionalidade para exibir uma mensagem "Hello World".
- O objeto de escopo é usado para passar informações do controlador para a visualização. Portanto, em nosso caso, o objeto de escopo será usado para manter uma variável chamada "mensagem".
- Estamos definindo a mensagem variável e atribuindo o valor "Hello World" a ela.
Etapa 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 membro "mensagem"
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.
Event Registration Guru99 Global Event
{{message}}
Se o código acima for inserido corretamente, a seguinte saída será mostrada quando você executar seu código no navegador.
Resultado:
Resumo
- A responsabilidade primária 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 Visualização. Normalmente, essa é uma prática recomendada ao criar aplicativos da web.