Angular tornou-se muito popular nos últimos dois anos. Você pode usar essa estrutura JavaScript de código aberto para criar aplicativos da Web e móveis. Se você está pensando em aprender Angular, mas não sabe por onde começar, seguir esta série pode ser uma boa ideia.

O objetivo desta série é cobrir o básico do Angular enquanto cria um aplicativo muito simples que mostra informações sobre diferentes países. Angular é escrito em TypeScript, então faz sentido que você escreva seu próprio código em TypeScript também.

Não há necessidade de se preocupar se você nunca usou o TypeScript antes. Para simplificar, o TypeScript é apenas JavaScript digitado com recursos adicionais. Também escrevi uma série intitulada TypeScript for Beginners no Envato Tuts+, onde você pode aprender o básico do TypeScript primeiro.

Começando

Se você já está familiarizado com o TypeScript, pode simplesmente ir em frente e começar a criar seu primeiro aplicativo Angular.

O primeiro passo seria instalar o Node.js. Você pode acessar o site oficial e baixar a versão apropriada. O gerenciador de pacotes do nó será instalado como parte do Node.js.

A próxima etapa é instalar o TypeScript executando o comando a seguir. Eu recomendo que você instale uma versão do TypeScript acima da 2.1.

npm install -g typescript

Por fim, você precisa instalar a CLI Angular executando o seguinte comando. A instalação do Angular CLI facilitará o processo de criação do seu aplicativo Angular.

npm install -g @angular/cli

Agora, você pode criar um novo aplicativo Angular imediatamente executando o seguinte comando dentro do terminal. Antes de executar o comando, certifique-se de ter movido para o diretório em que deseja criar o aplicativo.

ng new country-app

A instalação de todas as dependências do projeto leva algum tempo, portanto, seja paciente enquanto o Angular CLI configura seu aplicativo. Após a conclusão da instalação, você verá uma pasta chamada country-app no diretório atual. Você pode executar seu aplicativo agora alterando o diretório para country-app e depois correr ng serve na consola.

cd country-app
ng serve --open

Adicionando --open abrirá automaticamente seu aplicativo no navegador em http://localhost:4200/.

Visão geral do aplicativo de informações do país

O aplicativo de informações do país que estamos criando terá três componentes. o HomeComponent mostrará os três principais países em várias categorias, como população, PIB e área. Você poderá clicar no nome de cada país para ler mais sobre ele. As informações adicionais sobre o país são listadas usando outro componente, que chamaremos de CountryDetailComponent. Haverá mais um componente em nosso aplicativo, que será usado para exibir uma lista de todos os países que armazenamos em nosso aplicativo.

Como este é o seu primeiro aplicativo Angular, nosso principal objetivo será manter as coisas simples sem adicionar nenhuma funcionalidade complicada. Depois de ter uma boa compreensão do básico, criar aplicativos mais complexos não parecerá uma tarefa assustadora.

A imagem abaixo é da página inicial ou HomeComponent em nosso aplicativo de informações do país. Como você pode ver, existem três países em cada categoria, e eles foram colocados em ordem decrescente. Ao criar o HomeComponentvocê aprenderá a classificar diferentes países antes de exibi-los dentro do modelo.

A imagem a seguir mostra a “página de todos os países” ou AllCountriesComponent do nosso aplicativo. O layout deste componente é muito semelhante ao HomeComponent. A única diferença é que desta vez estamos listando todos os países junto com suas capitais.

Se você clicar na caixa de qualquer país renderizado dentro do HomeComponent ou o AllCountriesComponentvocê será direcionado para a página de detalhes do país ou CountryDetailComponent. As informações fornecidas sobre um país não são editáveis.

Há um botão Voltar após os detalhes de cada país. Este botão Voltar leva você de volta ao componente ou página anterior. Se você veio ao CountryDetailComponent de HomeComponentvocê será levado de volta ao HomeComponent. Se você chegou ao CountryDetailComponent de AllCountriesComponentvocê será levado de volta ao AllCountriesComponent.

Fazer referência a diferentes componentes que estamos criando como páginas não é tecnicamente correto. No entanto, estou usando termos como página inicial ou HomeComponent alternadamente, porque ver muitos termos desconhecidos, como roteamento, componentes e decoradores, pode ser intimidante para leitores que nunca criaram um aplicativo Angular antes. Usar esses termos livremente para esta série pode ajudá-lo a aprender rapidamente, em vez de se confundir com o jargão.

Princípios Angulares

Antes de começarmos a criar nosso aplicativo, você precisa se familiarizar com os conceitos básicos do Angular. Esta seção abordará brevemente tópicos importantes, como componentes e modelos.

Os componentes são os blocos de construção de um aplicativo Angular. Eles permitem que você controle a interface do usuário do seu aplicativo. Um componente básico consiste em duas partes: um decorador e uma definição de classe. Você pode especificar a lógica do aplicativo para um componente dentro da classe.

O decorador de componentes é usado para especificar informações como um seletor personalizado para identificar o componente, o caminho para o modelo HTML e as regras de estilo a serem aplicadas ao componente.

Aqui está um decorador de componente básico que define todos os três valores para CountryDetailComponent:

@Component({
    selector: 'app-country-detail',
    templateUrl: './country-detail.component.html',
    styleUrls: ['./country-detail.component.css']
})

