A Apostila Angular - Cursos Edson Belém - HackMD

:a: Apostila Angular - Cursos Edson Belém - HackMD https://hackmd.
io/@lucianamedeiros/angular
:a: Apostila Angular - … Try  HackMD (https://hackmd.io?utm_source=view-page&utm_medium=logo-nav)
1 of 83 20/11/2023, 14:09
:a: Apostila Angular - Cursos Edson Belém - HackMD https://hackmd.io/@lucianamedeiros/angular
Apostila Angular - Cursos Edson Belém
Programas para instalação

• Visual Studio Code (https://code.visualstudio.com/) -https://code.visualstudio.com/
(https://code.visualstudio.com/)
• Node.js (https://nodejs.org/en/download/) - https://nodejs.org/en/download/

(https://nodejs.org/en/download/)
• Angular cli (https://cli.angular.io/) - https://cli.angular.io/ (https://cli.angular.io/)

• Git para Windows (https://gitforwindows.org/) - https://gitforwindows.org/
(https://gitforwindows.org/)
Comandos para instalar

Instalar o Angular
Este comando instala a versão mais recente
1 npm install -g @angular/cli
Este comando é para escolher a versão que queremos instalar, colocamos o “@” e o
2 of 83 20/11/2023, 14:09
numero da versão desejada.
1 npm install -g @angular/cli@10
As versões que estamos usando no curso:
Outros comandos
Verficar a versão do Angular.
1 ng v
Criar um projeto.
1 ng new nome_do_projeto
Criação de diretorio e classe

Para criar o diretório:
Clicar com o botão direito em “app” -> new folder -> digitar o nome do diretorio
3 of 83 20/11/2023, 14:09
Para criar a classe:

Clicar com o botão direito em app -> new file…
Node js (https://nodejs.org/en/)
4 of 83 20/11/2023, 14:09
https://nodejs.org/en/ (https://nodejs.org/en/)
Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome

para facilmente construir aplicações de rede rápidas e escaláveis. Node.js usa um
modelo de I/O direcionada a evento não bloqueante que o torna leve e eficiente, ideal
para aplicações em tempo real com troca intensa de dados através de dispositivos
distribuídos.
Node.js é um interpretador, com código aberto, de código JavaScript de modo

assíncrono e orientado a eventos, focado em migrar a programação do Javascript do
lado do cliente para os servidores, criando assim aplicações de alta escalabilidade
(como um servidor web), capazes de manipular milhares de conexões/requisições
simultâneas em tempo real, numa única máquina física. O Node.js é baseado no
interpretador V8 JavaScript Engine (interpretador de JavaScript open source
implementado pelo Google em C++ e utilizado pelo Chrome). Foi criado por Ryan Dahl
em 2009, e seu desenvolvimento é mantido pela fundação Node.js em parceria com a
Linux Foundation.
5 of 83 20/11/2023, 14:09
Como o Node funciona?

O Node roda em uma JavaScript V8 VM. Mas espere, JavaScript no servidor? Isso, você
leu certo. JavaScript no lado do servidor pode ser um conceito novo para todos que
trabalharam exclusivamente com o JavaScript no lado do cliente, mas a idéia em sí não
é tão absurda – porque não usar a mesma linguagem de programação no cliente que
você usa no servidor?
O que é V8? O motor JavaScript V8 é o motor que a Google usa com seu navegador
Chrome. Poucas pessoas pensam sobre o que realmente acontece com o JavaScript no
lado do cliente. Bem, a engine JavaScript realmente interpreta o código e o executa.
Com o V8 a Google criou um ultra-rápido interpretador escrito em C++, com um outro
aspecto único: você pode baixar a engine e incorporá-la em qualquer aplicação
desejada. Isso não está restrito em rodar em um navegador. Então Node atualmente
usa o motor JavaScript V8 escrito pela Google e propõe que seja usado no servidor.
Express
Express.js , ou simplesmente Express , é uma estrutura de aplicativo da web para o

Node.js, lançada como software livre e de código aberto sob a licença MIT . Ele é
projetado para construir aplicativos da Web e APIs . Ele foi chamado de framework de
servidores padrão de fato para o Node.js.
O autor original, TJ Holowaychuk , descreveu-o como um servidor inspirado no Sinatra

, o que significa que é relativamente mínimo com muitos recursos disponíveis como
plugins. Express é o componente backend da pilha MEAN , junto com o software de
banco de dados MongoDB e a estrutura de frontend Angular.
Nodemon
https://nodemon.io/ (https://nodemon.io/)
6 of 83 20/11/2023, 14:09
Para instalar:
1 npm i nodemon –g
Esse módulo é um utilitário que irá monitorar todas as alterações nos arquivos de sua
aplicação e reiniciar automaticamente o servidor quando for necessário.
O Nodemon é um utilitário que monitora quaisquer alterações em sua origem e

reinicia automaticamente seu servidor. Perfeito para o desenvolvimento. Instale-o
usando npm .
Basta usar em nodemonvez de nodeexecutar seu código e, agora, seu processo será
reiniciado automaticamente quando o código for alterado. Para instalar, obtenha
node.js e , a partir do seu terminal, execute:
Características:
• Reinício automático da aplicação.
• Detecta extensão de arquivo padrão para monitorar.
• Suporte padrão para node & coffeescript, mas fácil de executar qualquer executável
(como python, make, etc).
• Ignorando arquivos ou diretórios específicos.
• Assista diretórios específicos.
• Funciona com aplicativos de servidor ou utilitários de execução única e REPLs.
• Necessário em aplicativos de nó.
Código aberto e disponível no github
7 of 83 20/11/2023, 14:09
Mongoose
http://mongoosejs.com/ (http://mongoosejs.com/)
Para instalar:
1 npm i mongoose -g
Mongoose é uma biblioteca do Nodejs que proporciona uma solução baseada em

esquemas para modelar os dados da sua aplicação. Ele possui sistema de conversão de
tipos, validação, criação de consultas e hooks para lógica de negócios.
Mongoose fornece um mapeamento de objetos do MongoDB similar ao ORM (Object

Relational Mapping), ou ODM (Object Data Mapping) no caso do Mongoose. Isso
significa que o Mongoose traduz os dados do banco de dados para objetos JavaScript
para que possam ser utilizados por sua aplicação.
O express.bodyParser() é uma função que facilita a construção de objetos JSON apartir

de uma submissão de dados de um formulário html, ele simplesmente monta um
objeto apartir dos valores do campo name, em que o campo name cria um objeto e
atributos e o campo value insere valores nesses objetos.
Conceitos Gerais
Classe e Objeto
8 of 83 20/11/2023, 14:09
Uma classe é uma forma de definir um tipo de dado em uma linguagem orientada a
objeto. Ela é formada por dados e comportamentos.
Para definir os dados são utilizados os atributos, e para definir o comportamento são
utilizados métodos. Depois que uma classe é definida podem ser criados diferentes
objetos que utilizam a classe. A Listagem 1 mostra a definição da classe Empresa, que
tem os atributos nome, endereço, CNPJ, data de fundação, faturamento, e também o
método imprimir, que apenas mostra os dados da empresa.
Encapsulamento
O conceito do encapsulamento consiste em “esconder” os atributos da classe de quem
for utilizá-la. Isso se deve por dois motivos principais.
Um é para que alguém que for usar a classe não a use de forma errada como, por
exemplo, em uma classe que tem um método de divisão entre dois atributos da classe
- se o programador java não conhecer a implementação interna da classe, ele pode
colocar o valor zero no atributo do dividendo, mas se a classe estiver corretamente
encapsulada podemos impedir que o programador faça isso.
Associação de Classes
9 of 83 20/11/2023, 14:09
A associação de classes indica quando uma classe tem um tipo de relacionamento

“tem um” com outra classe como, por exemplo, uma pessoa tem um carro e isso indica
que a classe Pessoa tem uma associação com a classe Carro. Esse tipo de
relacionamento entre classes é importante, porque define como as classes interagem
entre elas nas aplicações.
Herança
A herança é um tipo de relacionamento que define que uma classe “é um” de outra
classe como, por exemplo, a classe Funcionario que é uma Pessoa, assim um
Funcionário tem um relacionamento de herança com a classe Pessoa. Em algumas
linguagens, como C, é possível fazer herança múltipla, isto é, uma classe pode herdar
de diversas outras classes, mas em Java isso não é permitido, pois cada classe pode
herdar de apenas outra classe.
Herança é um princípio de orientação a objetos, que permite que classes compartilhem

atributos e métodos, através de “heranças”. Ela é usada na intenção de reaproveitar
código ou comportamento generalizado ou especializar operações ou atributos. O
conceito de herança de várias classes é conhecido como herança múltipla. Como
10 of 83 20/11/2023, 14:09
exemplo pode-se observar as classes ‘aluno’ e ‘professor’, onde ambas possuem

atributos como nome, endereço e telefone. Nesse caso pode-se criar uma nova classe
chamada por exemplo, ‘pessoa’, que contenha as semelhanças entre as duas classes,
fazendo com que aluno e professor herdem as características de pessoa, desta maneira
pode- se dizer que aluno e professor são subclasses de pessoa. Também podemos
dizer que uma classe pode ser abstrata(abstract) ou seja ela não pode ter uma
instância, ela apenas “empresta” seus atributos e metódos como molde para novas
classes.
Interface
Em algumas linguagens de programação, o termo interface (ou protocolo) é uma

referência à característica que permite a construção de interfaces que isolam do
mundo exterior os detalhes de implementação de um componente de software.
O princípio da interface é um alicerce da programação modular que, por sua vez, é

precursora e parte da programação orientada a objeto. Na programação orientada a
objeto, a interface de um objeto consiste de um conjunto de métodos que um objeto
deve suportar. É importante notar que as variáveis de instância não fazem parte da
interface de um objeto pois devem ser acessadas somente pelos “métodos de acesso”.
Historicamente, as interfaces são derivadas dos arquivos de cabeçalho da Linguagem C
(normalmente arquivos com extensão “.h”) que separam o contexto sintático de um
módulo (ou protótipos de funções) da sua implementação.
Algumas linguagens de programação orientadas a objeto exigem que a interface do

objeto seja especificada de forma separada da implementação do objeto, enquanto
outras não fazem esta exigência. Por exemplo, em linguagens de programação como
Objective-C, a classe do objeto define a sua interface e é declarada em um arquivo de
11 of 83 20/11/2023, 14:09
cabeçalho (header em inglês) e, por outro lado, a implementação da classe é mantida

em um arquivo chamado de “arquivo fonte”. Devido à tipagem dinâmica existente na
Objective-C, que permite o envio de mensagens para qualquer objeto, a interface de
uma classe é importante para determinar para quais métodos um objeto de uma classe
responde.
A linguagem de programação Java, que recebeu influência da Objective-C, utiliza outra
abordagem para o conceito de interface, assim como outras linguagens orientadas a
objeto, onde a interface especifica um conjunto de métodos ou funcionalidades
comuns a um conjunto de classes. Ver interface na linguagem Java.
Desenvolvimento de Software
Em arquitetura de software há muitas camadas entre o hardware e o usuário final.

Cada uma pode ser dita como tendo um front-end e um back-end. O front-end é uma
abstração, simplificando o componente subjacente pelo fornecimento de uma interface
amigável, como por um exemplo um navegador de Internet, ou um formulário para um
determinado usuário.
Em projetos de software, por exemplo, a arquitetura modelo-visão-controlador fornece

o -end e o back-end para o banco de dados, o usuário e para os componentes de
processamento. A separação de sistemas de software em front-end e back-end
simplifica o desenvolvimento e separa a manutenção. Uma regra de ouro é que o lado
frontal (ou “cliente”) é qualquer componente manipulado pelo usuário. O código do
lado do servidor (ou back-end) reside no servidor. A confusão surge quando alguém
tem que fazer edições na parte frontal para arquivos do lado servidor. Muitos
projetistas HTML, por exemplo, não precisam estar no servidor quando eles estão
desenvolvendo o HTML. Reciprocamente, engenheiros do lado servidor, por definição,
12 of 83 20/11/2023, 14:09
nunca estão em qualquer coisa, mas num servidor. Considera-se os dois para,
finalmente, fazer um site web funcional e interativo.
Para subsistemas de computação maiores, um gerenciador de arquivos gráfico é um

front-end para o sistema de arquivos do computador e um shell faz a interface com o
sistema operacional. O front-endreveste o usuário e o back-end executa os programas
do sistema operacional em resposta.
Arquitetura MVC
Arquitetura Modelo-Visão-Controlador (do inglês: Model-View-Controller - MVC) é

um padrão de arquitetura de software (não confundir com design pattern) que separa
a representação da informação da interação do usuário com ela. Normalmente usado
para o desenvolvimento de interfaces de usuárioque divide uma aplicação em três
partes interconectadas. Isto é feito para separar representações de informação internas
dos modos como a informação é apresentada para e aceita pelo usuário. O padrão de
projeto MVC separa estes componentes maiores possibilitando a reutilização de
código e desenvolvimento paralelo de maneira eficiente.
O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e

funções. Uma visão (view) pode ser qualquer saída de represenção dos dados, como
uma tabela ou um diagrama. É possível ter várias visões do mesmo dado, como um
gráfico de barras para gerenciamento e uma visão tabular para contadores. O
controlador (controller) faz a mediação da entrada, convertendo-a em comandos para
o modelo ou visão. As ideias centrais por trás do MVC são a reusabilidade de código e
separação de conceitos.
Tradicionalmente usado para interfaces gráficas de usuário (GUIs), esta arquitetura
13 of 83 20/11/2023, 14:09
tornou-se popular para projetar aplicações web e até mesmo para aplicações móveis,
para desktop e para outros clientes. Linguagens de programação populares como Java,
C#, Ruby, PHP e outras possuem frameworks MVC populares que são atualmente
usados no desenvolvimentos de aplicações web.
Camada de apresentação ou visualização (View) - Não se dedica em saber como o

conhecimento foi retirado ou de onde ela foi obtida, apenas mostra a referência.
Segundo Gamma et al (2006), ”A abordagem MVC separa a View e Model por meio de
um protocolo inserção/notificação (subscribe/notify). Uma View deve garantir que sua
expressão reflita o estado do Model. Sempre que os dados do Model mudam, o Model
altera as Views que dependem dele. Em resposta, cada View tem a oportunidade de
modificar-se”. Adiciona os elementos de exibição ao usuário : HTML, ASP, XML,
Applets. É a camada de interface com o usuário. É utilizada para receber a entrada de
dados e apresentar visualmente o resultado.
Camada de lógica da aplicação (Model) - É o coração da execução, responsável por

tudo que a aplicação vai fazer a partir dos comandos da camada de controle em um ou
mais elementos de dados, respondendo a perguntas sobre o sua condição e a
instruções para mudá-las. O modelo sabe o que o aplicativo quer fazer e é a principal
estrutura computacional da arquitetura, pois é ele quem modela o problema que está
se tentando resolver. Modela os dados e o comportamento por atrás do processo de
negócios. Se preocupa apenas com o armazenamento, manipulação e geração de
dados. É um encapsulamento de dados e de comportamento independente da
apresentação.
Camada de controle (Control) - É responsável por interpretar as ações de entrada

através do mouse e teclado realizadas pelo usuário. O Controle (Controller) envia essas
ações para o Modelo (Model) e para a janela de visualização (View) onde serão
realizadas as operações necessárias.
Arrays, Vetor e Matriz
14 of 83 20/11/2023, 14:09
Um array é uma estrutura de dados homogênea que mantém uma série de elementos
de dados de mesmo tipo. Pode-se acessar os elementos individuais armazenados no
array por meio de uma posição de índice associada, geralmente numérica.
No geral, os arrays possuem tamanho fixo, ou seja, número de posições definida; em

algumas linguagens de programação, existem estruturas de arrays que possuem
tamanho variável. Vamos estudar aqui os arrays tradicionais, de tamanho especificado.
Classificação dos arrays

Os arrays são classificados de acordo com a sua dimensão de armazenamento de
dados, como segue:
• Unidimensional: Vetor
• Bidimensional: Matriz
• Tridimensional: Cubo
Uma matriz é uma coleção de variáveis de mesmo tipo, acessíveis com um único nome
e armazenados contiguamente na memória. A individualização de cada variável de um
vetor é feita através do uso de índices.
Os Vetores são matrizes de uma só dimensão.
Um vetor é um array unidimensional, ou seja, de uma única dimensão; é análogo a

uma linha única de dados em uma planilha ou tabela. A figura a seguir ilustra a
estrutura interna de um vetor de quatro posições, que permite portanto armazenar até
quatro dados, de nome Notas.
15 of 83 20/11/2023, 14:09
No geral a contagem das posições se inicia em zero (0), de modo que a primeira
posição do vetor será a posição 0, a segunda posição será 1, e assim por diante; a
última posição do vetor será a de número n – 1, onde n é o número total de posições
disponíveis (tamanho do array). Assim, em um vetor de 4 posições a última posição
será 4 – 1 = 3. As posições em um vetor são sempre indicadas pelo número da posição
entre colchetes [ ].
Declaração de vetores
Podemos declarar um vetor em português estruturado usando a seguinte sintaxe:
nomeVetor: vetor [i…f] de Tipo_Dados
Onde:
• nomeVetor é o nome escolhido para o vetor, que deve seguir as regras de

nomeação de variáveis.
• i = Valor da primeira posição do vetor (preferencialmente zero)
• F = Valor da última posição do vetor (tamanho do vetor – 1)
• Tipo_Dados = tipo dos dados que serão armazenados nas posições do vetor
Declaração de Matrizes
1 int Vetor[5]; // declara um vetor de 5 posições

2 int Matriz[5][3]; // declara uma matriz de 5 linhas e 3 colunas
Acesso aos elementos do vetor

Para acessar os elementos de um vetor usa-se índices. O índice define a posição da
variável dentro do vetor. Em todos os vetores tem o primeiro elemento na posição
0(zero). Assim, se tomarmos “K” como sendo o tamanho do vetor a última posição é a
de índice “K-1”
16 of 83 20/11/2023, 14:09
1 Vetor[0] = 4; // Coloca 4 na primeira posição de "Vetor"

2 Vetor[4] = 8; // Coloca 8 na última posição de "Vetor"
Exemplos com Vetores
1 int Vetor[5]; // declara um vetor de 5 posições

2 int Matriz[5][3]; // declara uma matriz de 5 linhas e 3 colunas
3
4 Vetor[0] = 9; // coloca 9 na primeira posição do vetor
5 Vetor[4] = 30 // coloca 30 na última posição do vetor
6
7 Matriz[0][1] = 15; // coloca 15 na célula que está na primeira linha
8 // e na segunda coluna da matriz
Operador ternário
No desenvolvimento de uma aplicação, é muito comum utilizarmos estruturas

condicionais como, por exemplo, ifs e elses ou switch case. Porém, em algum momento
da nossa vida, provavelmente, um desses testes que realizamos é tão simples que
retorna um valor para apenas duas possibilidades.
Por exemplo, suponhamos que precisamos criar uma funcionalidade para gerar uma
bonificação e a regra para essa funcionalidade é a seguinte:
• Se o salário for maior que R$ 1000, o bônus é de 10%

• Se o salário for menor ou igual a R$ 1000, o bônus é de 15%
Uma solução seria utilizar um if e else como já conhecemos, como por exemplo no
17 of 83 20/11/2023, 14:09
Java:
1 double salario = 1000;

2 double bonus = 0.0;
3
4 if (salario > 1000) {
5 bonus = salario * 0.10;
6 } else {
7 bonus = salario * 0.15;
8 }
9
10 System.out.println(bonus);
Nesse exemplo o resultado é 150.0 pois o salário é menor que R$ 1000.0, ou seja,
bônus de 15%.
Entretanto, perceba que o que estamos fazendo é apenas um teste bem básico que
tem apenas uma única linha de código dentro do if ou do else. Será que não existe
uma maneira mais simples de resolver o mesmo problema?
Em um cenário similar a esse, podemos também utilizar o operador ternário que

funciona com o mesmo conceito do if e else, porém, a única diferença é que
precisamos devolver um valor após o teste estritamente em uma única linha!
1 double salario = 1000;

2 double bonus = salario * (salario > 1000 ? 0.10 : 0.15);
3 System.out.println(bonus);
Com esse código acima temos o mesmo resultado de antes, ou seja, 150.0. Mas como
funciona esse operador ternário? A estrutura de um operador ternário é compreendida
da seguinte forma:
Condição? valor se for verdareiro : valor se for falso

Portanto, inicialmente temos um teste (podemos adicionar um teste qualquer), ou seja,
qualquer teste devolve um valor booleano, então, definimos o primeiro parâmetro que
é justamente o valor que será retornado caso o teste for verdadeiro e o segundo que
será retornado caso for falso!
Justamente pelo fato de realizar essas 3 operações, o chamamos de operador ternário.

Mas isso é só em Java? Não! Diversas linguagens implementam esse mesmo recurso!
Vejamos alguns exemplos:
18 of 83 20/11/2023, 14:09
JavaScript:
1 var salario = 1000;

2 var bonus = salario * (salario > 1000 ? 0.10 : 0.15);
Angular
Angular (comumente referido como “Angular 2+” ou “Angular 2”) é uma plataforma de
aplicações web de código-fonte aberto e front-end baseado em TypeScript liderado
pela Equipe Angular do Google e por uma comunidade de indivíduos e corporações.
Angular é uma reescrita completa do AngularJS, feito pela mesma equipe que o
construiu.
Diferenças entre Angular e AngularJS
19 of 83 20/11/2023, 14:09
Arquitetura de uma aplicação Angular. Os principais blocos são módulos,

componentes, templates, metadados, enlace de dados, directivas, serviços e injeção de
dependência.Angular foi uma base de reescrita do AngularJS.
• Angular não tem um conceito de “escopo” ou controladores, em vez disso, ele usa
uma hierarquia de componentes como o seu principal conceito arquitetônico.
• Angular tem uma expressão diferente de sintaxe, concentrando-se no uso de “[ ]”
para a propriedade de ligação, e no uso de “( )” para ligação do evento
• Modularidade – muito das funcionalidades principais foram movidas para os
módulos
• Angular recomenda o uso da linguagem da Microsoft, o TypeScript, que apresenta
as seguintes características:
◦ É baseado em classes de Programação Orientada a Objeto
◦ Tipagem Estática
◦ Programação genérica
• O TypeScript é um superconjunto do ECMAScript 6 (ES6), e é compatível com
ECMAScript 5 (i.e.: JavaScript). Angular também inclui ES6:
◦ Lambdas
◦ Iteradores
◦ For/Of loops
• Carregamento dinâmico
• Modelo de compilação assíncrono
• A substituição de controladores e $escopo com componentes e diretrizes – um
componente é uma directiva com um modelo
• Programação reativa de suporte usando RxJS
História do Angular
20 of 83 20/11/2023, 14:09
Originalmente, a reescrita do AngularJS foi chamado de “Angular 2” pela equipe, mas

isto levou à confusão entre os desenvolvedores. Para esclarecer, a equipe anunciou
que termos separados devem ser usados para cada Framework, com “AngularJS”,
referindo-se a 1.X versões e “Angular” sem o “JS”, referindo-se às versões à partir da 2
até a última.
A versão 2.0
O Angular 2.0 foi anunciado no ng-Europe conference 22-23 de setembro de 2014. As
mudanças drásticas na versão 2.0 criou uma considerável controvérsia entre os
desenvolvedores. Em 30 de abril de 2015, os desenvolvedores Angular anunciaram que
o Angular 2 foi transformado de Alfa a Developer Preview. O Angular 2 mudou-se para
o Beta em dezembro de 2015,e a primeira versão foi publicada em Maio de 2016 A
versão final foi lançada em 14 de setembro de 2016.
Versão 4.0
Em 13 de dezembro de 2016 Angular 4 foi anunciado, ignorando o 3 para evitar uma
confusão devido ao desalinhamento da versão do pacote do roteador que já foi
distribuído como v3.3.0. A versão final foi lançada em 23 de Março de 2017. O Angular
4 é compatível com o Angular 2.
O Angular versão 4.3 é uma versão menor, o que significa que ele contém alterações
que não são de última hora e que é uma atualização pequena para 4.x.x.
Recursos na versão 4.3

Introdução de HttpClient, uma biblioteca menor, mais poderosa, e mais fácil de usar,
para fazer Solicitações HTTP.
21 of 83 20/11/2023, 14:09
Novo roteador ciclo de vida de eventos para Guardas e Resoluções. Quatro novos
eventos: GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd juntam-se ao
conjunto existente de ciclo de vida, tais como a NavigationStart. Condicionalmente
desativa animações.
Versão 5.0
Angular 5 foi lançado em 1 de novembro de 2017. Os principais aprimoramentos
Angular 5 incluem suporte para web apps progressivos, uma compilação otimizadora e
melhorias relacionadas ao Material Design.
Versão 6.0
O lançamento da sexta versão do Angular ocorreu no dia quatro de Maio de 2018. Esta
versão teve um foco menor na base do framework, e maior na cadeia de ferramentas e
em como tornar mais fácil e rápida a migração com Angular nas atualizações futuras,
como os comandos da CLI (Interface de Linha de Comando): ng update, ng add,
Angular Elements, Componentes Angular Material + CDK, Componentes Iniciais
Angular Material, CLI Workspaces, Suporte a biblioteca, Provedores de Árvore
Shakable, Melhoramentos no desempenho de animações, e atualização do RxJS para a
versão 6.
Versão 7.0
A sétima versão do Angular foi lançada no dia dezoito de Outubro de 2018.
Atualizações relacionadas ao desempenho de aplicativos, Angular Material & CDK,
Rolagem Virtual, Melhor acessibilidade do elemento de formulário select (também
conhecido por combobox ou dropdownlist), agora suporta Content Projection usando
o padrão web para elementos personalizados, e atualizações de dependência em
relação ao Typescript 3.1, RxJS 6.3, Node 10 (ainda suportando Node 8).
Versão 7.1
O lançamento do Angular 7 ocorreu em novembro de 2018 e está disponível
Versão 8.0
O lançamento da mais nova versão do Angular ocorreu em maio de 2019 e conta com
algumas melhorias no funcionamento dos formulários reativos, melhoria na sintaxe
para declaração de rotas lazy-loading e a esperada disponibilização do compilador Ivy,
que nesta versão ainda está em preview e precisa ser habilitado, mas não é
recomendado que se utilize em produção.
Cada versão está prevista para ser compatível com a versão anterior. O Google se
comprometeu a fazer atualizações duas vezes por ano.
Versão 9.0
22 of 83 20/11/2023, 14:09
O Angular 9 foi lançado em 6 de fevereiro de 2020. A versão 9 move todos os

aplicativos para usar o compilador Angular Ivy por padrão. O Angular foi atualizado
para funcionar com TypeScript 3.6 e 3.7. Além de centenas de correções de bugs, o
compilador e o tempo de execução Ivy oferecem inúmeras vantagens:
• Tamanhos de pacote menores

• Teste mais rápido
• Melhor depuração
• Melhor classe CSS e vinculação de estilo
• Verificação de tipo aprimorada
• Erros de compilação aprimorados
• Tempos de compilação aprimorados, habilitando AOT por padrão
• Melhor Internacionalização
Versão 10
O Angular 10 foi lançado em 24 de junho de 2020:
Caracteristicas:
• Novo seletor de intervalo de datas (biblioteca de IU de materiais)
• Avisos sobre importações CommonJS
• Configurações opcionais mais estritas
• Mantendo-se atualizado com o ecossistema
• Nova configuração de navegador padrão
• Depreciações e Remoções
• Adição de recursos de atualização automática do Angular CLI;
• Melhorias de desempenho significativas no Angular Ivy, o novo mecanismo de

renderização;
23 of 83 20/11/2023, 14:09
• Adição de recursos como “enableIvy” e “strictTemplates” para melhorar a

segurança e a compatibilidade do código;
• Melhorias na sintaxe do TypeScript, incluindo a adição do operador “??”, que

permite valores padrão mais fáceis.
Versão 11
• Adição de recursos de navegação por abas e páginas inativas em aplicativos

Angular;
• Melhorias de desempenho significativas no Angular Ivy;
• Melhorias na API HttpClient para permitir uma maior personalização do
comportamento do cliente;
• Melhorias no processo de compilação e empacotamento do Angular para
melhorar o desempenho do aplicativo.
Versão 12
• Adição de recursos de roteamento lazy-loading e melhorias no roteamento

dinâmico;
• Adição de recursos para detectar e corrigir problemas de compatibilidade com o
navegador;
• Adição de recursos para melhorar a interoperabilidade com outros frameworks e
bibliotecas;
• Melhorias na API FormBuilder para permitir uma maior personalização do
comportamento do formulário.
.
.
.
Typescript
24 of 83 20/11/2023, 14:09
TypeScript é um superconjunto de JavaScript desenvolvido pela Microsoft que adiciona

tipagem e alguns outros recursos a linguagem. Anders Hejlsberg, arquiteto da
linguagem C# e criador das linguagens Delphi e Turbo Pascal, trabalhou no
desenvolvimento do TypeScript. A linguagem pode ser usada para desenvolver
aplicações JavaScript no lado cliente e lado servidor (Node.js).
Foi considerada pelo público a 4ª linguagem “mais amada”, de acordo com uma
pesquisa conduzida pelo site Stack Overflow em 2018, e está entre as 15 linguagens
mais populares, de acordo com uma pesquisa conduzida pela RedMonk
TypeScript é um superconjunto de JavaScript

Isso significa que o TypeScript estende JavaScript com funcionalidade extra que não
está presente na versão atual do JavaScript suportada pela maioria dos navegadores.
Então, quais são esses recursos?
Se você estiver familiarizado com linguagens como Java ou C #, provavelmente sabe
que cada variável requer um tipo e esse tipo deve ser declarado antecipadamente .
JavaScript é uma linguagem fracamente tipada ou digitada dinamicamente. As
variáveis em JavaScript não estão diretamente associadas a nenhum tipo de valor
específico, e qualquer variável pode ser atribuída (e reatribuída) a todos os tipos de
valores:
25 of 83 20/11/2023, 14:09
1 var foo = 42; // foo is now a Number

2 var foo = 'bar'; // foo is now a String
3 var foo = true; // foo is now a Boolean
Em uma linguagem fracamente tipada, o tipo de um valor depende de como ele é

usado . Por exemplo, se eu puder passar uma string para o operador de adição e ela
será automaticamente interpretada como um número ou causará um erro se o
conteúdo da string não puder ser traduzido em um número . Da mesma forma, posso
concatenar cadeias e números ou usar strings como booleanos, etc.
Em uma linguagem fortemente tipada, uma variável tem um tipo e esse tipo não pode
mudar . O que você pode fazer com uma variável depende do seu tipo. Se tentarmos
compilar o código acima no TypeScript, obteremos o erro:
[ts] Subsequent variable declarations must have the same type.

Variable ‘foo’ must be of type ‘number’, but here has type ‘boolean’.
A vantagem de uma linguagem fortemente tipada é que você é forçado a tornar

explícito o comportamento do seu programa . Se você quiser adicionar um número e
uma string ao seu código, você deve traduzir a string em um número a ser usado
como um operando do operador de adição. Isso torna o código mais fácil de entender
porque não há comportamento (ou menos) oculto . Isso também torna seu código
mais detalhado.
Lembrar:
A tipificação forte é opcional no TypeScript, mas o uso desse recurso torna seu
aplicativo mais previsível e facilita a depuração, portanto, você deve
definitivamente usá-lo.
Orientado a Objeto
A programação orientada a objetos (OOP) é um conceito antigo usado por vários
idiomas, como Java ou C #, para ajudar o desenvolvedor a associar dados e métodos
em um “objeto”. Em OOPobjeto são criados e são capazes de interagir uns com os
outros usando os métodos de enfrentamento público um do outro. JavaScript em si
não é uma linguagem orientada a objetos na maneira que C ++, C # ou Java são. O
TypeScript, por outro lado, pode ser tratado como uma linguagem orientada a objetos
por causa das construções de linguagem introduzidas sobre os fechamentos de
JavaScript.
O TypeScript traz muitos recursos orientados a objetos que perdemos no JavaScript
por um longo tempo. Temos conceitos explícitos de:
26 of 83 20/11/2023, 14:09
• Classes
• Interfaces
• Construtores
• Modificadores de acesso (públicos e privados)
Erro de tempo de compilação

Deixe-me explicar primeiro o que run-time error é como este é um caso comum.
Estamos falando sobre run-time error quando enfrentamos qualquer problema ao usar
nosso aplicativo. Em outras palavras - se você cometer um erro ao criar seu site e
escrever algum código, você o verá apenas enquanto estiver usando o aplicativo / site.
Por exemplo, se você cometer um erro de digitação em um arquivo de página da Web,
o console do seu navegador mostrará um erro quando você carregar essa página.
Devido à fraca tipagem em JavaScript, muitas vezes acontece que tentamos realizar
operações em uma variável com um tipo diferente. Se a nossa lógica de aplicativo for
complexa, talvez não percebamos que estamos tentando atribuir elementos de um tipo
diferente uns aos outros. Em JavaScript, só saberemos sobre o erro quando alguém
acionar um código e ele falhar . Por outro lado, o TypeScript pode nos fornecer erros
de tempo de compilação, o que significa que ele pode detectar erros ao compilar
código para JavaScript e corrigi-lo antes de implantar na produção. Claro que não vai
pegá-los todos, mas ainda muito.
Fundamentos do TypeScript
O TypeScript fornece aos desenvolvedores conceitos orientados a objeto e compila a
verificação do tipo de tempo em cima do JavaScript, o que ajuda a escrever código
mais estruturado, sustentável e robusto. O TypeScript introduz alguns dos termos
orientados a objetos padrão, como Classes, Interfaces, Module e Variables, que no final
são convertidos em várias formas diferentes de JavaScript. A estrutura de código para
um arquivo TypeScript típico é mostrada abaixo.
Módulo
O módulo é como um namespace no mundo .NET e pode conter classes e interfaces.
Os módulos não possuem nenhum recurso próprio, eles apenas fornecem um
contêiner que pode ser usado para estruturar o código de forma lógica. Olhe para o
módulo apenas como um contêiner de entidade lógica / comercial.
Interface
27 of 83 20/11/2023, 14:09
Interfaces são exatamente como interfaces no .NET que fornecem um contrato para as
classes implementarem. O TypeScript ajuda a fornecer verificação de erros de tempo
de compilação para as classes que implementam essas interfaces. Se todos os métodos
não foram implementados corretamente (incluindo a assinatura do método), o
TypeScript sinaliza aqueles em tempo de design, bem como o tempo de compilação.
Coisa interessante sobre Interfaces é que eles não existem em JavaScript e, portanto,
quando compilamos um arquivo TypeScript em JavaScript, as Interfaces são omitidas.
Classes
O conceito de Classes é novamente muito semelhante ao mundo .NET / Java. Classes
contém variáveis, propriedades e métodos que formam uma entidade lógica. O
TypeScript também permite definir o escopo da variável e funções com palavras-chave
como “ private” e “ public”, embora esse escopo não tenha qualquer efeito sobre o
JavaScript gerado.
Funções
Funções são métodos em que a lógica é implementada. O TypeScript fornece suporte
de tempo de compilação para garantir que qualquer pessoa que chame a função
mencionada concorde com o argumento de entrada e com o tipo de valor de retorno.
Variáveis
Variáveis são os campos definidos dentro de uma classe ou função. O TypeScript nos
permite definir uma variável usando a palavra-chave “ var” e atribuir um tipo de dados
a ela. Uma vez que um tipo de dado é atribuído, qualquer uso adicional da variável
deve ser com o mesmo tipo de dados, caso contrário, o TypeScript gerará erro no
design e no tempo de compilação. O TypeScript também é inteligente o suficiente para
inferir o tipo de uma variável e depois tratá-la como esse tipo quando uma variável é
declarada e inicializada. Nos casos em que o TypeScript não é capaz de inferir o tipo,
ele atribuirá esse tipo de variável “ any”.
Tipos de TypeScript
O TypeScript fornece alguns tipos primitivos (mostrados abaixo), bem como um tipo
dinâmico “ any”. " Any" É como " dynamic" palavra-chave em c # em que podemos
atribuir qualquer tipo de valor para a variável. O TypeScript não sinaliza erros de tipo
para variáveis do tipo “ any”.
No TypeScript, definimos uma variável com um tipo apenas acrescentando o nome da
variável com dois-pontos, seguido do nome do tipo, como mostrado no exemplo
abaixo.
28 of 83 20/11/2023, 14:09
1 var num: number = 30; //variable num is of type number
Abaixo está a lista de tipos primitivos disponíveis no TypeScript:
• Number: “ number” É um tipo de número primitivo em TypeScript. Não existe um

tipo diferente para float ou double no TypeScript
• Boolean: O boolean tipo " " representa true ou false condição
• String: O " string" representa uma seqüência de caracteres semelhantes ao C #
• Null: “ null” É um tipo especial que atribui null valor a uma variável
• Undefined: O “ undefined” também é um tipo especial e pode ser atribuído a
qualquer variável
Classes e Interface
Classes
Classes TypeScript são uma unidade básica de abstração muito semelhante às classes C
# / Java. No TypeScript, uma classe pode ser definida com a palavra-chave “ class”
seguida do nome da classe. Classes TypeScript podem conter construtor, campos,
propriedades e funções. O TypeScript permite que os desenvolvedores definam o
escopo da variável dentro das classes como “ public” ou “ private”. É importante notar
que as palavras-chave “ public/ private” só estão disponíveis no TypeScript, uma vez
convertido para JavaScript, não há como distinguir entre os dois e ambos podem ser
chamados. O TypeScript define um construtor usando a palavra-chave " constructor".
Exemplo em Typescript:
29 of 83 20/11/2023, 14:09
1 class Student {
2 private firstName: string;
3 private lastName: string;
4 yearOfBirth: number; //Public scope by default
5 schoolName: string;
6 city: string;
7 //Constructor
8 constructor(firstName: string, lastName: string, schoolName: string,
9 city: string, yearOfBirth: number) {
10
11 this.firstName = firstName;
12 this.lastName = lastName;
13 this.yearOfBirth = yearOfBirth;
14 this.city = city;
15 this.schoolName = schoolName;
16
17 }
18 //Function
19 age() {
20 return 2014 - this.yearOfBirth;
21 }
22 //Function
23 printStudentFullName(): void {
24 alert(this.lastName + ',' + this.firstName);
25 }
26 }
Exemplo em Javascript:
30 of 83 20/11/2023, 14:09
1 var Student = (function () {

2 //Constructor
3 function Student(firstName, lastName, schoolName, city, yearOfBirth){
7 this.city = city;
8 this.schoolName = schoolName;
9 }
10 //Function
11 Student.prototype.age = function () {
13 };
14
15 //Function
16 Student.prototype.printStudentFullName = function () {
17 alert(this.lastName + ',' + this.firstName);
18 };
19 return Student;
20 })();
No construtor acima definido em TypeScript, temos poucas variáveis de entrada que

são então mapeadas para variáveis locais dentro de uma classe, podemos modificar
esse construtor para implementar declaração e mapeamento de variáveis implícitas
definindo o escopo juntamente com o nome da variável na definição do construtor,
como mostrado abaixo:
1 constructor(private firstName: string,

2 private lastName: string, public schoolName: string,
3 public yearOfBirth: number) {}
No caso acima, as variáveis agora são definidas e declaradas apenas dentro do

argumento do construtor. O escopo mencionado junto com o argumento se torna o
escopo da variável para essa classe.
Para consumir a classe, o comportamento é semelhante ao C #, onde usamos a new

palavra-chave “ ” para inicializar o objeto de classe, passar quaisquer parâmetros se o
construtor exigir e, em seguida, chamar as funções ou acessar as publicvariáveis da
classe.
31 of 83 20/11/2023, 14:09
1 var student = new Student('Tom', 'Hanks', 'World Acting School',1950);

2 var age = student.age();
3 var fullName = student.printStudentFullName();
4 var schoolName = student.schoolName;
Interfaces
O TypeScript oferece suporte para Interfaces para usá-los como um contrato para
classes semelhantes a C #. Para declarar uma interface, usamos a palavra-chave “
interface” seguida do nome da interface. O importante a saber sobre interfaces é que,
quando compilado em JavaScript, o código da interface é ignorado e não há JavaScript
correspondente gerado.
1 interface IStudent {
2 yearOfBirth: number;
3 age : () => number;
4 }
As classes implementam interfaces usando a palavra-chave “ implement” seguida do

nome da interface. Como em C #, as classes podem implementar várias interfaces e o
TypeScript faz uma verificação de tempo de design para garantir que a classe esteja
implementando todos os métodos dessa interface.
1 class Student implements IStudent
Aqui, a Student classe agora terá que implementar o agemétodo “ ” e definir a

propriedade ” yearOfBirth”. Caso contrário, o TypeScript mostrará o erro de tempo de
projeto com o erro mencionando qual propriedade / método não foi implementada na
classe.
Herança
Ter classes e interface significa que o TypeScript também suporta herança, que é um
recurso muito poderoso e alinha a escrita do código do lado do cliente com a maneira
como escrevemos código C #. Usando herança, podemos estender classes,
implementar e estender interfaces e escrever código que seja reconhecido de perto
com OOPs. Em TypeScript, quando estendemos uma classe base na classe filha, usamos
a palavra-chave “ super” para chamar o construtor da classe base ou até mesmo os
publicmétodos da classe base.
Para estender uma classe no TypeScript, usamos “ extend” palavra-chave após o nome
32 of 83 20/11/2023, 14:09
da classe e, em seguida, seguimos pela classe pela qual precisamos estender. Também
podemos herdar interfaces em outras interfaces.
1 //Interface
2 interface IStudent {
4 age : () => number;
5 }
6 //Base Class
7 class College {
8 constructor(public name: string, public city: string) {
9 }
10 public Address(streetName: string) {
11 return ('College Name:' + this.name + ' City: ' + this.city
12 + ' Street Name: ' + streetName);
13 }
14 }
15 //Child Class implements IStudent and inherits from College
16 class Student extends College implements IStudent {
17 firstName: string;
18 lastName: string;
20 //private _college: College;
21 //Constructor
22 constructor(firstName: string, lastName: string, name: string,
23 city: string, yearOfBirth: number) {
24 super(name, city);
28 }
29 age () {
31 }
32 CollegeDetails() {
33 var y = super.Address('Maple Street');
34 alert(y);
35 }
36 printDetails(): void {
37 alert(this.firstName + ' ' + this.lastName
38 + ' College is: ' + this.name);
39 }
40 }
No TypeScript, também podemos definir qualquer parâmetro com um valor padrão e,

ao chamar essa função, não precisamos passar o valor desses parâmetros. Se não
33 of 83 20/11/2023, 14:09
passarmos o valor, então a função recebe o valor padrão atribuído, senão o valor
passado na chamada de função é obtido como mostrado no exemplo abaixo:
1 constructor(private firstName: string, private lastName: string,

2 public schoolName: string,
3 public yearOfBirth: number = 1990){}
No exemplo acima, atribuímos um valor opcional ao yearOfBirthcampo “ ” e se no caso

a função de chamada não passar nenhum valor para este campo, o construtor irá
inicializá-lo com 1990.
Similar é o caso dos parâmetros Opcionais, podemos definir um parâmetro

adicionando um “ ?” após o nome do parâmetro. Nesse caso, quando a função é
chamada, não precisamos passar o valor para esse parâmetro.
1 Subject(subjectList?: string[]) {
2 if (subjectList == null) {
3 alert('Oh, You have not subscribed to any course');
4 }
5 }
Aqui, se chamarmos o método de assunto sem passar nenhum valor de parâmetro, o

TypeScript não mostrará nenhum erro.
Operadores aritméticos
34 of 83 20/11/2023, 14:09
Os operadores aritméticos são aqueles que nós estudamos na escola, aquelas funções
básicas de somar, subtrair, multiplicar e dividir. Utilizando esses operadores nós
podemos criar operações matemática com valores numéricos.
Abaixo você tem uma lista com os operadores que nós podemos utilizar com
JavaScript:
• adição (+)
• subtração (-)
• multiplicação (*)
• divisão (/)
• módulo — resto da divisão — (%
• exponenciação (**)
• incremento (++)
• decremento (- -)
Adição (+)
Nós utilizamos esse operador para somar valores numéricos:
1 var num1 = 13;

2 var num2 = 7;
3 console.log(num1 + num2); // resultado 20
Subtração (-)
Nós utilizamos esse operador para subtrair valores numéricos, retornando a diferença
entre eles
1 var num1 = 20;

2 var num2 = 10;
3 console.log(num1 - num2); // resultado 10
Multiplicação (*)
Nós utilizamos esse operador multiplicar valores numéricos
1 var num1 = 3;
2 var num2 = 5;
3 console.log(num1 * num2); // resultado 15
Divisão (/)
35 of 83 20/11/2023, 14:09
Esse operador produz o quociente de seus operandos onde o operando da esquerda é

o dividendo e o da direita é o divisor. Para que você possa relembrar, segue uma
imagem abaixo retirada do Google.
1 var num1 = 20;

2 var num2 = 5;
3 console.log(num1 / num2); // resultado 4
Módulo (%)
Esse operador retorna o resto da divisão
1 var num1 = 3;
2 var num2 = 2;
3 console.log(num1 % num2); // resultado 1var num3 = 20;
4 var num4 = 5;
5 console.log(num3 % num4); // resultado 0var num5 = -1;
6 var num6 = 2
7 console.log(num5 % num6); // resultado -1
Exponenciação ()**
Esse operador retorna o valor do primeiro operando elevado ao segundo operado
1 var num1 = 3;
2 var num2 = 2;
3 console.log(num1 ** num2); // resultado 9
Incremento (++)
Esse operador incrementa um valor ao operando.
• Caso ele seja utilizado depois do operando Ex.: operando++, ele retorna o valor
antes de incrementar.
• Caso ele seja utilizado antes do operando Ex.: ++ operando, ele retorna o valor já
36 of 83 20/11/2023, 14:09
incrementado
1 var num1 = 3;
2 console.log(num1++); // resultado 3var num2 = 1;
3 console.log(++num2); // resultado 2
Decremento (- -)
Esse operador decrementa (subtrai um de) seu operando e retorna um valor.
• Caso ele seja utilizado depois do operando Ex.: operando - -ele retorna o valor
antes de decrementar
• Caso ele seja utilizado antes do operando Ex.: — operando, ele retorna o valor já
decrementado
Esses são os operadores básicos para que possamos criar as nossas expressões do dia
a dia.
Operadores lógicos
Operadores lógicos são utilizados para comparar dois ou mais valores, retornando um
valor Boolean. Abaixo você tem uma breve descrição deles:
• && (And): O operador (and) irá retornar true somente se todos os valores da
expressão forem verdadeiros
• || (OR): O operador (or) irá retornar true se um dos valores comparados forem
verdadeiros
• ! (NOT): O operador (not) irá retornar o inverso do esperado na expressão
Para ficar mais claro, veja abaixo alguns exemplos:
&& (and)
37 of 83 20/11/2023, 14:09
1 let num1: Number = 1;

3
4 let valida = num1 == num2;
5 let valida2 = num1 > num2;
6 let valida3 = num1 < num2;
7
8 console.log(valida); //false
9 console.log(valida2); //false
10 console.log(valida3); //true
Analisado os exemplos acima nós temos:
• num1 == num2: retorna false porque num1 e num2 são diferentes

• num1 > num2: retorna false porque num1 não é maior que num2
• num1 < num2: retorna true porque num2 é maior que num1 || (or)

3
4 let valida = num1 > 3 || num2 < 10;
5 let valida2 = num1 > 1 || num2 > 3;
6 let valida3 = num1 >= 1 || num2 >= 3;
7
8 console.log(valida); //true
9 console.log(valida2); //false
10 console.log(valida3); //true
Analisado o exemplo acima nós temos:
• num1 > 3 || num2 < 10: retorna true porque mesmo que num1 seja menor que 3,
num2 é menor que 10 (temos uma expressão verdadeira)
• num1 > 1 || num2 > 3: retorna false porque num1 não é maior que 1 e nem
num2 é maior que 3
• num1 >= 1 || num2 >= 3: retorna true porque estamos comparando se os
valores são maior ou igual aos valores iniciados nas nossas variáveis
! (not)
38 of 83 20/11/2023, 14:09

3
4 let valida = num1 != num2;
5
6 console.log(valida); //true
Resultado:
num1 != num2: retorna true porque num1 e num2 são diferentes.
Programação Funcional
Em ciência da computação, programação funcional é um paradigma de programação

que trata a computação como uma avaliação de funções matemáticas e que evita
estados ou dados mutáveis. Ela enfatiza a aplicação de funções, em contraste da
programação imperativa, que enfatiza mudanças no estado do programa. Enfatizando
as expressões invés de comandos, as expressões são utilizados para calculo de valores
com dados imutáveis.
Uma função, neste sentido, pode ter ou não ter parâmetros e um simples valor de
retorno. Os parâmetros são os valores de entrada da função, e o valor de retorno é o
resultado da função. A definição de uma função descreve como a função será avaliada
em termos de outras funções. Por exemplo, a função é definida em termos de funções
de exponenciação e adição. Do mesmo modo, a linguagem deve oferecer funções
básicas que não requerem definições adicionais.
A Programação funcional trata a funções de forma em que estas possam ser passadas
como parâmetro e valores para outras e funções e podendo ter o resultado
armazenado em uma constante.
Linguagens de programação funcionais, especialmente as puramente funcionais, tem

sido mais usadas academicamente que no desenvolvimento comercial de software.
Entretanto, algumas linguagens notáveis usadas na indústri e no comércio incluem
39 of 83 20/11/2023, 14:09
Erlang (aplicações concorrentes, R (estatística), Mathematica (matemática simbólica) J,

K (análise financeira) e XSLT. Importantes influências na programação funcional foram
o cálculo lambda, as linguagens de programação APL e Lisp, e mais recentemente ML,
Haskell, OCaml, F# e Elixir.
A programação funcional é um paradigma que visa estruturar a construção de

softwares seguindo o modelo de funções matemáticas, objetivando a imutabilidade
dos dados e o acoplamento de funções, que resultam em benefícios como consistência
tanto do código quanto dos dados – veremos os porquês no decorrer do artigo.
Semelhante a uma função matemática, um código funcional tem a sua saída

condicionada exclusivamente à sua entrada, de modo que uma entrada garanta
sempre a mesma saída após a execução do mesmo método, eliminando os chamados
side-effects, que são as mudanças de estado ocasionadas por outros fatores que não
dependam dos parâmetros do método.
Codigos serviços web

1 Lista de códigos de status HTTP
2 1xx Informativa
2.1 100 Continuar
2.2 101 Mudando protocolos
2.3 102 Processamento (WebDAV) (RFC 2518)
2.4 122 Pedido-URI muito longo
3 200 Sucesso
3.1 201 Criado

3.2 202 Aceito
3.3 203 não-autorizado (desde HTTP/1.1)
3.4 204 Nenhum conteúdo
3.5 205 Reset
3.6 206 Conteúdo parcial
3.7 207-Status Multi (WebDAV) (RFC 4918)
4 3xx Redirecionamento
4.1 300 Múltipla escolha
4.2 301 Movido
4.3 302 Encontrado
4.4 303 Consulte Outros
4.5 304 Não modificado
4.6 305 Use Proxy (desde HTTP/1.1)
40 of 83 20/11/2023, 14:09
4.7 306 Proxy Switch

4.8 307 Redirecionamento temporário (desde HTTP/1.1)
4.9 308 Redirecionamento permanente (RFC 7538[2])
5 4xx Erro de cliente
5.1 400 Requisição inválida
5.2 401 Não autorizado
5.3 402 Pagamento necessário
5.4 403 Proibido
5.5 404 Não encontrado
5.6 405 Método não permitido
5.7 406 Não Aceitável
5.8 407 Autenticação de proxy necessária
5.9 408 Tempo de requisição esgotou (Timeout)
5.10 409 Conflito geral
5.11 410 Gone
5.12 411 comprimento necessário
5.13 412 Pré-condição falhou
5.14 413 Entidade de solicitação muito grande
5.15 414 Pedido-URI Too Long
5.16 415 Tipo de mídia não suportado
5.17 416 Solicitada de Faixa Não Satisfatória
5.18 417 Falha na expectativa
5.19 418 Eu sou um bule de chá
5.20 422 Entidade improcessável (WebDAV) (RFC 4918)
5.21 423 Fechado (WebDAV) (RFC 4918)
5.22 424 Falha de Dependência (WebDAV) (RFC 4918)
5.23 425 coleção não ordenada (RFC 3648)
5.24 426 Upgrade Obrigatório (RFC 2817)
5.25 450 bloqueados pelo Controle de Pais do Windows
5.26 499 cliente fechou Pedido (utilizado em ERPs/VPSA)
6 5xx outros erros
6.1 500 Erro interno do servidor (Internal Server Error)
6.2 501 Não implementado (Not implemented)

6.3 502 Bad Gateway
6.4 503 Serviço indisponível (Service Unavailable)
6.5 504 Gateway Time-Out
6.6 505 HTTP Version not suppore
41 of 83 20/11/2023, 14:09
Json (http://www.json.org/)
JSON (JavaScript Object Notation) é um modelo para armazenamento e transmissão de

informações no formato texto. Apesar de muito simples, tem sido bastante utilizado
por aplicações Web devido a sua capacidade de estruturar informações de uma forma
bem mais compacta do que a conseguida pelo modelo XML, tornando mais rápido o
parsing dessas informações. Isto explica o fato de o JSON ter sido adotado por
empresas como Google e Yahoo, cujas aplicações precisam transmitir grandes volumes
de dados.
Sintaxe no Json
A ideia utilizada pelo JSON para representar informações é simples: para cada valor
representado, atribui-se um nome (ou rótulo) que descreve o seu significado. Esta
sintaxe é derivada da forma utilizada pelo JavaScript para representar informações.
Um valor pode ser uma string entre aspas duplas, ou um número, ou verdadeiro ou
falso ou nulo, ou um objeto ou uma matriz. Essas estruturas podem ser aninhadas.
42 of 83 20/11/2023, 14:09
Uma string é uma seqüência de zero ou mais caracteres Unicode, agrupados em aspas
duplas, usando escapes de barra invertida. Um caractere é representado como uma
única cadeia de caracteres. Uma string é muito parecida com uma string C ou Java.
Um número é muito parecido com um número C ou Java, exceto que os formatos octal
e hexadecimal não são usados.
43 of 83 20/11/2023, 14:09
• Representando o ano de 2018

“ano”: 2018
Um par nome/valor deve ser representado pelo nome entre aspas duplas, seguido de
dois pontos, seguido do valor. Os valores podem possuir apenas 3 tipos básicos:
numérico (inteiro ou real), booleano e string. As Listagens 2, 3, 4 e 5 apresentam
exemplos. Observe que os valores do tipo string devem ser representados entre aspas.
• Representando um número real

“altura”: 1.72
• Representando uma string

“site”: “www.cotiinformatica.com.br (http://www.cotiinformatica.com.br)”
• Representando um número negativo

“temperatura”: -2
• Representando um valor booleano

“casado”: true
A partir dos tipos básicos, é possível construir tipos complexos: array e objeto. Os
arrays são delimitados por colchetes, com seus elementos separados entre vírgulas. As
listagens 6 e 7 mostram exemplos.
• Representando Array de Strings

[“RJ”, “SP”, “MG”, “ES”]
• Representando Matriz de Inteiros
44 of 83 20/11/2023, 14:09
[
[1,5],
[-1,9],
[1000,0]
]
Os objetos são especificados entre chaves e podem ser compostos por múltiplos pares
nome/valor, por arrays e também por outros objetos. Desta forma, um objeto JSON
pode representar, virtualmente, qualquer tipo de informação! O exemplo da Listagem
8 mostra a representação dos dados de um filme.
Um objeto é um conjunto não ordenado de pares nome / valor. Um objeto começa

com {(chave esquerda) e termina com} (chave direita). Cada nome é seguido por: (dois
pontos) e os pares nome / valor são separados por (vírgula).
• Representando: Objeto
1 {
2 “titulo”: “JSON x XML”,
3 “resumo”: “o duelo de dois modelos de representação de informações”,
4 “ano”: 2012,
5 “genero”: [“aventura”, “ação”, “ficção”]
6 }
Uma matriz é uma coleção ordenada de valores. Um array começa com [(colchete
esquerdo) e termina com] (colchete direito). Os valores são separados por (vírgula).
• Representando: Array de Objetos
45 of 83 20/11/2023, 14:09
1 [
2 {
3 “titulo”: “JSON x XML”,
4 “resumo”: “o duelo de dois modelos de representação de informações”,
5 “ano”: 2012,
6 “genero”: [“aventura”, “ação”, “ficção”]
7 },
8 {
9 “titulo”: “JSON James”,
10 “resumo”: “a história de uma lenda do velho oeste”,
11 “ano”: 2012,
12 “genero”: [“western”]
13 }
14 ]
15
A palavra-chave “null” deve ser utilizada para a representação de valores nulos.
• Representando um valor nulo

“site”:null
Json x xml
Podemos entender o JSON como uma espécie de “concorrente” da XML na área de
troca de informações.
Semelhanças:
• Os dois modelos representam informações no formato texto.
• Ambos possuem natureza auto-descritiva (ou seja, basta “bater o olho” em um
arquivo JSON ou em um arquivo XML para entender o seu significado).
• Ambos são capazes de representar informação complexa, difícil de representar no
formato tabular. Alguns exemplos: objetos compostos (objetos dentro de objetos),
relações de hierarquia, atributos multivalorados, arrays, dados ausentes, etc.
• Ambos podem ser utilizados para transportar informações em aplicações AJAX.
• Ambos podem ser considerados padrões para representação de dados. XML é um
padrão W3C, enquanto JSON foi formalizado na RFC 4627.
• Ambos são independentes de linguagem. Dados representados em XML e JSON
podem ser acessados por qualquer linguagem de programação, através de API’s
específicas.
Diferenças:
• JSON não é uma linguagem de marcação. Não possui tag de abertura e muito menos
46 of 83 20/11/2023, 14:09
de fechamento!
• JSON representa as informações de forma mais compacta.
• JSON não permite a execução de instruções de processamento, algo possível em
XML.
• JSON é tipicamente destinado para a troca de informações, enquanto XML possui
mais aplicações. Por exemplo: nos dias atuais existem bancos de dados inteiros
armazenados em XML e estruturados em SGBD’s XML nativo.
Json no Java
Ao acessar a home page oficial do JSON (www.json.org (http://www.json.org)) você verá que
existem parsers disponíveis para quase todas as linguagens: Delphi, PHP, Java, Matlab,
C++, C#, etc.
No XML a coisa é bem mais fácil, pois existem duas API’s básicas para o parsing de
informações: SAX e DOM. Ambas já são instaladas junto com o Java e, daí, basta
utilizá-las. Adicionalmente, o princípio de funcionamento das API’s SAX e DOM é
bastante conhecido pelos desenvolvedores: DOM importa o documento todo para a
memória, criando uma árvore, enquanto o SAX percorre o arquivo sequencialmente
disparando eventos, sem realizar a importação de informações para a memória.
O JSON parece ainda não ter atingido esse grau maturidade. Várias pessoas/empresas
implementaram os seus próprios parsers, com diferentes princípios de funcionamento.
Como ainda não há um padrão, fica difícil decidir qual utilizar!
Para converter um objeto Java para JSON, utiliza-se o método toJson. E para fazer ao
contrário, ou seja, atribuir o conteúdo de um objeto Java a partir de uma string Json,
utiliza-se fromJson.
Algumas API’s
• JsonPlaceholder (http://jsonplaceholder.typicode.com/)
• Mocky.io (https://www.mocky.io/)
Json-server
47 of 83 20/11/2023, 14:09
O que é o JSON Server?

Ter uma API pronta para começar o desenvolvimento do front-end da sua aplicação as
vezes pode ser um problema. Com isso te apresento o JSON Server. JSON Server é
uma biblioteca capaz de criar uma API Fake em 30 segundos e sem precisar escrever
nenhuma linha de código.
O Que É REST?
REST vem de REpresentational State Transfer. É um estilo de arquitetura para projetar
aplicações conectadas, usando os simples verbos HTTP para permitir a comunicação
entre as máquinas. Assim, ao invés de usar uma URL para manipular informação do
usuário, REST enviar uma requisição HTTP, como GET, POST, DELETE, etc., para uma
URL manipular os dados.
Por Que Precisamos de uma API REST Falsa?

APIs REST formam o backend de aplicações web e móveis. Ao criar aplicações, algumas
vezes não temos APIs REST prontas para uso no durante o desenvolvimento. Para ver
um app web ou móvel em ação, precisamos de um servidor que retorne dados JSON
falsos. É aí que uma API REST falsa entra em ação. json-server provê a funcionalidade
para configurar um servidor de API REST falso com mínimo de esforço.
Para instalar o json-server:
48 of 83 20/11/2023, 14:09
https://www.npmjs.com/package/json-server (https://www.npmjs.com/package/json-server)
Digitar no terminal ou gitbash:
npm install -g json-server
Depois de instalado, inicializar o servidor com o arquivo desejado:
Importante digitar o comando no diretorio onde se encontra o arquivo json.
Exemplo:
json-server nome_do_arquivo.json
Injectable()
49 of 83 20/11/2023, 14:09
A injeção de dependência (DI) é um importante padrão de projeto de aplicativo. A

Angular possui sua própria estrutura de DI, que é normalmente usada no projeto de
aplicações angulares para aumentar sua eficiência e modularidade.
Dependências são serviços ou objetos que uma classe precisa para executar sua
função. DI é um padrão de codificação em que uma classe pede dependências de
fontes externas em vez de criá-las.
Em Angular, a estrutura de DI fornece dependências declaradas para uma classe

quando essa classe é instanciada. Este guia explica como o DI funciona em Angular e
como você o utiliza para tornar seus aplicativos flexíveis, eficientes e robustos, além de
testáveis e de fácil manutenção.
A estrutura DI permite que você forneça dados para um componente de uma classe de
serviço injetável , definida em seu próprio arquivo. Para demonstrar, criaremos uma
classe de serviço injetável que forneça uma lista de heróis e registre essa classe como
um provedor desse serviço.
Ter várias classes no mesmo arquivo pode ser confuso. Geralmente, recomendamos
que você defina componentes e serviços em arquivos separados.
Se você combinar um componente e um serviço no mesmo arquivo, é importante
definir primeiro o serviço e depois o componente. Se você definir o componente antes
do serviço, obterá um erro de referência nulo em tempo de execução.
É possível definir o componente primeiro com a ajuda do forwardRef()método,

conforme explicado neste post .
Você também pode usar referências avançadas para interromper dependências
circulares. Veja um exemplo no DI Cookbook .
50 of 83 20/11/2023, 14:09
O decorador o marca como um serviço que pode ser injetado, mas o Angular não
consegue injetá-lo em lugar algum até que você configure um injetor de dependência
Angular com um provedor desse serviço.@Injectable()
O injetor é responsável por criar instâncias de serviço e injetá-las em classes como
HeroListComponent. Você raramente cria um injetor angular sozinho. A Angular cria
injetores para você enquanto executa o aplicativo, começando com o injetor de raiz
que ele cria durante o processo de bootstrap .
Um provedor informa ao injetor como criar o serviço . Você deve configurar um injetor
com um provedor antes que o injetor possa criar um serviço (ou fornecer qualquer
outro tipo de dependência).
Um provedor pode ser a própria classe de serviço, para que o injetor possa usar
newpara criar uma instância. Você também pode definir mais de uma classe para
fornecer o mesmo serviço de maneiras diferentes e configurar diferentes injetores com
provedores diferentes.
Hierarquia do injetor e instâncias de serviço

Os serviços são singletons no escopo de um injetor . Ou seja, há no máximo uma
instância de um serviço em um determinado injetor.
Existe apenas um injetor de raiz para um aplicativo. Fornecer UserServiceno nível

rootou AppModulesignifica que é registrado com o injetor de raiz. Há apenas uma
UserServiceinstância em todo o aplicativo e cada classe que injeta UserServiceobtém
essa instância de serviço, a menos que você configure outro provedor com um child
injector.
O DI angular possui um sistema de injeção hierárquica , o que significa que os

injetores aninhados podem criar suas próprias instâncias de serviço. Angular cria
regularmente injetores aninhados. Sempre que Angular cria uma nova instância de um
componente providersespecificado , também cria um novo injetor secundário para
essa instância. Da mesma forma, quando um novo NgModule é carregado com
preguiça em tempo de execução, o Angular pode criar um injetor para ele com seus
próprios provedores.@Component()
Módulos filho e injetores de componentes são independentes uns dos outros e criam
suas próprias instâncias separadas dos serviços fornecidos. Quando o Angular destrói
um NgModule ou uma instância do componente, ele também destrói o injetor e as
instâncias de serviço desse injetor.
Graças à herança do injetor , você ainda pode injetar serviços em todo o aplicativo
51 of 83 20/11/2023, 14:09
nesses componentes. O injetor de um componente é um filho do injetor de seu

componente pai e herda de todos os injetores ancestrais até o injetor de raiz do
aplicativo . Angular pode injetar um serviço fornecido por qualquer injetor nessa
linhagem.
Por exemplo, o Angular pode injetar HeroListComponenttanto
o HeroServicefornecido HeroComponentquanto o UserServicefornecido AppModule.
HttpClient
A maioria dos aplicativos front-end se comunica com os serviços de backend pelo

protocolo HTTP. Navegadores modernos suportam duas APIs diferentes para fazer
solicitações HTTP: a XMLHttpRequestinterface e a fetch()API.
O HttpClient oferece uma API HTTP de cliente simplificada para aplicativos Angulares
que se apóia na interface exposta pelos navegadores. Os benefícios adicionais de
incluir recursos de testabilidade, objetos de solicitação e resposta digitados,
interceptação de solicitação e resposta, apis e tratamento simplificado de erros.
Instalação
Antes de poder usar o HttpClient, você precisa importar o Angular HttpClientModule.
A maioria dos aplicativos faz isso na raiz AppModule.
Por que escrever um link de serviço?

Este exemplo é tão simples que é tentador escrever o Http.get()interior do próprio
52 of 83 20/11/2023, 14:09
componente e pular o serviço.
No entanto, o acesso a dados raramente fica tão simples. Você normalmente pós-
processa os dados, adiciona manipulação de erros e talvez alguma lógica de repetição
para lidar com a conectividade intermitente.
O componente rapidamente se torna confuso com minúcias de acesso a dados. O

componente se torna mais difícil de entender, mais difícil de testar, e a lógica de
acesso a dados não pode ser reutilizada ou padronizada.
É por isso que é uma prática recomendada separar a apresentação de dados do acesso
a dados encapsulando o acesso a dados em um serviço separado e delegando a esse
serviço no componente, mesmo em casos simples como este.
Tratamento de erros
O que acontece se a solicitação falhar no servidor ou se uma conexão de rede ruim
impedir que ela atinja o servidor? HttpClientretornará um objeto de erro em vez de
uma resposta bem-sucedida.
Você poderia manipular no componente adicionando um segundo retorno de chamada

ao .subscribe():
Obtendo o link dos detalhes do erro

Detectar que um erro ocorreu é uma coisa. Interpretar esse erro e compor uma
resposta amigável é um pouco mais envolvente.
Dois tipos de erros podem ocorrer. O back-end do servidor pode rejeitar a solicitação,
retornando uma resposta HTTP com um código de status, como 404 ou 500. Essas são
respostas de erro.
Ou algo pode dar errado no lado do cliente, como um erro de rede que impede que a
solicitação seja concluída com êxito ou que uma exceção seja lançada em um operador
RxJS. Esses erros produzem ErrorEventobjetos JavaScript.
A HttpClientcaptura de ambos os tipos de erros no seu HttpErrorResponsee você pode

inspecionar essa resposta para descobrir o que realmente aconteceu.
Inspeção, interpretação e resolução de erros é algo que você deseja fazer no serviço ,
não no componente.
Observables e operadores link
53 of 83 20/11/2023, 14:09
As seções anteriores deste guia se referiam a RxJS Observablese operadores como

catchErrore retry. Você encontrará mais artefatos RxJS enquanto continua abaixo.
RxJS é uma biblioteca para composição de código assíncrono e baseado em retorno de
chamada em um estilo funcional e reativo . Muitas APIs angulares, incluindo
HttpClient, produzem e consomem RxJS Observables.
O próprio RxJS está fora do escopo deste guia. Você encontrará muitos recursos de
aprendizado na web. Enquanto você pode conviver com um mínimo de conhecimento
RxJS, você vai querer aumentar suas habilidades RxJS ao longo do tempo, a fim de usar
de forma HttpClienteficaz.
Se você estiver acompanhando esses snippets de código, observe que deve importar
os símbolos observáveis e de operador RxJS que aparecem nesses snippets. Essas
ConfigServiceimportações são típicas.
Enviando dados para o link do servidor

Além de buscar dados do servidor, HttpClientsuporta solicitações mutantes, isto é,
enviando dados para o servidor com outros métodos HTTP, como PUT, POST e DELETE.
O aplicativo de amostra deste guia inclui uma versão simplificada do exemplo “Tour of
Heroes”, que busca heróis e permite que os usuários os adicionem, excluam e
atualizem.
Adicionando cabeçalhos
Muitos servidores exigem cabeçalhos extras para operações de salvaguarda. Por
exemplo, eles podem exigir um cabeçalho “Content-Type” para declarar explicitamente
o tipo MIME do corpo da solicitação. Ou talvez o servidor precise de um token de
autorização.
Input()
54 of 83 20/11/2023, 14:09
Decorador que marca um campo de classe como uma propriedade de entrada e

fornece metadados de configuração. A propriedade input está vinculada a uma
propriedade DOM no modelo. Durante a detecção de alterações, o Angular atualiza
automaticamente a propriedade de dados com o valor da propriedade DOM.
Notas de uso
Você pode fornecer um nome opcional para usar em modelos quando o componente é
instanciado, que é mapeado para o nome da propriedade associada. Por padrão, o
nome original da propriedade associada é usado para ligação de entrada.
O exemplo a seguir cria um componente com duas propriedades de entrada, uma das
quais recebe um nome de ligação especial.
55 of 83 20/11/2023, 14:09
1 @Component({
2 selector: 'bank-account',
3 template: `
4 Bank Name: {{bankName}}
5 Account Id: {{id}}
6 `
7 })
8 class BankAccount {
9 // This property is bound using its original name.
10 @Input() bankName: string;
11 // this property value is bound to a different property name
12 // when this component is instantiated in a template.
13 @Input('account-id') id: string;
14
15 // this property is not bound, and is not automatically updated by
16 // Angular
17 normalizedBankName: string;
18 }
19
20 @Component({
21 selector: 'app',
22 template: `
23 <bank-account bankName="RBC" account-id="4747"></bank-account>
24 `
25 })
26 class App {}
Firebase (https://firebase.google.com/?hl=pt-br)
56 of 83 20/11/2023, 14:09
O que é o Google Firebase?

O Firebase é uma plataforma do Google que contém várias ferramentas e uma
excelente infraestrutura para ajudar desenvolvedores web e mobile a criar aplicações
de alta qualidade e performance.
Esta plataforma contém quatro seguimentos de serviços: Analytics, Develop, Grow e
Earn. Veja um pouco sobre cada um deles.
O serviço em nuvem para desenvolvedores móveis é um back-end completo para

aplicações mobile (Android e iOS) e aplicações web. Com visual limpo e de uso
simples, o Firebase é uma plataforma dedicada e SDK para a construção de aplicativos.
Atualmente, o serviço suporta desenvolvimento nas linguagens de programação C++,
Java, Javascript, Node.js, Objective-C e Swift.
Google está se transformando o Firebase em uma plataforma de aplicativos unificada

para para seus mais de 470 mil desenvolvedores. A ferramenta apresenta agora um
serviço de análise profundamente integrado, que foi construído pela mesma equipe
que é responsável pelo Google Analytics.
Esta plataforma contém quatro seguimentos de serviços:

Analytics,
Develop,
Grow e
Earn.
57 of 83 20/11/2023, 14:09
Veja um pouco sobre cada um deles.
Analytics
O Firebase Analytics é uma solução gratuita e ilimitada, considerado o coração do

Firebase, é utilizado para gerar as métricas da aplicação, mensurar o comportamento
do usuário. Atualmente é disponibilizado para aplicações iOS e Android.
Com a missão de poupar tempo e fornecer um aplicativo de alta qualidade, esta

plataforma contém vários recursos para os desenvolvedores, são eles:
• Cloud Messaging: O Firebase Cloud Messaging – FCM permite a

entrega/recebimento de mensagens e notificações entre as plataformas iOS,
Android e Web.
• Authentication: Este recurso de autenticação é fundamental para as aplicações
onde é necessário saber a identidade do usuário e manter o controle do acesso ao
app. Também, com o Firebase Authentication, é possível utilizar provedores de
identidades federais para autenticação como as contas do Google, Facebook,
Twitter e GitHub.
• Realtime Database: O Firebase também disponibiliza um banco de dados NoSQL
(Firebase Realtime Databse) hospedado em nuvem, onde os dados são
armazenados como JSON e sincronizados em tempo real com todos os clientes
conectados.
• Storage: Útil para armazenar arquivos como imagens, vídeos e áudio, além de
58 of 83 20/11/2023, 14:09
outros conteúdos gerados por usuários.

• Hosting: Este serviço é oferecido para hospedar HTML, CSS e JavaScript para seu
site, além de outros ativos fornecidos pelo desenvolvedor, como gráficos, fontes e
ícones. O Firebase Hosting possui certificado SSL fornecido automaticamente, é
ideal para aplicativos web e web para dispositivos móveis.
• Remote Config: Armazena pares de chave-valor especificados pelo desenvolvedor
que permite alterar o comportamento e a aparência do aplicativo sem exigir que
os usuários baixem uma atualização do app.
• Test Lab: O Firebase Test Lab fornece toda infraestrutura em nuvem que você
precisa para testar seus aplicativos Android e mesmo que você não tenha escrito o
código de teste para o app, o Test Lab pode operar no seu aplicativo
automaticamente em busca de falhas. Todos os resultados do teste são
disponibilizados no Firebase console.
• Crash Reporting: Este recurso é capaz de criar relatórios de erro detalhados para
os aplicativos Android e iOS. Os erros são agrupados em conjuntos e são
organizados de acordo com a gravidade do impacto para os usuários. Até o
momento está na versão beta e já demonstra ser um excelente aliado para os
desenvolvedores.
Nem todos os recursos para desenvolvedores são disponibilizados em todas as

plataformas (Android, iOS, web), para resumir, é possível ver no quadro abaixo a
relação de Recurso x Plataforma:!
Grow
Além de vários recursos para auxiliar no desenvolvimento das aplicações, o Firebase

também disponibiliza recursos voltados ao envolvimento e conquista dos usuários
para a aplicação, estes recursos são:
• Notifications: Através deste recurso é possível gerenciar campanhas de notificações
para seu app e quando integrado ao Firebase Analytics é possível entregar mensagens
a um segmento específico de usuários.
• App Indexing: Com o App Indexing você consegue aumentar a visibilidade do seu
app em pesquisas do Google e do Now on Tap em dispositivos Android. E um recurso
interessante é que os usuários ao buscarem um conteúdo relacionado eles poderão
iniciar o aplicativo diretamente dos resultados de busca, se app estiver instalado no
dispositivo, e caso não esteja, é exibido uma opção para instalação do aplicativo.
• Invites: O Invites, é uma solução desenvolvida para indicações e compartilhamento
de aplicativos. Permite que os usuários do app compartilhem o aplicativo ou o
conteúdo por e-mail ou SMS.
• AdWords: Este recurso vinculado ao Firebase Analytics permite que você mostre
59 of 83 20/11/2023, 14:09
anúncios direcionados a segmentos de usuários, assim é possível otimizar o

desempenho de sua campanha de forma eficaz.
Earn
Para lucrar com seus aplicativos através da exibição de anúncios, o Firebase

disponibiliza o AdMob. Com ele é possível monetizar seus apps mobile com
publicidade segmentada dentro do aplicativo e assim gerar receita sem prejudicar a
experiência do usuário.
O Firebase fornece tudo que você precisa para desenvolver aplicações web e mobile,
desde o desenvolvimento e testes até a publicação e divulgação do aplicativo.
E para utilizar esse serviço, tudo o que os desenvolvedores precisam fazer é adicionar
algumas linhas de código nos aplicativos. Com isso, informações básicas do usuário
serão transmitidas para o Firebase. Assim como com o Google Analytics, os
desenvolvedores podem ter um instrumento específico em partes de seus aplicativos,
com eventos apurados para controlar, por exemplo, sempre que um botão for
pressionado ou uma compra for feita.
Usando esses dados, por meio do Google Firebase você pode construir segmentos de
público e permitir que desenvolvedores analisem o comportamento de seus usuários
em mais detalhes, vendo como suas campanhas publicitárias estão funcionando, por
exemplo.
Além disso, o sistema de notificação do Firebase, o Cloud Messaging, oferece a todos
60 of 83 20/11/2023, 14:09
os usuários notificações gratuitas e ilimitadas, com suporte para iOS, Android e na

web. A ferramenta também permite que os devs saibam quando uma aplicação sua
teve comportamento inesperado no smartphone do usuário, tornando mais fácil
solucionar falhas em novas atualizações do app.
Variaveis do Firebase:
• auth: É o usuário autenticado
• data: São os dados existentes no caminho, por exemplo, pessoa/idade
• newData: São os dados postados no caminho. Esse variável só está disponível em
.write e .validate pois somente nesses momentos que novos dados serão postados
• now: É uma marcação de data e hora de tempo real do servidor
• root: Levará de volta a raiz do banco de dados
• $: Curinga, como usamos em $uid para pegar o ID do usuário do registro
Hosting - Hospedagem Firebase
O Firebase Hosting fornece hospedagem rápida e segura para seu aplicativo Web,
conteúdo estático e dinâmico e microsserviços. O Firebase Hosting é um host de nível
de produção para desenvolvedores. Com um único comando, você pode implantar
rapidamente aplicativos da Web e veicular conteúdo estático e dinâmico em uma CDN
global (rede de entrega de conteúdo). Você também pode emparelhar o Firebase
Hosting com o Cloud Functions ou o Cloud Run para criar e hospedar microsserviços
no Firebase.
Principais recursos
61 of 83 20/11/2023, 14:09
A web moderna é segura. O SSL de configuração zero é

Servir conteúdo por
incorporado ao Firebase Hosting, para que o conteúdo
uma conexão segura
seja sempre entregue com segurança.
Hospede conteúdo O Firebase Hosting suporta todos os tipos de conteúdo

estático e dinâmico, para hospedagem, dos arquivos CSS e HTML aos
além de microsserviços microsserviços ou APIs do Express.js.
Cada arquivo que você carrega é armazenado em

Entregue conteúdo cache nos SSDs nas bordas da CDN em todo o mundo.
rapidamente Não importa onde seus usuários estejam, o conteúdo
será entregue rapidamente.
Usando a Firebase CLI, você pode colocar seu

aplicativo em funcionamento em segundos.As
Implantar novas versões
(http://segundos.As) ferramentas de linha de comando
com um comando
facilitam a adição de destinos de implantação ao seu
processo de criação.
As implantações rápidas são ótimas, mas ser capaz de

Reversão com um desfazer erros é ainda melhor. O Firebase Hosting
clique fornece gerenciamento completo de versão e versão
com reversões de um clique.
Como funciona?
O Firebase Hosting foi desenvolvido para o desenvolvedor web moderno. Sites e
aplicativos estão mais poderosos do que nunca com o surgimento de estruturas
JavaScript front-end, como ferramentas de gerador de angular e estática, como Jekyll.
Esteja você implantando uma página de entrada de aplicativo simples ou um PWA
(Progressive Web App) complexo, o Hosting fornece a infraestrutura, os recursos e as
ferramentas personalizadas para implantar e gerenciar sites e aplicativos.
Usando a Firebase CLI , você implanta arquivos de diretórios locais no seu computador
no servidor Hosting. Além de exibir conteúdo estático, você pode usar o Cloud
Functions for Firebase ou Cloud Run para exibir conteúdo dinâmico e hospedar
microsserviços em seus sites. Todo o conteúdo é veiculado por uma conexão SSL do
servidor de borda mais próximo em nossa CDN global.
O Firebase Hosting possui opções de configuração de hospedagem leves para você
criar PWAs sofisticados. Você pode reescrever facilmente URLs para roteamento do
lado do cliente ou configurar cabeçalhos personalizados.
62 of 83 20/11/2023, 14:09
Para veicular seu conteúdo, o Firebase oferece várias opções de domínio e

subdomínio:
Por padrão, todo projeto do Firebase possui subdomínios gratuitos nos domínios
web.appe firebaseapp.com (http://firebaseapp.com). Esses dois sites atendem ao mesmo
conteúdo e configuração implantados.
Você pode criar vários sites se tiver sites e aplicativos relacionados que exibem
conteúdo diferente, mas ainda compartilhem os mesmos recursos do projeto Firebase
(por exemplo, se você possui um blog, painel de administração e aplicativo público).
Você pode conectar seu próprio nome de domínio a um site hospedado no
Firebase.
O Firebase provisiona automaticamente certificados SSL para todos os seus domínios,

para que todo o seu conteúdo seja veiculado com segurança.
Para criar um projeto utilizando o Firebase
Site do Firebase que iremos trabalhar.

https://console.firebase.google.com (https://console.firebase.google.com)
Clicar em adicionar projeto.
63 of 83 20/11/2023, 14:09
Digitar o nome do projeto. Clicar em Continuar.
Desmarcar a opção do Google Analitics e clicar em Criar seu Projeto
64 of 83 20/11/2023, 14:09
Aguardar criar o projeto
Projeto Concluido. Clicar em continuar
65 of 83 20/11/2023, 14:09
Fomos direcionados para o Painel de Controle do projeto.
Clicar no icone de web </> para podermos pegar o script de configuração do

projeto com o firebase.
66 of 83 20/11/2023, 14:09
Registrar o app. Digitar o nome do projeto.

Clicar em Registrar app.
Clicar em proxima
67 of 83 20/11/2023, 14:09
Clicar na engrenagem, do lado do icone de Visão Geral do Projeto
Clicar em Configuração do Projeto
Descer até Apps da Web e clicar em CDN
68 of 83 20/11/2023, 14:09
Copiar o script da configuração do Firebase.
69 of 83 20/11/2023, 14:09
Para criar um banco e uma collection:

No menu, clicar em Cloud Firestore.
70 of 83 20/11/2023, 14:09
.
Entraremos na área de criação das collections.
.
Clicar em iniciar coleção para criarmos a collection produtos (lembrando que é no
plural). Digitar o nome e clicar em proxima
71 of 83 20/11/2023, 14:09
.
Clicar em codigo automatico para gerar o id da collection e digitar o nome dos
campos com seus respectivos valor para podermos inserir um novo documento.
72 of 83 20/11/2023, 14:09
.
Para adicionar mais campos, clicar e, adicionar campo . Adicionar todos os campos e
clicar em salvar
73 of 83 20/11/2023, 14:09
.
Aguardar criar a collection e o documento. É possivel adicionar campos, editar ou
excluir.
74 of 83 20/11/2023, 14:09
Rotas - Router (https://angular.io/guide/router)
O Angular Router é um poderoso roteador JavaScript construído e mantido pela

equipe do Angular Core que pode ser instalada a partir do @angular/routerpacote. Ele
fornece uma biblioteca de roteamento completa com a possibilidade de ter várias
saídas de roteador, diferentes estratégias de correspondência de caminho, fácil acesso
aos parâmetros de roteamento e guardas de rota para proteger os componentes
contra acesso não autorizado.
O roteador Angular é uma parte essencial da plataforma Angular. Ele permite que os
desenvolvedores criem aplicativos de página única com várias visualizações e
permitam a navegação entre essas visualizações.
75 of 83 20/11/2023, 14:09
O Angular Router permite a navegação de uma view para a próxima conforme os

usuários executam as tarefas da aplicação.
Visão geral
O navegador é um modelo familiar de navegação de aplicativos:
• Digite um URL na barra de endereços e o navegador navega para uma página

correspondente.
• Clique nos links na página e o navegador navega para uma nova página.
• Clique nos botões Voltar e Avançar do navegador e o navegador navega para trás
e para frente no histórico de páginas que você viu.
O Angular Router(“o roteador”) empresta esse modelo. Ele pode interpretar uma URL
do navegador como uma instrução para navegar para uma visualização gerada pelo
cliente. Ele pode passar parâmetros opcionais ao componente de visualização de
suporte que o ajudam a decidir qual conteúdo específico apresentar. Você pode
vincular o roteador a links em uma página e ele navegará para a visualização do
aplicativo apropriada quando o usuário clicar em um link. Você pode navegar
imperativamente quando o usuário clica em um botão, seleciona em uma caixa
suspensa ou em resposta a algum outro estímulo de qualquer origem. E o roteador
registra a atividade no diário de histórico do navegador para que os botões de voltar e
avançar também funcionem
Comando criação de rota manualmente:
1 ng generate module app-routing --flat --module=app
Onde:
Comando Descrição
Flag que indica se deve ser criado um diretório no qual os

- -flat
arquivos do componente serão colocados. Valor padrão: true.
- -module Define para qual módulo da aplicação este componente deve ser
<string> criado.
Configuração:
Um aplicativo Angular roteado tem uma instância singleton do Routerserviço. Quando
76 of 83 20/11/2023, 14:09
o URL do navegador muda, esse roteador procura um correspondente Route do qual

possa determinar o componente a ser exibido.
Um roteador não tem rotas até você configurá-lo. O exemplo a seguir cria cinco
definições de rotas, configura o roteador através do RouterModule.forRoot()método, e
adiciona o resultado ao AppModule’s importsmatriz.
1 const appRoutes: Routes = [

2 { path: 'crisis-center', component: CrisisListComponent },
3 { path: 'hero/:id', component: HeroDetailComponent },
4 { path: 'heroes', component: HeroListComponent,
5 data: { title: 'Heroes List' }},
6 { path: '', redirectTo: '/heroes', pathMatch: 'full'},
7 { path: '**', component: PageNotFoundComponent }
8 ];
A appRoutes matriz de rotas descreve como navegar. Passe para o

RouterModule.forRoot() método no módulo importspara configurar o roteador.
Cada Route um mapeia um URL pathpara um componente. Não há barras principais

no caminho . O roteador analisa e constrói o URL final para você, permitindo que você
use os caminhos relativo e absoluto ao navegar entre os modos de exibição do
aplicativo.
A :id segunda rota é um token para um parâmetro de rota. Em um URL como

/hero/42"42" é o valor do idparâmetro. O correspondente HeroDetailComponent usará
esse valor para encontrar e apresentar o herói cujo id42 é. Você aprenderá mais sobre
os parâmetros de rota mais adiante neste guia.
A data propriedade na terceira rota é um local para armazenar dados arbitrários

associados a essa rota específica. A propriedade de dados é acessível dentro de cada
rota ativada. Use-o para armazenar itens como títulos de páginas, texto de trilhas e
outros dados estáticossomente leitura . Você usará o protetor de resolução para
recuperar dados dinâmicos posteriormente no guia.
O caminho vazio na quarta rota representa o caminho padrão para o aplicativo, o

local a ser percorrido quando o caminho na URL está vazio, como normalmente é no
início. Essa rota padrão redireciona para a rota da /heroesURL e, portanto, exibirá a
HeroesListComponent.
O caminho na última rota é um curinga . O roteador selecionará essa rota se a URL

solicitada não corresponder a nenhum caminho para as rotas definidas anteriormente
77 of 83 20/11/2023, 14:09
na configuração. Isso é útil para exibir uma página “404 - Não encontrado” ou
redirecionar para outra rota.
A ordem das rotas na configuração é importante e isso é por design. O roteador usa
uma estratégia de ganhos de primeira partida ao combinar rotas, portanto rotas mais
específicas devem ser colocadas acima de rotas menos específicas. Na configuração
acima, as rotas com um caminho estático são listadas primeiro, seguidas por uma rota
de caminho vazia, que corresponde à rota padrão. A rota curinga vem por último
porque corresponde a cada URL e deve ser selecionada apenas se nenhuma outra rota
for correspondida primeiro.
Se você precisar ver quais eventos estão ocorrendo durante o ciclo de vida da
navegação, há a opção enableTracing como parte da configuração padrão do roteador.
Isso produz cada evento de roteador que ocorreu durante cada ciclo de vida de
navegação no console do navegador. Isso só deve ser usado para fins de depuração.
Você define a enableTracing: trueopção no objeto passado como o segundo
argumento para o RouterModule.forRoot()método.
Router-outlet
O Router-Outlet é uma diretiva que está disponível na biblioteca do roteador onde o
roteador insere o componente que é correspondido com base na URL do navegador
atual. Você pode adicionar várias tomadas em seu aplicativo Angular, o que permite
implementar cenários avançados de roteamento.
1 <router-outlet></router-outlet>
Qualquer componente que seja correspondido pelo roteador o renderizará como um

irmão da saída do roteador.
Rotas e Caminhos
Rotas são definições (objetos) compostas de pelo menos um caminho e um
componente (ou um redirecionamento para o caminho) atributos. O caminho refere-se
à parte da URL que determina uma visualização exclusiva que deve ser exibida, e o
componente refere-se ao componente Angular que precisa ser associado a um
caminho. Com base em uma definição de rota que fornecemos (por meio de um
RouterModule.forRoot (routes)método estático ), o roteador é capaz de navegar pelo
usuário para uma visualização específica.
Cada Route mapeia um URL pathpara um componente. O caminho pode estar vazio, o
78 of 83 20/11/2023, 14:09
que denota o caminho padrão de um aplicativo e geralmente é o início do aplicativo.
O caminho pode ter uma sequência curinga ( ** ). O roteador selecionará essa rota se a
URL solicitada não corresponder a nenhum caminho para as rotas definidas. Isso pode
ser usado para exibir uma exibição “Não encontrado” ou redirecionar para uma
exibição específica se nenhuma correspondência for encontrada.
Este é um exemplo de uma rota:
1 { path: 'contacts', component: ContactListComponent}
Se essa definição de rota for fornecida para a configuração do roteador, o roteador

renderizará ContactListComponent quando a URL do navegador para o aplicativo da
web se tornar /contacts.
Estratégias de correspondência de Rota:

O roteador angular fornece diferentes estratégias de correspondência de rotas. A
estratégia padrão é simplesmente verificar se o URL do navegador atual é prefixado
com o caminho.
Por exemplo, nossa rota anterior
1 { path: 'contacts', component: ContactListComponent}
Poderia também ser escrito como:
1 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}
O patchMathatributo especifica a estratégia de correspondência. Neste caso, é o

prefixo que é o padrão. A segunda estratégia de correspondência está cheia . Quando
for especificado para uma rota, o roteador verificará se o caminho é exatamente igual
ao caminho do URL do navegador atual:
1 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}
Router Params
Criar rotas com parâmetros é um recurso comum em aplicativos da web. Roteador
Angular permite acessar parâmetros de diferentes maneiras:
79 of 83 20/11/2023, 14:09
Usando o serviço ActivatedRoute ,

Usando o ParamMap observável disponível começando com v4.
Você pode criar um parâmetro de rota usando a sintaxe de dois pontos . Este é um
exemplo de rota com um parâmetro id :
1 { path: 'contacts/:id', component: ContactDetailComponent}
Router Link
As RouterLink diretivas nas tags de âncora dão ao roteador controle sobre esses
elementos. Os caminhos de navegação são fixos, então você pode atribuir uma string à
routerLink(uma ligação “one-time”).
Se o caminho de navegação fosse mais dinâmico, você poderia ter vinculado a uma
expressão de modelo que retornou uma matriz de parâmetros de link de rota (a matriz
de parâmetros de link). O roteador resolve esse array em um URL completo.
Guarda de Rotas
Um roteador de rotas é um recurso do Roteador Angular que permite aos
desenvolvedores executar alguma lógica quando uma rota é solicitada e, com base
nessa lógica, permite ou nega o acesso do usuário à rota. É comumente usado para
verificar se um usuário está logado e tem autorização antes que ele possa acessar uma
página.
Você pode adicionar um protetor de rota implementando a CanActivateinterface

disponível no @angular/routerpacote e estendendo o canActivate()método que
contém a lógica para permitir ou negar o acesso à rota. Por exemplo, a guarda a seguir
sempre permitirá o acesso a uma rota:
1 class MyGuard implements CanActivate {

2 canActivate() {
3 return true;
4 }
5 }
Você pode então proteger uma rota com o guarda usando o canActivateatributo:
1 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent
80 of 83 20/11/2023, 14:09
Diretiva de Navegação
O roteador angular fornece a routerLinkdiretiva para criar links de navegação. Essa
diretiva leva o caminho associado ao componente para navegar. Por exemplo:
1 <a [routerLink]="'/contacts'">Contacts</a>
Múltiplas saídas e Rotas auxiliares

Roteador Angular suporta múltiplas tomadas no mesmo aplicativo. Um componente
tem uma rota principal associada e pode ter rotas auxiliares. Rotas auxiliares permitem
que os desenvolvedores naveguem em várias rotas ao mesmo tempo.
Para criar uma rota auxiliar, você precisará de uma saída de roteador com nome, na
qual o componente associado à rota auxiliar será exibido.
1 <router-outlet></router-outlet>
2 <router-outlet name="outlet1"></router-outlet>
A saída sem nome é a saída primária.

Todas as tomadas devem ter um nome, exceto a saída principal.
Você pode então especificar a tomada onde deseja renderizar seu componente usando
o atributo outlet:
1 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }
Comandos de Instalação
Angular Material
1 ng add @angular/material
81 of 83 20/11/2023, 14:09
? Choose a prebuilt theme name, or “custom” for a custom theme: Indigo/Pink

Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink
(https://material.angular.io?theme=indigo-pink) ]
Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-

amber (https://material.angular.io?theme=deeppurple-amber) ]
Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey
(https://material.angular.io?theme=pink-bluegrey) ]
Purple/Green [ Preview: https://material.angular.io?theme=purple-green

(https://material.angular.io?theme=purple-green) ]
#Set up HammerJS for gesture recognition? (Y/n) = Y

#? Set up browser animations for Angular Material? (Y/n) = Y
Vá para app > angular-material.module.ts e adicione o codigo.
1 import { BrowserModule } from '@angular/platform-browser';

2 import { NgModule } from '@angular/core';
3
4 import { AppComponent } from './app.component';
5 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
6
7 @NgModule({
8 declarations: [
9 AppComponent
10 ],
11 imports: [
12 BrowserModule,
13 BrowserAnimationsModule
14 ],
15 providers: [],
16 bootstrap: [AppComponent]
17 })
18 export class AppModule { }
19
Material Design Bootstrap
1 npm i npm-registry-client
2 ng add angular-bootstrap-md
tags: angular apostila
82 of 83 20/11/2023, 14:09
83 of 83 20/11/2023, 14:09

A Apostila Angular - Cursos Edson Belém - HackMD

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

A Apostila Angular - Cursos Edson Belém - HackMD

Enviado por

Direitos autorais:

Formatos disponíveis

:a: Apostila Angular - Cursos Edson Belém - HackMD https://hackmd.

:a: Apostila Angular - … Try  HackMD (https://hackmd.io?utm_source=view-page&utm_medium=logo-nav)

Apostila Angular - Cursos Edson Belém

Programas para instalação

• Node.js (https://nodejs.org/en/download/) - https://nodejs.org/en/download/

• Angular cli (https://cli.angular.io/) - https://cli.angular.io/ (https://cli.angular.io/)

Comandos para instalar

1 npm install -g @angular/cli

numero da versão desejada.

1 npm install -g @angular/cli@10

As versões que estamos usando no curso:

Criação de diretorio e classe

Para criar a classe:

Node.js é uma plataforma construída sobre o motor JavaScript do Google Chrome

Node.js é um interpretador, com código aberto, de código JavaScript de modo

Como o Node funciona?

Express.js , ou simplesmente Express , é uma estrutura de aplicativo da web para o

O autor original, TJ Holowaychuk , descreveu-o como um servidor inspirado no Sinatra

O Nodemon é um utilitário que monitora quaisquer alterações em sua origem e

Mongoose é uma biblioteca do Nodejs que proporciona uma solução baseada em

Mongoose fornece um mapeamento de objetos do MongoDB similar ao ORM (Object

O express.bodyParser() é uma função que facilita a construção de objetos JSON apartir

A associação de classes indica quando uma classe tem um tipo de relacionamento

Herança é um princípio de orientação a objetos, que permite que classes compartilhem

exemplo pode-se observar as classes ‘aluno’ e ‘professor’, onde ambas possuem

Em algumas linguagens de programação, o termo interface (ou protocolo) é uma

O princípio da interface é um alicerce da programação modular que, por sua vez, é

Algumas linguagens de programação orientadas a objeto exigem que a interface do

cabeçalho (header em inglês) e, por outro lado, a implementação da classe é mantida

Em arquitetura de software há muitas camadas entre o hardware e o usuário final.

Em projetos de software, por exemplo, a arquitetura modelo-visão-controlador fornece

Para subsistemas de computação maiores, um gerenciador de arquivos gráfico é um

Arquitetura Modelo-Visão-Controlador (do inglês: Model-View-Controller - MVC) é

O modelo (model) consiste nos dados da aplicação, regras de negócios, lógica e

Tradicionalmente usado para interfaces gráficas de usuário (GUIs), esta arquitetura

Camada de apresentação ou visualização (View) - Não se dedica em saber como o

Camada de lógica da aplicação (Model) - É o coração da execução, responsável por

Camada de controle (Control) - É responsável por interpretar as ações de entrada

Arrays, Vetor e Matriz

No geral, os arrays possuem tamanho fixo, ou seja, número de posições definida; em

Classificação dos arrays

Os Vetores são matrizes de uma só dimensão.

Um vetor é um array unidimensional, ou seja, de uma única dimensão; é análogo a

• nomeVetor é o nome escolhido para o vetor, que deve seguir as regras de

1 int Vetor[5]; // declara um vetor de 5 posições

Acesso aos elementos do vetor

1 Vetor[0] = 4; // Coloca 4 na primeira posição de "Vetor"

Exemplos com Vetores

1 int Vetor[5]; // declara um vetor de 5 posições

No desenvolvimento de uma aplicação, é muito comum utilizarmos estruturas

• Se o salário for maior que R$ 1000, o bônus é de 10%

1 double salario = 1000;

Em um cenário similar a esse, podemos também utilizar o operador ternário que

1 double salario = 1000;

Condição? valor se for verdareiro : valor se for falso

Justamente pelo fato de realizar essas 3 operações, o chamamos de operador ternário.

Vejamos alguns exemplos:

1 var salario = 1000;

Diferenças entre Angular e AngularJS

Arquitetura de uma aplicação Angular. Os principais blocos são módulos,

Originalmente, a reescrita do AngularJS foi chamado de “Angular 2” pela equipe, mas

Recursos na versão 4.3

O Angular 9 foi lançado em 6 de fevereiro de 2020. A versão 9 move todos os

• Tamanhos de pacote menores