Angular 5 - Básico

Conceitos Importantes



Angular

O Angular é um framework de front-end que nasceu em javascript puro (AngularJS) e hoje está na versão 5.
Com este framework, é possível desenvolver aplicações web Single-Page-Application e Mobiles modernas.
Desde a V2, o angular utiliza o Typescript em vez de javascript.


Typescript

TypeScript é uma linguagem de script criada e desenvolvida pela Microsoft. A sintaxe é um superconjunto de JavaScript, que adiciona tipagem estática opcional - todo código JavaScript também é TypeScript válido.


Angular CLI

É um framework que facilita a criação, teste e deploy de aplicações em Angular, com ele é possível facilitar a criação desde o projeto a todos os seus componentes, testar a aplicação no browser com live-reload e criar pacotes para deploy.


NodeJS

Framework para executar código javascript. É a base para utilizar o NPM, Angular CLI e diversos outros plugins javascript


NPM

Gerenciador de pacotes javascript "necessário" para o download de todas as bibliotecas do Angular e suas dependências.


IDE

Como toda linguagem de programação modera, precisamos de uma IDE para desenvolver nosso projeto. Recomendo VS Code da Microsoft.
É leve, moderno, largamente utilizado na comunidade, cross-platform e tem muitos add-ons legais :D.


Criando o Projeto



Bootstraping


Instalaremos o Angular CLI, e com ele, iremos fazer o bootstraping, criando o projeto para nós:

Após escolher um diretório para nossa aplicação, é pré requisito ter instalado o NodeJS, tendo feito isso, abriremos o CMD e vamos instalar o Angular CLI:

npm install @angular/cli

Feito isso, utilizaremos o angular CLI já a nosso favor, vamos dar um comando para que ele crie um projeto para nós
Com isso, ele já irá importar todas as bibliotecas e dependencias do angular para o projeto e já ira criar uma arquitetura de pastas recomendada.

ng new course-app

Tento a estrutura do projeto criada, a primeira coisa importante a se fazer é executar um comando para que o NPM instale todos os pacotes necessários para execução do projeto. Fazemos isso com o comando

npm install

Se tudo saiu bem, devemos ter nosso projeto já criado e pronto para dar os próximos passos! :D

Estrutura de Pastas



Uma aplicação em angular criada com angular CLI tem uma arquitetura pré-definida e largamente adotada pelo mercado. Após abrir sua pasta com sua IDE favorita (no meu caso, o VS Code hehe), a estrutura de pastas
deve ser parecida com isso:



Cada item no projeto tem sua importância e função, vale citar alguns deles:

  • e2e: Local destinados a teste end-to-end.
  • node_modules: A pasta onde o NPM instala os pacotes.
  • src: Local onde fica o código fonte da aplicação em si.
  • angular-cli.json: Local onde fica toda configuração do angular-cli.
  • package.json: Local onde estão definidos todos os pacotes e dependencias da aplicação e comandos prédefinidos, é esse arquivo que o NPM olha ao executar o install.
  • tsconfig.json: Configurações do Typescript.
  • tslint: Configurações do pré-compilador do Typescript.

Itens específicos dentro de SRC

  • app: aqui ficarão todos nossos módulos, telas, componentes escritos em Angular.
  • assets: pasta destinada a recursos de media (imagens, videos, etc) e CSS.
  • index.html: O ponto de partida da aplicação.
  • main.ts: O módulo principal da aplicação, também o ponto de partida.
  • package.json: Local onde estão definidos todos os pacotes e dependencias da aplicação e comandos prédefinidos, é esse arquivo que o NPM olha ao executar o install.
  • styles.css: Estilos CSS comuns da aplicação inteira.
  • polyfills.ts: Componente destinado a garantir a retrocompatibilidade do angular com todos os browsers.

Componentes de uma aplicação Angular



Uma aplicação em angular possui seus conceitos definidos e seus principais itens são:

  • modules: Módulos tem o intuito de englobar componentes e encapsular (isolar e reaproveitar), quando se cria uma aplicação com o CLI, ele já cria um modulo padrão, no caso, o app-module.
  • componentes: Podemos definir componentes como "telas", eles pertencem a um módulo e cada component tem seu arquivo HTML, TS e CSS.
  • component.html: Todo HTML do component fica em sem arquivo .html.
  • component.ts: Podemos entender o .ts como toda lógica Typescript que o componente tem, podemos pensá-lo como o "code-behind" do component..
  • component.css: Todo css específico do component fica em seu .css e é isolado de qualquer outro component.
  • component.spec.ts: Todo teste unitário do component fica neste arquivo.
  • service: é um component apenas com ".ts" destinado para interações com back-end ou com aplicações externas
  • shared: é uma pasta criada com o intuito de possuir components, ou modulos compartilháveis e reaproveitáveis

Codando :D



Dinâmica do Curso:

O Curso funcionará da seguinte maneira: tenho uma aplicação de estudo que desenvolvi e está no meu GIT,
o link está abaixo, o aluno deve baixar a aplicação, estudar os conceitos e tentar criar componentes com os conceitos
ensinados, o próprio projeto possui os componentes já de gabarito para o aluno que tiver dificuldades ou não conseguir concluir os desafios.


Acesse meu Github e baixe o projeto base para o curso! ;)


Primeiro Componente e Template Binding

Vamos criar nosso primeiro componente, e nele vamos dar nossos primeiros passos aprendendo o template binding, algumas diretivas muito úteis e um pouco sobre eventos.

Vamos mais uma vez utilizar o Angular CLI ao nosso favor e digitar uma linha de código para que ele crie um componente para nós:

ng g component primeiro-componente

O Template binding é a técnica de escrever no HTML pegando dados de variáveis do Typescript, existem 3 formas diferentes
de fazer isso

A primeira é por interpolação {{minhaVariavel}}

A primeira é por expressão [innerHtml]="minhaVariavel"

A terceira é por expressão chamando uma funtion [innerHtml]="minhaVariavel()"



Diretivas *ngIf *ngFor e [(ngModel)]


As diretivas do angular são muito úteis. As três mais importantes de se memorizar e que utilizaremos 90%
do tempo são *ngIf *ngFor e [(ngModel)].


Quando queremos determinar se certo elemento HTML é renderizado ou não baseado em uma variável do typescript, utilizamos o *ngIf


Quando queremos renderizar uma série de itens HTML baseado em um Array do typescript, utilizamos o *ngFor,
Isso é muito útil para geração de grids, select lists, etc.


Quando queremos fazer o two-way binding de uma propriedade entre o HTML e Typescript utilizamos o [(ngModel)].




Eventos


Eventos são formas de disparar eventos javascript e captura-los no typescript.

A seguir, está um simples evento click como contador de cliques:.



Parabéns!

Você concluiu a parte básica do curso, prossiga para a sessão intermediária se você se sentir confiante!

Prosseguir