04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
Tutorial Completo sobre AngularJS
O AngularJS foi um framework JavaScript muito popular desenvolvido pelo Google. É importante
notar que o AngularJS (versão 1.x) está oficialmente descontinuado desde janeiro de 2022, sendo
substituído pelo Angular moderno (versão 2+). No entanto, muitos projetos legados ainda o
utilizam, então vou fornecer um tutorial completo sobre o AngularJS.
Introdução ao AngularJS
AngularJS é um framework JavaScript estrutural para aplicações web dinâmicas. Ele permite usar
HTML como linguagem de template e estender a sintaxe do HTML para expressar os
componentes da sua aplicação de forma clara e sucinta.
Instalação
Para começar a usar o AngularJS, você pode incluir o script diretamente em seu HTML:
html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Conceitos Básicos
1. Módulos
Módulos são contêineres para diferentes partes da sua aplicação:
javascript
var app = angular.module('myApp', []);
2. Expressões
Expressões AngularJS são escritas entre chaves duplas: {{ expressão }}
html
<div ng-app="">
<p>Nome: {{ firstName + " " + lastName }}</p>
</div>
3. Diretivas
As diretivas são atributos especiais que começam com o prefixo ng- :
ng-app : Define o elemento raiz da aplicação
ng-model : Liga o valor dos controles HTML à propriedades da aplicação
ng-bind : Liga o conteúdo HTML à propriedades da aplicação
ng-init : Inicializa variáveis da aplicação
ng-repeat : Repete um elemento HTML para cada item em uma coleção
https://claude.ai/chat/7473c3fc-7bdd-4625-ab59-a4aab463784f 1/4
04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
4. Controllers
Controllers são funções JavaScript que mantêm os dados e a lógica:
javascript
app.controller('myController', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
Exemplo Prático
Vamos criar uma pequena aplicação de lista de tarefas:
Aplicação de Lista de Tarefas com AngularJS
Artefato interativo
Recursos Avançados do AngularJS
1. Serviços
Os serviços são objetos singleton que fornecem funcionalidades compartilhadas:
javascript
app.service('usuarioService', function() {
this.getUsuario = function() {
return {
nome: "João",
nivel: "Admin"
};
};
});
app.controller('userController', function($scope, usuarioService) {
$scope.usuario = usuarioService.getUsuario();
});
2. Filtros
Os filtros formatam o valor das expressões para exibição:
html
<p>Preço: {{ preco | currency }}</p>
<p>Nome: {{ nome | uppercase }}</p>
<p>Data: {{ data | date:'dd/MM/yyyy' }}</p>
https://claude.ai/chat/7473c3fc-7bdd-4625-ab59-a4aab463784f 2/4
04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
Você também pode criar filtros personalizados:
javascript
app.filter('inverter', function() {
return function(texto) {
return texto.split('').reverse().join('');
};
});
3. Roteamento
O ngRoute permite criar aplicações de página única (SPA):
javascript
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'homeController'
})
.when('/produtos', {
templateUrl: 'pages/produtos.html',
controller: 'produtosController'
})
.otherwise({redirectTo: '/'});
});
4. Diretivas Personalizadas
Você pode criar suas próprias diretivas para estender o HTML:
javascript
app.directive('meuComponente', function() {
return {
restrict: 'E',
template: '<div>Este é um componente personalizado!</div>'
};
});
Comunicação com Backend
$http Service
javascript
https://claude.ai/chat/7473c3fc-7bdd-4625-ab59-a4aab463784f 3/4
04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
app.controller('dadosController', function($scope, $http) {
$http.get('api/dados.json')
.then(function(response) {
$scope.dados = response.data;
}, function(error) {
console.error('Erro ao buscar dados', error);
});
$scope.enviarDados = function() {
$http.post('api/salvar', $scope.formulario)
.then(function(response) {
alert('Dados salvos com sucesso!');
});
};
});
Melhores Práticas
1. Organização do código: Separe sua aplicação em módulos, serviços, controllers e diretivas.
2. Use a injeção de dependência: Aproveite o sistema de injeção de dependências.
3. Evite manipulação direta do DOM em controllers: Use diretivas para isso.
4. Utilize one-way binding: Para melhor performance, use :: para binding de uma via
quando os dados não mudam.
5. $watch com cuidado: Monitore apenas o necessário para melhor performance.
Considerações Finais
O AngularJS foi um framework revolucionário para desenvolvimento web, mas está oficialmente
descontinuado. Se você estiver começando um novo projeto, considere usar o Angular moderno
(2+), React, Vue.js ou outro framework atual.
https://claude.ai/chat/7473c3fc-7bdd-4625-ab59-a4aab463784f 4/4
