Esse tutorial é básico mas bem direto, não serve para ensinar o AngularJS do 0, para isso basta ler a página inicial do AngularJS pois seus exemplos são bem intuitivos:
https://angularjs.org/
Para esse exemplo primeiro vou mostrar como foi estruturado o JavaScript, segue o código todo comentado a baixo.
[javascript]
// Criando o Controller
angular.module(“angularApp”, []).controller(“Lista”, function(){
// Lista de Cidades que será exbida usando a diretiva ng-repeat
this.cidades = [{nome:”Natal”, ur:”RN”},{nome:”Fortaleza”, ur:”CE”},{nome:”João Pessoa”, ur:”PB”}, {nome:”Recife”, ur:”PE”}];
// Método que adiciona elementos a lista de Cidades usando a diretiva ng-submit
this.addCidade = function(){
this.cidades.push({nome:this.nomeCidade, ur:this.urCidade});
// Limpa os campos
this.nomeCidade = ”;
this.urCidade = ”;
};
// Método que recebe alterações no campo de busca usando a diretiva ng-change
this.escrevendoBusca = function(){
console.log(“Buscando: “+this.busca);
}
});
[/javascript]
Lendo o código podemos ver que primeiro foi criado o Controller usando o angular.
Todo nosso código HTML mostrado a baixo, está dentro de uma div que chama o controller Lista:
[html]
[/html]
Listando e Filtrando
Usando a diretiva ng-repeat, podemos listar os dados da lista de cidades que está no nosso controller lista. Podemos ver que após o pipe(|) adicionamos o comando filter que serve para filtrar os dados usando o valor do input com o ng-model lista.busca:
[html]
- {{cidade.nome}}/{{cidade.ur}}
[/html]
Adicionando Valores
Criamos um form que usa a diretiva ng-submit para chamar o método lista.addCidade():
[html]
[/html]
O Código completo fica da seguinte forma:
index.html
[html]
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js
http://script.js
- {{cidade.nome}}/{{cidade.ur}}
[/html]
script.js
[javascript]
// Criando o Controller
angular.module(“angularApp”, []).controller(“Lista”, function(){
// Lista de Cidades que será exbida usando a diretiva ng-repeat
this.cidades = [{nome:”Natal”, ur:”RN”},{nome:”Fortaleza”, ur:”CE”},{nome:”João Pessoa”, ur:”PB”}, {nome:”Recife”, ur:”PE”}];
// Método que adiciona elementos a lista de Cidades usando a diretiva ng-submit
this.addCidade = function(){
this.cidades.push({nome:this.nomeCidade, ur:this.urCidade});
// Limpa os campos
this.nomeCidade = ”;
this.urCidade = ”;
};
// Método que recebe alterações no campo de busca usando a diretiva ng-change
this.escrevendoBusca = function(){
console.log(“Buscando: “+this.busca);
}
});
[/javascript]
Deixe um comentário