Todos os componentes que criamos terão um seletor personalizado que especifica a tag que renderiza o componente dentro do navegador. Essas tags personalizadas podem ter qualquer nome que você desejar. Por exemplo, vamos criar um countryDetailComponent no terceiro tutorial da série, e usaremos nossa própria tag personalizada chamada app-country-detail para renderizar este componente no navegador.

Qualquer componente que você criar consistirá em um modelo que controla o que é renderizado na página do aplicativo. Por exemplo, o countryDetailComponent tem dois div tags que atuam como um wrapper em torno do conteúdo principal do componente. Cada pedaço de informação sobre um país é colocado dentro de seu próprio p etiqueta, e o nome do país é colocado dentro de uma h2 marcação. Todas essas tags podem ser armazenadas juntas como um modelo para o countryDetailComponent e, em seguida, renderizado como uma unidade. Este template do componente pode ser salvo como um arquivo HTML ou especificado diretamente dentro do decorador usando o template atributo.

Diferentes componentes do nosso aplicativo precisarão recuperar os dados a serem exibidos na tela. Estaremos criando uma classe de serviço que conterá funções para nos ajudar a recuperar esses dados e classificá-los ou modificá-los de uma forma ou de outra. Em seguida, usaremos a funcionalidade de diferentes classes de componentes para exibir esses dados ao usuário.

Você pode considerar um Service para ser simplesmente qualquer valor, função ou recurso que seu aplicativo precisa. Obter todos os países armazenados em nosso aplicativo é um serviço, assim como classificá-los e exibi-los. Todos os três componentes em nossa classe usarão funções de nosso serviço para recuperar dados.

Ao criar componentes para seu aplicativo, você terá que importar dependências de diferentes módulos. Por exemplo, estaremos importando Component de @angular/core sempre que criamos um componente nosso. Você também pode usar a mesma sintaxe para importar dependências que foram criadas por você. A parte entre colchetes é usada para especificar a dependência que você deseja importar e a parte após from é usado para especificar onde o Angular pode encontrar a dependência.

Aqui está um trecho de código do country-app que estaremos criando. Como você pode ver, estamos importando Component e OnInit de @angular/core. Da mesma forma, estamos importando um Country e CountryService de arquivos que nós mesmos criamos.

import { Component, OnInit } from '@angular/core';

import { Country } from '../country';
import { CountryService } from '../country.service';

O shell do aplicativo

Depois que você executou o ng new country-app comando, a CLI do Angular criou vários arquivos e pastas para você. Ver tantos arquivos pode ser intimidante para um iniciante, mas você não precisa trabalhar com todos esses arquivos. Ao criar nosso aplicativo de país, estaremos apenas modificando os arquivos já existentes dentro do src/app pasta, bem como criar novos arquivos no mesmo diretório. Agora, você deve ter cinco arquivos diferentes no src/app pasta. Esses arquivos criam um shell de aplicativo que será usado para montar o restante do nosso aplicativo.

o app.component.ts arquivo contém a lógica para nosso componente escrito em TypeScript. Você pode abrir este arquivo e atualizar o title propriedade do AppComponent classe para ‘Curiosidades sobre os países’. o app.component.ts arquivo agora deve ter o seguinte código.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title="Fun Facts About Countries";
}

o app.component.html arquivo contém o modelo para o nosso AppComponent classe. Abra o app.component.html e substitua o código HTML padrão dentro dele pela seguinte linha:

{{title}}

Ao envolver title dentro das chaves, estamos dizendo ao Angular para colocar o valor de title propriedade do AppComponent aula dentro do h1 marcação.

Estaremos atualizando este arquivo no último tutorial da série para renderizar novos componentes que estaremos criando. Por enquanto, basta mostrar o título do nosso aplicativo.

As alterações feitas neste arquivo serão refletidas automaticamente no navegador em http://localhost:4200/. Apenas certifique-se de que o console ainda está aberto e você já digitou o ng serve comando desde o início do tutorial.

Diferentes funções e recursos do aplicativo serão controlados por vários componentes mais simples que criaremos posteriormente. Você pode pensar neste shell de aplicativo como um carro e diferentes componentes que criaremos como partes desse carro, como o motor e as rodas. Cada componente desempenhará sua função específica e você pode juntá-los para criar o carro inteiro.

Pensamentos finais

O objetivo deste tutorial foi ajudá-lo a instalar todas as ferramentas necessárias para criar um aplicativo Angular e passar rapidamente por alguns conceitos fundamentais do Angular.

Para resumir, você precisa conhecer o básico do TypeScript antes de criar um aplicativo Angular. Na próxima etapa, você precisa instalar o Node.js, TypeScript e a CLI Angular. Depois disso, você pode simplesmente executar vários comandos da seção Introdução deste tutorial, e seu primeiro aplicativo Angular estará funcionando.

Nosso aplicativo do país fará muito mais do que apenas mostrar o título. No próximo tutorial, você criará algumas classes e serviços que serão usados ​​para armazenar e recuperar dados sobre diferentes países. Essas classes e serviços serão úteis no terceiro e quarto tutoriais, onde criaremos diferentes componentes do nosso aplicativo.

Enquanto trabalhamos nesta série de tutoriais, não se esqueça de conferir o Envato Market para ver o que está disponível para uso e estudo para Angular e JavaScript, em geral.