Angular é uma plataforma e estrutura de desenvolvimento TypeScript usada para criar aplicativos de página única.

Angular tem uma história complexa. Os desenvolvedores usaram JavaScript para construir a primeira versão deste framework (AngularJS). Os Angulardevelopers mais tarde usaram o TypeScript para construir todas as versões sucessivas do Angular (devido ao número de bugs na primeira versão).

Em 2021, a versão mais recente do Angular era 12.0. Neste artigo, você aprenderá tudo o que precisa saber sobre o Angularframework.

O que é angular?

Muitas pessoas descrevem o Angular como uma estrutura e, embora essa definição não seja incorreta, o Angular não é apenas uma estrutura. Angular também é uma plataforma de desenvolvimento. Isso significa que ele possui um sistema de hardware e software, que executa aplicativos Angular.

Embora seja baseado em TypeScript, você pode escrever a maior parte do código da plataforma em JavaScript. Como a maioria dos frameworks, o Angular é baseado em componentes. Isso significa que cada seção de uma interface de usuário Angular é tratada como uma entidade independente, o que leva à criação de código reutilizável e aplicativos escalonáveis.

Para usar o Angular, você precisa estar familiarizado com HTML, CSS e JavaScript (saber que o TypeScript é um recurso, mas não um requisito). O Angularis frequentemente é comparado ao VueJS e ao ReactJS, e uma das principais queixas é que o Angular tem uma curva de aprendizado mais íngreme.

Relacionado: O que é ReactJS e para que ele pode ser usado?

Isso não é surpresa, pois Angular (sendo uma plataforma de desenvolvimento), tem um número maior de estruturas centrais para você se familiarizar. Essas estruturas incluem:

• Módulos
• Componentes
• Modelos

E a compreensão desses recursos essenciais garantirá que você esteja no caminho certo para se tornar um desenvolvedor Angular.

Explorando Arquivos Angulares

O aplicativo Angular gera muitos arquivos dentro de sua nova pasta de projeto (como você pode ver na imagem abaixo). Verifique o site oficial do Angular para obter instruções sobre como instalar o Angular no seu computador.

Um dos arquivos mais importantes dentro da pasta principal do projeto é o package.json Arquivo. Este arquivo informa o nome do seu projeto, como iniciá-lo (ng serve), como construir seu projeto (ng construir) e como testar seu projeto (teste de ng) entre outras coisas.

A pasta principal do seu projeto também contém duas pastas—node_modules e src. o src pasta é onde você fará todo o seu desenvolvimento; ele contém vários arquivos e pastas.

A pasta src

o styles.css arquivo é onde você colocará todas as suas preferências de estilo globais, e o index.html arquivo é a única página processada em seu navegador.

Explorando o arquivo index.html

A única coisa que você gostaria de mudar no index.html o arquivo acima é o título do aplicativo. o tag no corpo do arquivo HTML acima vincula ao app.component.ts, que está localizado dentro da pasta do app (como você pode ver na imagem abaixo).

Explorando o arquivo app.component.ts

