# :a: Angular 8 - Aula 01 - Terça e Quinta - Noite
## :book: Tema da aula:
Orientação a Objetos, Instalação Node, Angular, Conceitos Typescript, Express, Arquitetura, Versões angular, Material Design Bootstrap, Calculo de media, Situação, Dados mockados, Animate css, wow, efeitos

> [color=red] [name=Prof Edson Belém - [e-mail]] [time=Qui, Dez 10, 2020]
>

> [color=purple] [name=Prof Luciana Medeiros - [e-mail]] [time=Qui, Dez 10, 2020]
>

:::info
## :warning: Dados dos professores:
* [e-mail] / face
98199-0108 / zap
* [e-mail]
98201-2525
:::

## :pencil2: Acompanhe o Blog:
www.blogedsonbelem.com.br

## :warning: Programas para Baixar:
* [Visual Studio Code](https://code.visualstudio.com/) :point_right: https://code.visualstudio.com/
* [Node.js](https://nodejs.org/en/download/) :point_right: https://nodejs.org/en/download/
* [Angular cli](https://cli.angular.io/) :point_right: https://cli.angular.io/
* [Git para Windows](https://gitforwindows.org/) :point_right: https://gitforwindows.org/

### Comandos para instalar
:point_right: **Instalar o Angular**
Este comando instala a versão mais recente

npm install -g @angular/cli

Este comando é para escolher a versão que queremos instalar, colocamos o “@” e o numero da versão desejada.

npm install -g @angular/cli@8.1.2

As versões que estamos usando no curso:

### Outros comandos
:point_right: **Verficar a versão do Angular.**

ng v

## :pencil2: Criando um projeto novo

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

**Para criar a classe:**
Clicar com o botão direito em app -> new file...

## [Node js](https://nodejs.org/en/ "Ir para o site oficial")

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.

### 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 AngularJS .

## Conceitos Gerais

### Classe e Objeto

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

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 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 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, 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 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

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.

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**

int Vetor[5];   // declara um vetor de 5 posições
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"

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

**Exemplos com Vetores**

int Vetor[5];  // declara um vetor de 5 posições
int Matriz[5][3]; // declara uma matriz de 5 linhas e 3 colunas

Vetor[0] = 9; // coloca 9 na primeira posição do vetor
Vetor[4] = 30 // coloca 30 na última posição do vetor

Matriz[0][1] = 15; // coloca 15 na célula que está na primeira linha
// 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 Java:

double salario = 1000;
double bonus = 0.0;
 
if (salario > 1000) {
     bonus = salario * 0.10;
} else {
     bonus = salario * 0.15;
}
 
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!

double salario = 1000;
double bonus = salario * (salario > 1000 ? 0.10 : 0.15);
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:
JavaScript:

var salario = 1000;
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

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

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.

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**
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

Desde a versão 9.0, a equipe do Angular mudou todos os novos aplicativos para usar o compilador e o tempo de execução Ivy. Eles trabalharão no Ivy para melhorar os tamanhos dos pacotes de saída e as velocidades de desenvolvimento.

## Typescript

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:

var foo = 42;    // foo is now a Number
var foo = 'bar'; // foo is now a String
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'.[color=red]

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.[color=blue]

### 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:
* 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
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.

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:

class Student {
    private firstName: string;
    private lastName: string;
    yearOfBirth: number;    //Public scope by default
    schoolName: string;
    city: string;
    //Constructor            
    constructor(firstName: string, lastName: string, schoolName: string, 
                city: string, yearOfBirth: number) {

        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
        this.city = city;
        this.schoolName = schoolName;

    }
    //Function
    age() {
        return 2014 - this.yearOfBirth;
    }         
    //Function
    printStudentFullName(): void {
        alert(this.lastName + ',' + this.firstName);
    }
}

Exemplo em Javascript:

var Student = (function () {
    //Constructor
    function Student(firstName, lastName, schoolName, city, yearOfBirth) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
        this.city = city;
        this.schoolName = schoolName;
    }
    //Function
    Student.prototype.age = function () {
        return 2014 - this.yearOfBirth;
    };

    //Function
    Student.prototype.printStudentFullName = function () {
        alert(this.lastName + ',' + this.firstName);
    };
    return Student;
})();

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:

constructor(private firstName: string, private lastName: 
            string, public schoolName: string, 
            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.

var student = new Student('Tom', 'Hanks', 'World Acting School',1950);
 var age = student.age();
 var fullName = student.printStudentFullName();
 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.

interface IStudent {
     yearOfBirth: number;
     age : () => number;
   }

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.

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 da classe e, em seguida, seguimos pela classe pela qual precisamos estender. Também podemos herdar interfaces em outras interfaces.

//Interface
interface IStudent {
    yearOfBirth: number;
    age : () => number;
}
//Base Class
class College {
    constructor(public name: string, public city: string) {
    }
    public Address(streetName: string) {             
        return ('College Name:' + this.name + ' City: ' + this.city 
        + ' Street Name: ' + streetName);
    }
}
//Child Class implements IStudent and inherits from College
class Student extends College implements IStudent {
    firstName: string;
    lastName: string;
    yearOfBirth: number;
    //private _college: College;
    //Constructor            
    constructor(firstName: string, lastName: string, name: string, 
        city: string, yearOfBirth: number) {
        super(name, city);
        this.firstName = firstName;
        this.lastName = lastName;
        this.yearOfBirth = yearOfBirth;
    }
    age () { 
        return 2014 - this.yearOfBirth;
    }
    CollegeDetails() {
        var y = super.Address('Maple Street');
        alert(y);
    }
    printDetails(): void {
        alert(this.firstName + ' ' + this.lastName + ' College is: ' 
        + this.name);
    }
}

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 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:

constructor(private firstName: string, 
    private lastName: string, public schoolName: string, 
    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.

Subject(subjectList?: string[]) {
   if (subjectList == null) {
      alert('Oh, You have not subscribed to any course');
    }
  }

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

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:

var num1 = 13;
var num2 = 7;
console.log(num1 + num2); // resultado 20

**Subtração (-)**
Nós utilizamos esse operador para subtrair valores numéricos, retornando a diferença entre eles

var num1 = 20;
var num2 = 10;
console.log(num1 - num2); // resultado 10

**Multiplicação (*)**
Nós utilizamos esse operador multiplicar valores numéricos

var num1 = 3;
var num2 = 5;
console.log(num1 * num2); // resultado 15

**Divisão (/)**
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.

var num1 = 20;
var num2 = 5;
console.log(num1 / num2); // resultado 4

**Módulo (%)**
Esse operador retorna o resto da divisão

var num1 = 3;
var num2 = 2;
console.log(num1 % num2); // resultado 1var num3 = 20;
var num4 = 5;
console.log(num3 % num4); // resultado 0var num5 = -1;
var num6 = 2
console.log(num5 % num6); // resultado -1

**Exponenciação (**)**
Esse operador retorna o valor do primeiro operando elevado ao segundo operado

var num1 = 3;
var num2 = 2;
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á incrementado

var num1 = 3;
console.log(num1++); // resultado 3var num2 = 1;
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)**

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 == num2;
let valida2 = num1 > num2;
let valida3 = num1 < num2;

console.log(valida); //false
console.log(valida2); //false
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)

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 > 3 || num2 < 10;
let valida2 = num1 > 1 || num2 > 3;
let valida3 = num1 >= 1 || num2 >= 3;

console.log(valida); //true
console.log(valida2); //false
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)

let num1: Number = 1;
let num2: Number = 3;

let valida = num1 != num2;

console.log(valida); //true

Resultado:
> num1 != num2: retorna true porque num1 e num2 são diferentes. [color=blue]

## [Material Design Bootstrap](https://mdbootstrap.com/)


O Material Design for Bootstrap é um kit de ferramentas de código aberto baseado no Bootstrap para desenvolver aplicativos de Material Design com HTML, CSS e JS. Crie rapidamente protótipos de suas ideias ou construa seu aplicativo inteiro com nossas variáveis e mixins Sass, sistema de grade responsivo, extensos componentes pré-construídos e poderosos plugins construídos em jQuery.


Desenvolvido em 2014 pelo Google, o Material Design é uma “linguagem de design” . Ele é baseado nos motivos de "cartão" que foram introduzidos pela primeira vez no Google Now e expandiu isso, incluindo transições e animações responsivas, efeitos como iluminação e sombras e layouts baseados em grade.

Sendo uma linguagem de design, o Material Design define um conjunto de diretrizes que mostram como melhor projetar um website. Ele informa quais botões são para uso e quais você deve usar, como animar ou movê-lo, bem como onde e como ele deve ser colocado, etc.

É uma linguagem de design para dispositivos móveis , que pode ser usada em todas as versões compatíveis do Android, proporcionando uma experiência consistente e de qualidade em todos os aplicativos e plataformas Android, que também podem ser expandidos para outras plataformas e aplicativos, principalmente por meio de APIs para desenvolvedores de terceiros.

Além da facilidade de implementação e uso, outro grande recurso dessa plataforma de design é a falta de dependência de estruturas e bibliotecas JavaScript .

Em vez disso, ele se baseia em uma estrutura de design de materiais que facilita a utilização e fornece modelos personalizáveis e proporcionam muita liberdade criativa, ajudando a criar sites que se destacam.

### Comandos para instalar

npm i npm-registry-client
ng add angular-bootstrap-md

## [Animate css](https://animate.style/")

O Animate é o grande astro por trás de toda a magia que vocês estão prestes a testemunhar neste artigo. O Animate.css é um projeto idealizado por Daniel Eden — atualmente designer de produto no Facebook. Como diz em sua descrição no GitHub, o projeto é uma série de animações legais, leves e divertidas para você usar nos seus projetos. Na sua página oficial, temos uma demo de todas as animações que podemos colocar nos nossos elementos. São mais de 30 animações muito bem feitas.

## [Wow js](https://wowjs.uk/ "Ir para o site oficial")

Essa biblioteca javascript nos auxilia a criar animações que acontecem de acordo com o scroll do usuário no nosso site. Ela se casa muito bem com o animate.css e nos permite configurar uma série de atributos.

## :a: Estrutura do projeto depois de finalizado:

### :a: Readme.md

node --version
ng --version

Criar um projeto
ng new nome_do_projeto

entrar no diretorio
cd nome_do_projeto

code .

Rodar o projeto. Rodar na porta padrão localhost:4200
No terminal -> ng s -o
Trocar porta -> ng s -o --port 4545

Parar o projeto
CTRL + C

Material Design Bootstrap
npm i npm-registry-client
ng add angular-bootstrap-md

https://mdbootstrap.com/

### :a: aluno.ts

export class Aluno {
    //atributos
    idAluno: number;
    nomeAluno: string;
    email: string;
    disciplina: string;
    nota1: number;
    nota2: number;
    media: number;
    situacao: string;

    //boolean, Type, string, number, any Date

    constructor(idAluno?: number, nomeAluno?: string,
        email?: string, disciplina?: string,
        nota1?: number, nota2?: number) {
        this.idAluno = idAluno;
        this.nomeAluno = nomeAluno;
        this.email = email;
        this.nota1 = nota1;
        this.nota2 = nota2;
    }

    public gerarMedia(): Aluno {
        if (this.nota1 < 0 || this.nota1 > 10 || this.nota2 < 0 
        || this.nota2 > 10) {
            throw new Error("Nota fora da faixa ...");
        }
        this.media = (this.nota1 + this.nota2) / 2;
        return this;
    }

    public gerarSituacao(): Aluno {
        this.situacao = (this.media >= 7) ? "aprovado" : "reprovado";
        return this;
    }
}

### :a: app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    MDBBootstrapModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

### :a: app.component.ts

import { Component } from '@angular/core';
import { Aluno } from './model/aluno';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  title = 'projetoum';
  aluno: Aluno;

  constructor() {
    this.aluno = new Aluno();
  }

  public load() {
    try {
      this.aluno.idAluno = 100;
      this.aluno.nomeAluno = "lu";
      this.aluno.disciplina = "angular";
      this.aluno.email = "[e-mail]";
      this.aluno.nota1 = 9.5;
      this.aluno.nota2 = 8;
      this.aluno.gerarMedia().gerarSituacao();
      console.log(this.aluno);
    } catch (error) {
      console.log(error)
    }
  }
}

### :a: app.component.html

<h1 class='text-center text-white bg-dark jumbotron wow animated zoomIn'>
Olá pessoal!!!</h1>


<button (click)='load();' mdbBtn mdbWavesEffect 
class='btn btn-primary btn-lg'>Load</button>

<div id='form'>
    <label>Nome</label><br>
    <input type="text" name='nomeAluno' [(ngModel)]='aluno.nomeAluno'><br>

    <label>Email</label><br>
    <input type='text' name='email' [(ngModel)]='aluno.email'><br>

    <label>Disciplina</label><br>
    <input type='text' name='disciplina' [(ngModel)]='aluno.disciplina'><br>

    <label>Nota 1</label><br>
    <input type="number" name='nota1' [(ngModel)]='aluno.nota1'><br>
    
    <label>Nota 2</label><br>
    <input type="number" name='nota2' [(ngModel)]='aluno.nota2'><br>
    
    <label>Media</label><br>
    <input type='number' name='media' [(ngModel)]='aluno.media'><br>

    <label>Situação</label><br>
    <input type='text' name='situacao' [(ngModel)]='aluno.situacao'><br>
    <br>
    
    <pre>{{aluno | json}}</pre>

</div>

## :warning: Para rodar o projeto:
:pencil2: Digitar no terminal

ng s -o

### Será aberto no browser
:link: **`http://localhost:4200/`** (porta padrão 4200)

Clicar em LOAD. O formulário será preenchido e os dados mostrados no formato json

:::info
> [color=blue] [name=Cursos Edson Belém - https://www.cursoseb.com.br]
> [color=blue] [name=Cursos Edson Belém EAD - https://www.edsonbelemtreinamento.com.br/ead]
:::

###### tags: `angular` `ter-qui` `noite` `10-12-2020` `ceb`