Introdução

O objetivo deste post é apresentar as funcionalidades básicas, envolvidas no Angular 5.

Pré-Requisitos

Para efetuar as tarefas, é necessário ler o post Angular e Node.js – 1 – Introdução.

Criando o Projeto

Vamos criar um projeto, utilizando o Angular CLI.

1. Abra um prompt de comando
2. Vá até a pasta de destino do projeto, por exemplo /opt/workspace/angular5-examples/
3. Digite o comando
   1. ng new angular5-basic –routing
   2. –routing (executa a instalação do projeto, com as rotas já configuradas)
   3. Pode-se utilizar –skip-install (evita a instalação dos pacotes – diretório node_modules)
4. Após a instalação, entre no diretório
   1. cd angular5-basic
5. Instalar o projeto
   1. npm install
6. Rodar o projeto (pode ser uma das opções abaixo)
   1. ng serve (http://localhost:4200)
   2. npm start (roda o ng serve)

Componentes Angular

Um Component possui 3 partes:

1. Área de Import
2. Área de Configuration
3. Área de Export

Criando um Component, usando Angular CLI

Para criar um componente, usamos o comando ng.

$ ng g c app-header

create src/app/app-header/app-header.component.html (29 bytes)
create src/app/app-header/app-header.component.spec.ts (650 bytes)
create src/app/app-header/app-header.component.ts (284 bytes)
create src/app/app-header/app-header.component.css (0 bytes)
update src/app/app.module.ts (491 bytes)

$ ng generate componente app-footer

create src/app/app-footer/app-footer.component.html (29 bytes)
create src/app/app-footer/app-footer.component.spec.ts (650 bytes)
create src/app/app-footer/app-footer.component.ts (284 bytes)
create src/app/app-footer/app-footer.component.css (0 bytes)
update src/app/app.module.ts (587 bytes)