importar {Component} de '@ angular / core';
@Componente({
seletor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
título = 'meu-aplicativo';
}

o app.component.ts arquivo usa o app-root seletor, que está localizado no index.html arquivo acima. Usa o app.component.html arquivo como um modelo e o app.component.css arquivo para estilo.

o app.component.css arquivo está vazio quando é gerado porque todas as preferências de estilo, junto com o layout HTML, estão dentro do app.component.html Arquivo.

Executando o aplicativo Angular com o ng serve --open comando exibirá o seguinte em seu navegador:

Para alterar o que é exibido em seu navegador, você precisará editar o app.component.html Arquivo.

Substituindo o conteúdo deste arquivo pelo seguinte código:

Olá Mundo

Irá produzir a seguinte saída em seu navegador:

Compreendendo os Módulos Angulares

Cada Angular aplicativo é construído em um sistema de módulo básico, conhecido como NgModules. Cada aplicativo contém pelo menos um NgModule. Angular gera dois módulos do de novo comando (app-routing.module.ts e app.module.ts).

o app.module.ts arquivo contém o módulo raiz, que deve estar presente para que o aplicativo seja executado.

Explorando o arquivo app.module.ts

importar {NgModule} de '@ angular / core';
import {BrowserModule} de '@ angular / platform-browser';
importar {AppRoutingModule} de './app-routing.module';
importar {AppComponent} de './app.component';
@NgModule ({
declarações: [
AppComponent
],
importações: [
BrowserModule,
AppRoutingModule
],
provedores: [],
bootstrap: [AppComponent]
})
exportar classe AppModule {}

O arquivo acima usa o JavaScript importar declaração para importar o NgModule, a BrowserModule, a AppComponent, e as AppRoutingModule (que é o segundo NgModule no projeto).

o @NgModule o decorador vem depois das importações. Isso indica que o app.module.ts arquivo é de fato um NgModule. o @NgModule decorator então configura vários arrays: o declarações, a importações, a provedores, e as bootstrap.

o declarações array armazena os componentes, diretivas e canais que pertencem a um NgModule. No entanto, no caso de um módulo raiz, apenas o AppComponent é armazenado no declaração array (como você pode ver no código acima).

o importações array importa o outro NgModules que você está usando no aplicativo. o importações array no código acima importa o BrowserModule (que permite usar serviços específicos do navegador, como renderização DOM), e o AppRoutingModule (que permite que o aplicativo use o Angular roteador).

Relacionado: O herói oculto dos sites: Compreendendo o DOM

o provedores array deve conter serviços que componentes em outros NgModules pode usar.

o bootstrap array é muito importante porque contém o componente de entrada que o Angular cria e insere no index.html arquivo na pasta principal do projeto. Cada aplicativo Angular é iniciado a partir do bootstrap array na raiz NgModule por bootstrapping a NgModule (que envolve um processo que insere cada componente no bootstrap array no DOM do navegador).

Compreendendo os componentes angulares

Cada componente angular é gerado com quatro arquivos específicos. Se você der uma olhada na imagem da pasta do aplicativo acima, verá os seguintes arquivos:

• app.component.css (um arquivo CSS)
• app.component.html (um arquivo de modelo)
• app.component.spec.ts (um arquivo de especificação de teste)
• app.component.ts (um arquivo de componente)

Todos os arquivos acima estão associados ao mesmo componente. Se você usar o ng gerar comando para gerar um novo componente, quatro arquivos semelhantes aos acima serão gerados. o app.component.ts arquivo contém o componente raiz, que conecta os diferentes aspectos do componente (como o modelo e o estilo).

Explorando o arquivo app.component.ts

importar {Component} de '@ angular / core';
@Componente({
seletor: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
título = 'meu-aplicativo';
}

o app.component.ts O arquivo usa a declaração de importação do JavaScript para importar "Componente" do núcleo do Angular. Então o @Componente decorador identifica a classe como um componente. o @Componente decorador contém um objeto composto por um seletor, uma templateUrl, e um styleUrls variedade.

o seletor conta Angular para inserir uma instância do componente do aplicativo em qualquer modelo HTML que tenha uma tag correspondente ao seletor (então o marcação). E se você der uma olhada no código no index.html arquivo acima, você encontrará o marcação.

O arquivo de componente principal do aplicativo também se vincula ao arquivo de modelo, usando o templateUrl propriedade. Isto é o app.component.html arquivo, que descreve como um componente específico deve ser processado em um aplicativo Angular.

A propriedade final do objeto é o styleUrls. Esta propriedade faz referência a uma matriz de folhas de estilo, o que significa que você pode aplicar várias folhas de estilo a um único componente (para que você possa adicionar a folha de estilo global na pasta src ao array styleUrls como Nós vamos).

Compreendendo os modelos angulares

o app.component.html arquivo é um exemplo de um modelo Angular. Este arquivo é um arquivo HTML, bem como um arquivo de componente (o componente do aplicativo). Portanto, cada componente deve ter um modelo HTML, simplesmente porque ele descreve como um componente é renderizado no DOM.

Qual é o próximo?

Compreender o DOM é a sua próxima melhor jogada. Assumir a plataforma e a estrutura Angular é, sem dúvida, desafiador. No entanto, é possível, e dado que o Angular renderiza seus componentes no DOM, aprender sobre o DOM - enquanto você tenta masterizar o Angular - é outra grande jogada.

O herói oculto dos sites: Compreendendo o DOM

Está aprendendo web design e precisa saber mais sobre o Document Object Model? Aqui está o que você precisa saber sobre o DOM.

Leia a seguir

Sobre o autor