Equipe: Benicio Ávila
José Aluisio
Matheus Alves
Pedro Henrique
Arquitetura de Software
Prof. Leonardo Leitão

Sumário
Introdução
Angular 2
Pontos fortes
Web Components
Single Page Application
Arquitetura

Introdução
Angular 2 é um framework Javascript que permite desenvolver aplicações web
e mobile, mantido pela Google. Apesar de ser a segunda versão do framework,
Angular 2 não é a continuação do Angular 1 com melhores e novas
funcionalidades e sim uma versão totalmente nova.

● Ótimo para aplicativos com carga de dados pesados.
● Você pode atualizar os grandes conjuntos de dados com sobrecarga de memória mínima.
● Ele usa renderização do lado do servidor para exibições rápidas em dispositivos móveis.
● Ele funciona bem com ECMAScript e outros linguagens (TypeScript) que compilar para JavaScript.
● Ele usa a injeção de dependência para manter aplicativos sem escrever código muito longo.
● Tudo será com a abordagem baseada em componentes.
● MVC / MVVM
Pontos Fortes

● Angular 2 é mais rápido e mais fácil do que Angular 1.
● Ele suporta a versão mais recente dos navegadores e também suporta navegadores antigos,
incluindo IE9 + e Android 4.1 ou superior.
● A estrutura de código é muito simplificada que a versão anterior do Angular.
Pontos Fortes

● Cross Platform
● Produtividade
● Performance
Pontos Fortes

Cross Plataform
● Progressive web apps
Usa os recursos modernos de plataforma da Web para oferecer experiências semelhantes a
aplicativos. Instalação de alto desempenho, off-line e passo-zero
● Aplicações nativas
Aplicativos móveis nativos com estratégias de Ionic Framework, NativeScript e React Native
● Desktop
Crie aplicativos instalados no desktop em Mac, Windows e Linux usando os mesmos métodos
angulares que você aprendeu para a web, além da capacidade de acessar APIs de SO nativas.

Produtividade
● Templates
● Angular CLI
● IDEs

TypeScript
● Uma linguagem para desenvolvimento JavaScript em larga escala.
● Podemos escrever código utilizando uma estrutura fortemente tipada e ter este
código compilado para JavaScript puro. Qualquer navegador
● TypeScript é open source e pode ser usado para desenvolver aplicações
JavaScript do lado do cliente ou do lado do servidor (Node.js).
● Faz a verificação de erros durante a compilação e permite gerar Javascript para
diferentes versões do EcmaScript.

Um novo recurso do navegador que fornece um modelo de componente padrão
para a Web, composto das seguintes partes:
Templates, Shadow DOM, Custom Elements, HTML Imports e Decorators.
Eles permitem a criação de componentes reutilizáveis em aplicações Web.
Web-Components

Templates: Definem pedaços de código que são totalmente inertes à página
até que seu Javascript os ative.
Shadow DOM: é onde uma parte do código do seu elemento é encapsulada e
escondida pelo browser, ou seja, não é visível no código normal do DOM, mas
que monta todo seu componente “por baixo dos panos”.
Custom Elements: são elementos customizados, com nomes e scripts criados
por você.
Web-Components

HTML Imports: definem quais elementos customizados são empacotados e
lidos como um recurso.
Decorators: aplicam os templates baseando-se em seletores para criar
mudanças visuais ricas e comportamentos.
Web-Components

Um SPA exibe apenas uma página HTML do servidor
O mecanismo controla todo o aplicativo, incluindo processamento, entrada,
saída, pintura e carregamento das páginas HTML
90-95% do código do aplicativo é executado no navegador
Single Page Application - SPA

Praticamente todas as aplicações utilizam dados, os quais podem estar
armazenados localmente ou no servidor.
O Angular 2 permite que o desenvolvedor realize requisições e manipule as
respostas dessas requisições.
Essas respostas no Angular 2 são Observables. No Angular 1 eram Promises.
Gerenciamento de Dados

Não é uma característica específica do Angular.
Por definição é uma coleção que funciona de forma unidirecional, ou seja, ele
emite notificações sempre que ocorre uma mudança em um de seus itens e a
partir disto podemos executar uma ação.
Tem operadores que operam e, geralmente, retornam um Observable. Isso
permite aplicar operadores em corrente.
Observables

Arquitetura

Arquitetura

Module
O Angular 2 é todo estruturado em módulos, o que significa que blocos de
código com um determinado propósito compõem um módulo, e um conjunto
desses módulos irão compor a aplicação.
Um módulo é responsável por expor para a aplicação algum código específico,
que pode ser uma classe, uma função, ou mesmo uma constante.

Module
O grande benefício dos módulos é desmembrar a aplicação em pequenas partes
Módulos podem ser Independente ou não

Module
O grande benefício dos módulos é desmembrar a aplicação em pequenas partes
Módulos podem ser Independente ou não
Módulo dependente de outro módulo

