sábado, 28 de janeiro de 2017

Curso : Shaping up with angular.js (1)

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:
?
1
2
3
4
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:
?
1
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)

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 bind
?
1
<input type="text" name="userName" ng-model="user.name" ng-model-options="{ getterSetter: true }">
A 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
?
1
2
<form novalidate="">
</form>

Atribuir os campos requeridos com o atributo required
?
1
<input 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:
  1. Expansão de templates
  2. Expressar interfaces de usuários complexas
  3. Chamar eventos e registrar manipuladores de eventos
  4. Reusar componentes comuns

Para criar uma diretiva customizada deve-se criar dentro do módulo, com o comando
?
1
2
3
4
5
6
7
8
9
10
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 . O curso ainda indica que é preferível utilizar dois elementos html abrindo e fechando e não usar o self closing element (), 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:
?
1
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:
?
1
2
3
4
5
6
7
8
9
10
11
12
(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:
?
1
<img src="{{controller.item.fullUrl}}">

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
Postado por às
Marcadores: