Introdução ao Angular 6

Introdução ao Angular 6

Dentre os muitos frameworks JS que despontaram nos últimos anos o que mais me chamou atenção foi o Angular. Neste post vamos ver uma introdução ao desenvolvimento com Angular utilizando TypeScript.

Instalação

Vamos utilizar o NPM para instalar o angular e outras lib, para saber mais sobre o npm clique aqui.

No terminal do seu SO digite:

npm install -g @angular/cli
npm install -g typescript

Acima instalamos o Angular Cli e o TypeScript. Para nos certificarmos de qual versão do Angular estamos usando digite o comando abaixo:

ng -v

Para inicializar o desenvolvimento de uma aplicação com Angular podemos utilizar o comando abaixo para criar toda a estrutura básica inicial de arquivos/diretórios que precisamos:

ng new angular-app

Abaixo temos um exemplo dos arquivos/diretórios criados com o comando acima:

angularapp
├── angular.json
├── e2e
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
├── tsconfig.json
└── tslint.json

Para visualizar a aplicação digite:

ng serve

E depois acesse:

http://localhost:4200

Componentes

Para o Angular um componente é um pedaço de código, ex. uma classe TypeScript, associada com um HTML Template e CSS.

Podemos dizer que uma aplicação Angular é baseada em componentes. Esses componentes podem ser reutilizados em diversos pontos da mesma aplicação. Dada essa arquitetura temos componentes com uma bem delimitada separação de responsabilidades e que podem ser facilmente testados.

No diretório da nossa aplicação navegue até o diretório “/src/app”:

.
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
└── app.module.ts

Dentro deste diretório temos todos os arquivos que constituem um componente com exceção da classe app.module.ts. Está classe contém a declaração de todos os módulos utilizados na aplicação. Vamos ver com mais detalhes este arquivo um pouco mais a frente neste post.

Acessando o código da classe app.component.ts ( um arquivo TypeScript) temos 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 = 'angularapp';
}

Vemos a declaração da classe AppComponent anotada com o decorator @Component.

Esse decorator recebe alem do selector outras duas chaves com os valores da url do template html (templateUrl) e do arquivo css (styleUrls) utilizados para este componente.

Vamos utilizar o Angular CLI para criarmos um outro componente, estando dentro do dir “src/app”  digite:

ng generate UserList

Foi criado o nosso componente navegue até src/app/user-list:

.
├── user-list.component.css
├── user-list.component.html
├── user-list.component.spec.ts
└── user-list.component.ts

Todos esses arquivos poderiam ter sido criados manualmente mas como escolhemos utilizar o CLI ele já adiantou o trabalho para nós e inclusive já fez o import do componente criado, entre no código da classe app.module.ts:


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

import { AppComponent } from './app.component';
import { UserListComponent } from './user-list/user-list.component';

@NgModule({
declarations: [
AppComponent,
UserListComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Veja que além do import do componente (import { UserListComponent } from ‘./user-list/user-list.component’) temos também sua declaração no decorator NgModules na chave declarations.

Agora crie mais um componente:

ng generate component UserCreate

Rotas

Rotas em Angular representam uma maneira de linkar páginas e partes da nossa app. Para criar nossas rotas vamos primeiro criar um novo modulo num arquivo localizado em src/app de nome app-routing.module.ts com o seguinte conteúdo:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

A constante routes irá conter todas as nossas rotas. Antes de mais nada precisamos fazer o import do nosso módulo de rotas no arquivo app.module.ts. Veja como ele ficou:


import {AppRoutingModule} from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { UserListComponent } from './user-list/user-list.component';

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

Faltou agora inicializarmos a constante routes no arquivo “app-routing.module.ts”:

const routes: Routes = [
{ path: 'usercreate', component: UserCreateComponent },
{ path:  '', redirectTo:  '', pathMatch:  'full' },
{ path: 'users', component: UserListComponent }
];

Neste mesmo arquivo de rotas (app-routing.module.ts) vamos ter que realizar o import dos componentes:

import { UserListComponent } from './user-list/user-list.component';
import { UserCreateComponent } from './user-create/user-create.component';

Para visualizar as rotas temos que alterar o arquivo app.component.html. Primeiro vamos adicionar o link para as rotas:

<a [outerLink]=’/users’>Users</a>
</br>
<a [outerLink]=’/usercreate’>Create</a>

E depois insira a tag abaixo para indicar aonde será exibido o conteúdo da rota quando o link do mesmo for clicado:

<router-outlet></router-outlet>

Perceba que temos dois links na tela agora: Users e User Create e que quando clicamos em cada um deles vemos o conteúdo dos respectivos componentes: user-list e user-create sendo exibidos na tela através da tag router-outlet.

 

Proximos Passos

Na segunda parte desta série vamos ver como se comunicar com uma API REST dentro desta nossa pequena app de exemplo. Até mais!!!

One thought on “Introdução ao Angular 6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s