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="[Link]
Conceitos Básicos
1. Módulos
Módulos são contêineres para diferentes partes da sua aplicação:
javascript
var app = [Link]('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
[Link] 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
[Link]('myController', function($scope) {
$[Link] = "John";
$[Link] = "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
[Link]('usuarioService', function() {
[Link] = function() {
return {
nome: "João",
nivel: "Admin"
};
};
});
[Link]('userController', function($scope, usuarioService) {
$[Link] = [Link]();
});
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>
[Link] 2/4
04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
Você também pode criar filtros personalizados:
javascript
[Link]('inverter', function() {
return function(texto) {
return [Link]('').reverse().join('');
};
});
3. Roteamento
O ngRoute permite criar aplicações de página única (SPA):
javascript
[Link](function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/[Link]',
controller: 'homeController'
})
.when('/produtos', {
templateUrl: 'pages/[Link]',
controller: 'produtosController'
})
.otherwise({redirectTo: '/'});
});
4. Diretivas Personalizadas
Você pode criar suas próprias diretivas para estender o HTML:
javascript
[Link]('meuComponente', function() {
return {
restrict: 'E',
template: '<div>Este é um componente personalizado!</div>'
};
});
Comunicação com Backend
$http Service
javascript
[Link] 3/4
04/05/2025, 19:14 Complete AngularJS Tutorial - Claude
[Link]('dadosController', function($scope, $http) {
$[Link]('api/[Link]')
.then(function(response) {
$[Link] = [Link];
}, function(error) {
[Link]('Erro ao buscar dados', error);
});
$[Link] = function() {
$[Link]('api/salvar', $[Link])
.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, [Link] ou outro framework atual.
[Link] 4/4