Angular

Componentes da Equipe

ANGULAR2.png

Felipe Deveza e Hudson Costa


1. O que é?

Angular(Também conhecido como AngularJS ou Angular.js) é um framework estrutural para web apps dinâmicos voltados para o front end, permitindo a utilização do HTML como linguagem de template e permitindo “extender” sua sintaxe.

Parte da comunidade afirma que AngularJS é tudo aquilo que o HTML deveria ser, pois enquanto o HTML foi planejado para funcionar principalmente em páginas estáticas, enquanto o angular funciona em forma de aplicação.

O framework AngularJS funciona lendo primeiro a página HTML , que possui atributos adicionais de tag customizada incorporados a ela. Angular interpreta esses atributos como diretivas(Directives) para vincular partes de entrada ou saída da página a um modelo que é representado por variáveis JavaScript padrão . Os valores dessas variáveis ​​JavaScript podem ser definidos manualmente no código ou recuperados de recursos JSON estáticos ou dinâmicos .

De acordo com o serviço de análise JavaScript Libscore , o AngularJS é usado nos sites da Wolfram Alpha , NBC , Walgreens , Intel , Sprint , ABC News e cerca de 12.000 outros sites dentre os 1 milhão que foram analisados em outubro de 2016. AngularJS está atualmente entre os 100 projetos com mais estrelas no GitHub.

O AngularJS é a parte frontend da pilha MEAN , consistindo de banco de dados MongoDB , estrutura do servidor de aplicativos da web Express.js , próprio Angular.js e ambiente de tempo de execução do servidor Node.js.

1*k3_N3IDqV4HVHG-hVdZERw.jpeg

O compilador do Angular suporta builds incrementais, gerenciando as mesmas de forma a reduzir o tempo de build em até 90% nos testes com projetos reais utilizando transformações em Typescript.

O AngularJS é construído sob a crença de que a programação declarativa é melhor do que a programação imperativa quando se trata da construção de interfaces com o usuário e da conexão de componentes software, enquanto a programação imperativa é excelente para a escrita de regras de negócio. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes.

Resumindo, a maioria dos websites hoje é uma amontoado de elementos DIV com pouca ou nenhuma semântica. É necessário uma extensa lista de classes CSS para expressar cada objeto presente no DOM. Com o AngularJS você consegue trabalhar o HTML como se fosse um XML, com infinitas possibilidades de tags e atributos. O AngularJS executa essas tarefas através do seu compilador HTML e do uso de directives para criar ações com base na sintaxe.


2. História

misko.jpg

Desenvolvido originalmente por Miško Hevery na Brat Tech LLC como o software por trás de um serviço de armazenamento de JSON, voltada principalmente para aplicações empresariais simples, inicialmente teve poucos usuários, porém tal situação mudou quando dois deles resolveram tornar o projeto como uma biblioteca open source.

Embora o framework de desenvolvimento de JavaScript AngularJS original já tenha sido um sucesso com os desenvolvedores, o Google realizou uma reescrita para a segunda geração, focada em um melhor desempenho. “Não conseguimos obter mais desempenho da arquitetura antiga”, disse Green. Angular 2 foi reescrito no TypeScript, o superconjunto de JavaScript digitado da Microsoft . “TypeScript nos permite fazer análise estática do código-fonte. Isso é algo que não podemos fazer em JavaScript, por isso torna-se muito mais previsível “, disse Green. O TypeScript também permite que o Angular mostre erros de desenvolvedores em modelos HTML.

Outro recurso adicionado no Angular 2 foi um compilador que se enquadra entre código escrito e saída enviada para um aplicativo de produção. Este compilador otimiza a geração de renderização de modelo; O código então pode ser executado na velocidade máxima em máquinas virtuais JavaScript.

Angular 2 também ofereceu um modelo de componente muito mais limpo. A interoperabilidade com tecnologias como componentes da web também foi foco no Angular 2.

Angular 4, entretanto, ofereceu melhorias no mecanismo de visualização e reduções de geração de código. A atualização Angular 4.3, foi lançada em julho e apresentou o HttpClient, que forneceu uma biblioteca menor e mais fácil de usar para fazer solicitações HTTP.

Angular 4.3 também possui um atributo, @.disabled para animações condicionalmente incapacitantes, bem como novos eventos do ciclo de vida do roteador. Desde a versão 4.0, o Angular também aprimorou as animações para que os elementos pai e filho possam ser coordenados em transições de página.

O Angular 5 segue de perto os lançamentos das versões 2 e 4, que chegaram em setembro de 2016 e março de 2017 , respectivamente, ignorando uma designação da versão 3. (Porque o roteador para Angular já havia alcançado a versão 4 no momento em que o Angular 3 era devido, o Google acabou de chamar a atualização em si Angular 4 ).


3. Características

O AngularJS, assim como o Backbone ou o JavaScriptMVC, é uma solução completa para um rápido desenvolvimento front-end. Nenhum outro framework ou plugin é necessário para criar aplicações que geram troca de informações. Seguem algumas das suas principais características.

