Anotações do curso do CodeSchool, que tem gamification e uma plataforma de prática que valida o código gerado pelo programador.
Conceitos
Controller
É onde adiciona à aplicação comportamento. Faz o meio de campo entre view e model
São amarrados no Html com a tag ng-controller=”(ControllerName as alias)”
São definidos no javascript da seguinte forma:
app.controller('nomeCtrl', function() {
});
Outras Referências:
Modules
Onde a aplicação vive. É o módulo que é reaproveitável na app .
São amarrados no Html com a tag ng-app
São criados no javascript da seguinte forma:
angular.module(‘nome-modulo’, []);
Diretivas
Anotações Html que disparam comportamento javascript. É como o Angular comunica com o Html no seu momento de atualização do Html
Exemplos:
ng-app define o escopo da aplicação
Built-in Directives
Lista de diretivas padrões do Javascript
São chamadas de diretivas padrões pois podemos criar diretivas customizadas.
Expressões
Como os valores são mostrados. São binds processados pelo angular com javascript - sendo possível utilizar funções e propriedades do javascript normalmente.
Exemplo :
{{“Hello” + “ World!”}}
Filter (Filtro)
Envia a expressão da esquerda para o filtro da direita, para fazer funções pre-determinadas
{{algumDado | filter:option}}
Mais documentação
Escopo
As variáveis declaradas dentro do controller são do escopo deste. Para iniciar uma variável pelo html é possível utilizar a diretiva ng-init (Apesar de ser melhor inicializar variáveis no controller, para melhor organizar o código)
Referências:
https://docs.angularjs.org/api/ng/directive/ngModel
Form and Models (Formulário e Modelos)
A diretiva ng-model permite o bind de campos de formulário com um modelo, utilizando do two way bindA diretiva ng-submit permite chamar uma função quando o formulário é enviado
Referências:
https://docs.angularjs.org/api/ng/directive/ngModel
Validações de formulários
Deve-se desativar a validação padrão de formulários , para usar apenas a do Angular.js
Atribuir os campos requeridos com o atributo required
É possível ver se o formulário está validado usando a expressão $valid
{{nomeFormulario.$valid}}
O ‘$’ é o acesso a uma propriedade que existe no angular para o formulário.
Conforme a documentação do AngularJS para formulário, existem as seguintes propriedades : [https://docs.angularjs.org/api/ng/directive/form]
- ng-valid se o formulário está válido
- ng-invalid é definido se o formulário está válido
- ng-pending se o formulário está pendente
- ng-pristine se o formulário está intocado
- ng-dirty se o formulário está sujo
- ng-submitted se o formulário foi enviado
Ao digitar nos inputs o Angular.js já altera as classes do input, para permitir a configuração de estilos para formatar os campos. As classes são :
- ng-valid se o formulário está válido
- ng-invalid é definido se o formulário está válido
- ng-pristine se o formulário está intocado
- ng-dirty se o formulário está sujo
Templates
Permite o reaproveitamento de código html e angular em várias partes do projeto. Para isso é necessário utilizar a tag ng-include=”’arquivo.html’” [https://docs.angularjs.org/api/ng/directive/ngInclude]
Atenção que para passar um arquivo do disco é necessário passar apóstrofes(‘) dentro das aspas (“), isso porque o ng-include está esperando uma variável.
Veja a Custom Directive para ver uma utilização de melhor legibilidade.
Custom Directive
Permite escrever html que expressa comportamento da aplicação, ficando muito mais fácil entender o que o html fonte faz.
Podem ser usadas para:
- Expansão de templates
- Expressar interfaces de usuários complexas
- Chamar eventos e registrar manipuladores de eventos
- Reusar componentes comuns
Para criar uma diretiva customizada deve-se criar dentro do módulo, com o comando
app.directive(‘tagCustomDirective’, function () {
return {
restrict : [tipo],
templateUrl : ‘arquivo.html’,
controller : function () {
},
controllerAs : [alias]
};
});
Onde o [tipo] pode ser (um ou vários abaixo):
- 'A' - atributo
- 'E' - elemento
- 'C' - nome de classe
- 'M' - comentários
Com a linha acima é possível utilizar a tag ), pois há o risco de alguns browsers não aceitam. [https://github.com/angular/angular.js/issues/1953]
Outras Referências:
Dependences (Dependências)
É possível criar vários módulos para a aplicação e usar como dependências:
angular.module(‘nome-modulo’, [‘dependencia1’, ‘dependencia-tipo1’]);
Services (Serviços)
Os serviços permitem várias funcionalidades como:
- Buscar dados no servidor com o $http;
- Adicionar log no console com o $log;
- Filtrar um array com o $filter;
Exemplo de uso de serviço no controller:
app.controller(“NomeController”, [‘$http’, ‘$log’, function($http, $log) {
}]);
Exemplo de uso do serviço $http no controller:
(function() {
var app = angular.module('nomeApp', ['store-directives']);
app.controller('NomeCtrl', ['$http', function($http){
//Criando a variável para estar acessível no promisse success
var that = this;
that.products = [];
$http.get('/store-products.json').success(function(data) {
that.products = data;
});
;}]);
})();
Dicas importantes para evitar erros comuns
Existe a interpretação do Html feita pelo Browser e a interpretação do AngularJS, que acontece num segundo momento.
Imagem
Você não pode utilizar a expressão em uma imagem como abaixo, dependendo das informações do controller, pois ele não terá sido carregado:Ao invés disso, você deve utilizar a diretiva ng-src, que será interpretado pelo angular, quando já tiver a informação de escopo no controller.
Links citados como material extra no curso
Curso sequencial do codeschool, o primeiro capítulo é gratuito, o segundo já é pago e você ajuda a manter esta empresa que gera conteúdos interessantes
Documentação do Angular.js
Vídeos Tutoriais
Outra plataforma de aprendizagem:
Navegador de documentação de API e Gerenciador de Fragmento de código. Permitindo o uso local (Até mesmo quando estiver offline, por exemplo, em voo)
https://kapeli.com/dash
