Exibindo informações repetidas
Às vezes, podemos ser solicitados a exibir uma lista de itens na visualização, então a questão é como podemos exibir uma lista de itens definidos em nosso controlador em nossa página de visualização.
Angular fornece uma diretiva chamada "ng-repeat" que pode ser usada para exibir valores repetidos definidos em nosso controlador.
Vejamos um exemplo de como podemos conseguir isso.
Event Registration Guru99 Global Event
Topics
- {{tpname.name}}
Explicação do código:
- No controlador, primeiro definimos nosso array de itens de lista que queremos definir na visualização. Aqui nós definimos um array chamado "TopicNames" que contém três itens. Cada item consiste em um par nome-valor.
- A matriz de TopicsNames é então adicionada a uma variável de membro chamada "tópicos" e anexada ao nosso objeto de escopo.
- Estamos usando as tags HTML de
- (Lista não ordenada) e
- (Item da lista) para exibir a lista de itens em nosso array. Em seguida, usamos a diretiva ng-repeat para examinar cada um dos itens em nosso array. A palavra "tpname" é uma variável que é usada para apontar para cada item no array topics.TopicNames.
- Nela, exibiremos o valor de cada item do array.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador. Você verá todos os itens da matriz (basicamente os TopicNames nos tópicos) exibidos.
Resultado:
Angularjs Multiple Controllers
Um exemplo de controlador avançado seria o conceito de ter vários controladores em um aplicativo JS angular.
Você pode querer definir vários controladores para separar diferentes funções de lógica de negócios. Anteriormente, mencionamos sobre ter diferentes métodos em um controlador no qual um método tinha funcionalidade separada para adição e subtração de números. Bem, você pode ter vários controladores para ter uma separação de lógica mais avançada. Por exemplo, você pode ter um controlador que faz apenas operações em números e outro que faz operações em strings.
Vejamos um exemplo de como podemos definir vários controladores em um aplicativo angular.JS.
Event Registration Guru99 Global Event
{{lname}}
Explicação do código:
- Aqui estamos definindo 2 controladores chamados "firstController" e "secondController". Para cada controlador, também adicionamos algum código para processamento. Em nosso firstController, anexamos uma variável chamada "pname" que tem o valor "firstController", e no secondController anexamos uma variável chamada "lname" que tem o valor "secondController".
- Na visualização, estamos acessando ambos os controladores e usando a variável membro do segundo controlador.
Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador. Você verá todo o texto de "secondController" conforme o esperado.
Resultado:
Resumo
- A diretiva ng-repeater pode ser usada para exibir vários itens repetidos.
- Também demos uma olhada em um controlador avançado que examinou a definição de vários controladores em um aplicativo.