*REST simples e fácil:
Ações REST rapidamente se tornaram padrões para comunicação entre cliente e servidor. Em uma linha de JavaScript, você consegue de forma rápida se comunicar com o servidor e solicitar as informações necessárias para interagir com a sua página web. O AngularJS transforma o processo em um simples objeto JavaScript, com Modelos, seguindo os padrões MVVM (Model View View-Model).

*MVVM:
Models se comunicam com objetos ViewModel (através do objeto $scope), que acompanham as mudanças nos Models. Essas informações são renderizadas através das Views, que basicamente é o HTML que representa seu código. A rota das views podem ser alteradas utilizando o objeto $routeProvider, você pode organizar suas views e controllers transformando-os em URLs navegáveis. O AngularJS também tem suporte a stateless controllers, que inicializa e controla o objeto $scope.

*Data Binding e Dependency Injection:
Tudo no padrão MVVM é comunicado automaticamente em toda a interface UI não importa a mudança. Isso elimina a necessidade de wrappers, getters/setters ou declaração de classes. O AngularJS suporta tudo isso, você pode apresentar suas informações com JavaScript simples, com arrays por exemplo, ou de forma customizada a gosto. Como tudo funciona automaticamente, você pode requisitar suas dependências como parâmetros através do serviço de funções do AngularJS, ao invés de utilizar uma chamada com o extenso código main().

*O HTML é seu Template:
Se você conhece o Mustache ou o Hogan.js, então você já deve conhecer a sintaxe com chaves que a template engine do AngularJS utiliza, não passa de HTML puro. O AngularJS atravessa o DOM para esses templates, até as diretivas mencionadas anteriormente. O template então passa pelo compilador do AngularJS como componentes do DOM, ao invés de strings, permitindo manipular e estender as ramificações do DOM.

*Testes a nível empresarial:
Como mencionado anteriormente, o AngularJS não precisa de frameworks ou plugins adicionais, inclusive para testes. Se você conhece ferramentas como o QUnit, o Mocha ou o Jasmine, então você não ter problemas para aprender a utilizar a API de testes do AngularJS (unit-testing API) e a Scenario Runner, que te guia nos testes permitindo simular um ambiente de produção real.

*Estado de transferência universal (Universal State Transfer):
O Angular 5 adicionou o ServerTransferStateModule e o BrowserTransferStateModule para transferir o estado computado durante a renderização do server-side para o cliente, não sendo necessário gerá-lo novamente.

**Funções em JS:
Quando você precisar efetuar requisições no AngularJS, você pode utilizar um arquivo JavaScript com uma função com nome ligado ao controller que você declarou no seu HTML:

function ActivitiesListCtrl($scope) {
  $scope.activities = [
{ "name": "Wake up" },
    { "name": "Brush teeth" },
    { "name": "Shower" },
    { "name": "Have breakfast" },
    { "name": "Go to work" },
    { "name": "Write a Nettuts article" },
    { "name": "Go to the gym" },
    { "name": "Meet friends" },
    { "name": "Go to bed" }
  ];
 }

4. Directives

O angular permite que você “extenda” código em HTML através dos seus atributos denominados directives, estas directives tem como função disponibilizar funcionalidades para a aplicação, ele também permite que novos directives sejam criados. Toda directive importada do HTML utiliza como prefixo “ng-”.
Lista de algumas directives e suas descrições:
*4.1 ngJq:
Use esta directive para forçar a biblioteca angular.element. Isso deve ser usado para forçar o jqLite deixando ng-jq em branco ou definindo o nome da variável jquery sob a janela (por exemplo, jQuery).

*4.2 ngApp:
Esta directive designa um elemento raiz para a aplicação, que na maioria dos casos se localiza próximo ao elemento raiz da página em que é utilizado. serve para dar um “auto-bootstrap” na aplicação.

*4.3 ngProp:
Liga uma expressão a um elemento HTML DOM, permitindo escrever em propriedades arbitrárias desde que elas possuam seu nome incluso no atributo.

*4.4 ngChecked:
Define como “Checked” um atributo do elemento, caso a expressão ngChecked seja verdadeira.

*4.5 ngSelected:
Define como “Selected” um atributo do elemento, caso a expressão ngSelected seja verdadeira.

*4.6 form:
Realiza a instância de um formController.

*4.7 ngValue:
Faz a ligação da expressão com o elemento em questão.

*4.8 textarea:
Um controle de elementos textarea do HTML com o databinding do AngularJS. A validação das propriedades é a mesma do input.

*4.9 ngMousemove:
Especifica o comportamento que o programa deve ter quando o mouse se move.

*4.10 ngKeypress:
Especifica o comportamento do programa quando uma tecla é pressionada.


**Exemplo de uso de directive:
*Exemplo 1:

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

*Exemplo 2:

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

5. Expressions

O AngularJS faz a ligação dos dados ao HTML através das expressions, tais expressions podem ser escritas dentro de chaves ou dentro das directives, e ela sempre trazem o seu resultado exatamente no mesmo lugar em que foram escritas. As expressions podem escritas em qualquer parte do código, tendo em vista que o AngularJS apenas vai resolvê-las e trazer o resultado exatamente para o mesmo lugar.
As expressions são um template similar à um código em javaScript, e permite que o AngularJS leia e escreva variáveis, vale ressaltar que estas variáveis não são globais. Da mesma forma que as variáveis de uma função em javaScript fazem parte de um determinado escopo, o AngularJS provê tal escopo para as variáveis que podem ser utilizadas/referenciadas por alguma expression.


