O que é Angular? (Parte 1) | Configuração do ambiente de desenvolvedor | Crie um novo projeto angular.

Vamos começar com O que é Angular?

Angular é uma estrutura para construir aplicativos cliente em HTML, CSS e Javascript / Typescript.

Typecript : é uma linguagem que compila para Javascript. Texto Dactilografado é muito comum quando se usa Angular - porque até mesmo Angular é escrito em Texto Dactilografado.

Por que precisamos do Angular?

Aplicativos complexos são difíceis de manter em Javascript e Jquery. Precisamos de uma maneira de estruturar nosso aplicativo. É por isso que essas estruturas (Angular, React etc.) são usadas.

Benefícios de usar o Angular?

• Dá ao nosso aplicativo uma estrutura limpa: fácil de entender e fácil de manter
• Inclui muito código reutilizável
• Torna nosso aplicativo mais testável

Front-end (cliente) 👇 ← → Back-end (servidor web) 👇

Interface do usuário (IU) 👇 ← → Dados + APIs e processamento (lógica de negócios) 👇

(HTML, CSS, Typescript, JS, Angular) 👇 ← → (Java, Python, Node.js etc.) 👇

O front-end (cliente) envia / recebe dados para / do servidor usando API

A PLICAÇÃO P ROGRAMAÇÃO I nterface (APIs) / serviços HTTP

Em APIs, os terminais são acessíveis por meio do protocolo HTTP (métodos GET e POST)

Endpoints são URLs para acessar APIs e solicitações HTTP obtêm / enviam dados de / para o servidor.

E a função do Angular é no front-end que fica do lado do Cliente - Interface do Usuário.

Primeiro aplicativo Angular

Ambiente de desenvolvedor de configuração

1. Instale a versão estável do nó .

N ode : é basicamente um ambiente de tempo de execução para executar código Javascript fora do navegador. Neste projeto, não usamos basicamente o Node, mas o Node fornece algumas ferramentas de que precisamos para construir o projeto angular.

Visita: https://nodejs.org/ para baixar e instalar a versão estável recomendada do Node.

Após a conclusão da instalação, verifique se a instalação foi bem-sucedida -> Abra o prompt de comando e digite: nó - versão para ter certeza de que o Node foi instalado com sucesso. (A versão mínima do Node necessária para construir o aplicativo angular é a versão 6.9)

node --version

2. Instale o A ngular CLI .

* Uma vez que temos instalado Node , então podemos usar N ode pacote M anager ou NPM para instalar bibliotecas de terceiros. *

Uma da biblioteca que vamos instalado para este projeto é um ngular CLI ou A ngular C ommand- L ine I nterface . É uma ferramenta de linha de comando que usamos para criar um novo projeto Angular ou gerar algum código clichê para o início de um novo projeto.

A ngular CLI : Instalando o Angular CLI… | Abra C ommand P rompt ou T erminal e digite o seguinte comando:

sudo npm install -g @angular/cli

• Se não colocarmos -go angular cli será instalado apenas na pasta atual e não ficará acessível em nenhum outro lugar.
• Colocar sudoou abrir o 'Prompt de Comando' como administrador solicitará que você insira a senha do sistema.

ng --version

* Instalamos Node, NPM e Angular CLI. Agora, podemos criar um novo Projeto Angular *

Se você não consegue fazer seu ambiente funcionar, use a caixa de comentários abaixo e poste suas dúvidas / erros.

Criando Novo Projeto Angular

1. Abra a linha de comando e digite:

sudo ng new hello-world

• Este comando irá gerar um monte de arquivos e pastas (veja no topo da imagem anexada 👇 ) e então usar o NPM para baixar bibliotecas de terceiros (veja na parte inferior da imagem anexada 👇 ).

Para se livrar do 'git'erro, você deve instalar o git em seu sistema - use este link👇 para baixar e instalar o git em seu sistema,click here for git → https://git-scm.com/downloads

• Nosso projeto foi criado com sucesso.
• Agora, para começar a codificar, precisamos de um editor de código. O editor que vai vai utilização é V isual S tudio C ode ou VS C ode

( VS C ode é um editor leve e multi-plataforma bonito ou fique à vontade para usar sublime, atom ou qualquer outro editor )

• Projeto parece bonito em VS C ode . 👇👇

Se você não se importasse de dar algumas palmas 👏 👏 já que ajudou, eu agradeceria muito :) Ajude outros a encontrar o artigo, para que ele possa ajudá-los!

Sempre esteja batendo palmas ...