Introdução

• Criadores

• Comparativo

• Características

• Porque usar?

• Projetos

Criadores

• Criado  em 2009 por Miško Hevery e Adam Abrons

Criadores

• Misko Hevery
   
• Projeto google 17.000 linhas código
  • 6 meses desenvolvendo
• Proposta de Misko: Reescrever o projeto em 2 semanas com Angular
• Resultado: Reescrita em 3 semanas de 17.000 linhas para 1.500 linhas

Comparativo

2012 ano de lançamento
 

fonte

Comparativo

2013
 

Comparativo

fonte

2016 uso no Brasil

Caracteristicas

• Framework escrito em javascript;

• Mantido pela Google;

• Arquitetura “enterprise” em uma aplicação web dinâmica;

• Criar novas tags em HTML para seu navegador interpretar;

• Suporta os navegadores:

  •  IE8+, Chrome, Firefox, Safari e Opera

Porque usar?

• Arquitetura MVC ou MVW

• Framework SPA Aplicação de Página Simples

• Interage bem com bibliotecas de componentes de terceiros

• Exige menos linhas de código do que uma solução JavaScript pura usando jQuery

• Pode usar com: Java, Python, Ruby, C#, PHP

• Totalmente modularizável e reutilizável

Onde é usado?

• Sites
• Blogs
• Plataformas online
• E-Comerce
• Streaming de Música

Quem usa?

Fonte

Fonte

Angular JS é uma coisa linda de Deus!!!

Arquitetura

MVC: Model-View-Controller​

Fonte

Separação de Responsabilidade

MVW

• Model: Consome e fornece dados, faz interligação entre aplicação e o banco de dados.
• View: Telas da aplicação (HTML/CSS)
• Whatever/Escopo, responsável por:
  • Lógica de tela (interação com usuário)
  • Dados da view (NÃO do model)
  • Toda a regra de negócios ocorre nele

Arquitetura

• Controller: Responsavel pelo que a view consome
• Scope: Faz mediação entre View e Controller

fonte

Diretivas

• Extensões do HTML (elementos, classes, atributos)
• Encapsulam comportamentos genéricos e reutilizáveis
• HTML mais limpo e de fácil leitura

Estruturais

• ng-app
  • ​Define o modulo da aplicação
• ng-controller​
  • Define um controller para determinada parte da aplicação
• ​ng-include
  • Renderiza um trecho de html no DOM em tempo de execução

  • <div ng-include="'/../templates/titular.html'"></div>

Binding

• ng-model 
  • Define campos de entrada, sempre que quisermos que o usuário insira dados e tenha acesso ao valor em JavaScript.
• ng-href
  • ​Associa o valor de um link dinâmico 
• ng-class
  • ​Ativa e desativa classes de acordo com condições definidas pelo viewmodel

Data Binding de 2 vias

• É um ciclo de notificações que o angular tras embarcado desde as suas primeiras versões, o framework percorre todas as diretivas.

Data Binding atualiza view:

O {{ }} é onde o Angular define onde serão feitos os data-bindings.

Validação de Formulários

Exemplo:

Validação de Formulários

Exemplo 2:

Filtros

• ng-repeat: Repete um componente e todo seu conteúdo para cada item de um array do viewmodel

Testabilidade

• Unitário
  • Karma
  • Ferramenta usada para gerar um servidor local que carrega sua aplicação, rodar os testes automaticamente e apresentar os resultados.
    • Desenvolvida em NodeJs

    • Configuração muito simples e interativa

    • Testes podem rodar em vários browsers

fonte

Testabilidade

• Unitário
  • Jasmine
  • Desenvolvido a partir de JavaScript
  • Fornece funções para ajudar com a estruturação de seus testes.

Testabilidade

• Unitário
  • ng-mock
  • O ngMock módulo fornece suporte para injetar serviços simulados em testes de unidade.
     
  • Estende vários serviços do núcleo ng tais que possam ser fiscalizados e controlados de forma síncrona no código de teste.