Module
O grande benefício dos módulos é desmembrar a aplicação em pequenas partes
Módulos podem ser Independente ou não
Módulo dependente de outro módulo
O Módulo Financeiro depende do módulo Dados

Um componente é uma classe controller com um template o qual
principalmente lida com a visão da aplicação e lógica na página. É um pouco
de código que pode ser usado pela aplicação. O componente sabe como
renderizar ele mesmo e configurar a injeção das dependências. É possível
associar CSS ao componente usando usando component inline styles, style
urls e template inline styles.
Componente

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div>Hello my name is {{name}}.
<button (click)="sayMyName()">Say my name</button>
</div>
`
})
export class MyComponent {
name: string;
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log('My name is', this.name)
}
}
Nesse exemplo temos um componente que
imprime a variável name é um botão que a
imprime no console.
Quando utilizamos a tag <my-
component></my-component> em nosso
HTML esse componente vai ser criado, seu
construtor chamado e renderizado.
Componente

A visão do componente pode ser definida usando o modelo que indica a
Angular como exibir o componente. Por exemplo, abaixo do modelo simples
mostra como exibir o nome:
<div>
Your name is : {{name}}
</div>
Template

Os metadados informam como Angular vai processar a classe e construir o
componente
Template, metadados e componente juntos descrevem uma view
Metadata

export class HeroListComponent implements OnInit {
heroes: Hero[];
selectedHero: Hero;
constructor(private service: HeroService) { }
ngOnInit() {
this.heroes = this.service.getHeroes();
}
selectHero(hero: Hero) { this.selectedHero = hero; }
}
Metadata
@Component({
selector: 'hero-list',
templateUrl: './hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

deep breath

deep breath

Data Binding
Data Binding é como o Angular 2 faz para manter sincronizado os dados da tela
com os dados do componente.
Existem três tipos de Data Binding, exibidos no exemplo abaixo:
1 - Interpolation exibe na tela apenas os dados do atributo contido entre chaves duplas ‘{{ }}’;
2 - Bind por propriedade (property binding), que associa um valor para uma variável visível no escopo do Angular 2;
3 - Bind de evento (event binding), que é usado para adicionar uma ação a um elemento. (click);

Data Binding
Angular 2: o fim do two-way data binding?

Data Binding
Combinando os binds de evento e propriedade conseguimos ainda formar um quarto tipo de DB
Two-way data binding
Que sincroniza o valor em ambos os lados, assim sempre que o valor for alterado tanto no
componente quando no template ele será o mesmo em ambos os lados.

Um Serviço é simplesmente uma função JavaScript, juntamente com suas
propriedades e métodos.
Ele permite o desenvolvimento de código para tarefas específicas.
Serviços Angular são injetados usando o mecanismo de injeção de
dependências.
Service

Pelo fato dos templates no Angular 2 serem dinâmicos, eles necessitam de
instruções que ficam armazenadas em metadatas de diretivas.
A primeira delas é a diretiva estrutural, como o ‘*ngFor’ e o ‘*ngIf’, que
permitem iterar sobre um objeto ou exibí-lo ou não na tela respectivamente.
Directive

O segundo tipo é a diretiva de atributo, como o ‘ngModel’, que modifica o
comportamento de um elemento, como gerenciar o seu valor.
Existem muitas diretivas no core do Angular 2, como o ‘ngSwitch’, ‘ngClass’,
‘ngStyle’, e também temos a anotação ‘@Directive’ que nos permitirá criar
nossas próprias diretivas.
Directive

Dependency Injection é um padrão de design que passa um objeto como
dependências em diferentes componentes em toda a aplicação. Ele cria uma
instância de classe nova junto com suas dependências necessárias.
Dependency Injection

Você deve lembrar os pontos abaixo ao usar a Injeção de Dependência:
A Injeção de Dependência é estimulada no framework Angular2 e pode ser usada em qualquer lugar.
O mecanismo de injeção mantém instância de serviço e pode ser criado usando um provedor.
O provider é uma forma de criar um serviço.
Você pode registrar os provedores juntamente com injetores.
Dependency Injection

extras
Pontos Fracos
● Curva de aprendizado
● Constante evolução
● Uma vez que o Angular 2 é um framework recentemente introduzido, há
menos suporte da comunidade on-line.
● Bons concorrentes no mercado, como ReactJs, fazem com que a escolha
pelo framework seja complicada.

extras
Algumas diferenças do ng1 vs ng2
● por que uma nova versão
● Decisões de design equivocadas
Directive Definition Object
Global Dependency Injector
possibilita agora carregar componentes sob demanda
● Evolução da plataforma (browser)
Web Components
ES2015/2016
Mobile apps
Offline

extras
Algumas diferenças do ng1 vs ng2
● Template syntax
menos regras pra memorizar (@, &, ==, =);
HTML válido;
Sintaxe semântica;
● por que uma nova versão

extras
Algumas diferenças do ng1 vs ng2
● Goodbye $scope

Perguntas