6. Applications

Exemplo de uma aplicação em AngularJS do site w3schools, este código permite que uma lista de compras seja montada e que em caso de erro uma mensagem seja exibida.

<script>
var app = angular.module("myShoppingList", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = function () {
        $scope.errortext = "";
        if (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == -1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The item is already in your shopping list.";
        }
    }
    $scope.removeItem = function (x) {
        $scope.errortext = "";
        $scope.products.splice(x, 1);
    } 
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
    <ul>
        <li ng-repeat="x in products">
            {{x}}
            <span ng-click="removeItem($index)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
    <p>{{errortext}}</p>
</div>

7. Similares e/ou concorrentes

1*FgceSWNIltU8eYFsMihUnw.png

Angular:
Pontos positivos:

  • Criação de elementos DOM customizáveis.
  • Injeção de dependecia.
  • Fácil de testar.
  • Veloz ao gerar estatísticas.

**Pontos negativos: **
*Complexidade da API das directives.
*Se torna lento em páginas sobrecarregadas de elementos interativos.
*Difícil de debugar.


ReactJS:
Pontos positivos:

  • Interface simples.
  • Ótima performance.
  • Updates rápidos.
  • Biblioteca nativa.

**Pontos negativos: **

  • Difícil de dominar.
  • Está mais próximo de uma biblioteca do que de um framework.
  • Alto número de pessoas que não gostam do JSX.

8. Compiladores

Um dos principais problemas que podem afetar uma aplicação Angular é a dupla compilação, onde um DOM é compilado mais de uma vez, sendo um efeito indesejado, ele pode ocasionar comportamentos inesperados na aplicação, além de claro a queda na performance.

**Exemplo de dupla compilação:

angular.module('app').directive('addMouseover', function($compile) {
  return {
    link: function(scope, element, attrs) {
      var newEl = angular.element('<span ng-show="showHint"> My Hint</span>');
      element.on('mouseenter mouseleave', function() {
        scope.$apply('showHint = !showHint');
      });

      attrs.$set('addMouseover', null); // To stop infinite compile loop
      element.append(newEl);
      $compile(element)(scope); // Double compilation
    }
  }
})

**Exemplo de um código normal

angular.module('app').directive('addMouseover', function($compile) {
  return {
    link: function(scope, element, attrs) {
      var newEl = angular.element('<span ng-show="showHint"> My Hint</span>');
      element.on('mouseenter mouseleave', function() {
        scope.$apply('showHint = !showHint');
      });

      element.append(newEl);
      $compile(newEl)(scope); // Only compile the new element
    }
  }
})

Outra opção seria adicionar uma directive ao elemento compilado:

**Exemplo com compilação dupla

<input ng-model="$ctrl.value" add-options>
angular.module('app').directive('addOptions', function($compile) {
  return {
    link: function(scope, element, attrs) {
      attrs.$set('addOptions', null) // To stop infinite compile loop
      attrs.$set('ngModelOptions', '{debounce: 1000}');
      $compile(element)(scope); // Double compilation
    }
  }
});

**Exemplo normal

angular.module('app').directive('addOptions', function($compile) {
  return {
    priority: 100, // ngModel has priority 1
    terminal: true,
    compile: function(templateElement, templateAttributes) {
      templateAttributes.$set('ngModelOptions', '{debounce: 1000}');

      // The third argument is the max priority. Only directives with priority < 100 will be compiled,
      // therefore we don't need to remove the attribute
      var compiled = $compile(templateElement, null, 100);

      return function linkFn(scope) {
        compiled(scope) // Link compiled element to scope
      }
    }
  }
});

9. Referências

https://docs.angularjs.org/guide/concepts#directive
https://docs.angularjs.org/guide/concepts#expression
https://docs.angularjs.org/guide/concepts#compiler
https://docs.angularjs.org/guide/concepts
https://docs.angularjs.org/guide/expression
https://docs.angularjs.org/api/ng#directive
https://en.wikipedia.org/wiki/AngularJS
https://docs.angularjs.org/guide/introduction
https://www.w3schools.com/angular/angular_directives.asp
http://www.getangular.com/
https://docs.angularjs.org/guide/component
https://www.infoq.com/br/news/2017/11/angular-5
http://lcfhost.com.br/o-que-ha-de-novo-no-angular-5-aplicativos-web-progressivos-mais-faceis/
https://code.tutsplus.com/pt/tutorials/3-reasons-to-choose-angularjs-for-your-next-project--net-28457
https://www.w3schools.com/angular/angular_application.asp
https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
https://www.w3schools.com/angular/angular_directives.asp
https://www.romexsoft.com/blog/js-frameworks-comparison/
https://docs.angularjs.org/guide/concepts#compiler
https://docs.angularjs.org/guide/compiler#double-compilation-and-how-to-avoid-it

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License