Angular 4 #1: Criando um projeto do zero

O objetivo desse post é orientar a respeito dos requisitos mínimos para a criação de um projeto Angular.
Todos os exemplos e dicas que forem postadas serão baseadas nessa mesma estrutura de projeto.

Pré-Requisitos

Para se trabalhar com Angular, é necessário um conjunto de ferramentas mínimo de ferramentas como se segue:

NodeJS

Ferramenta básica para a maioria dos frameworks FrontEnd. Traz o NPM, gerenciador de pacotes, utilizado pelo Angular.

Para instalar, acesse nodejs.org, baixe e instale a versão mais recente.

 TypeScript

Superset do javascript, apesar de podermos utilizar o javascript diretamente para desenvolver Angular, toda a documentação e toda a comunidade utiliza Typescript para desenvolver, assim, torna-se muito aconselhável o uso.

Para instalar, acesse o prompt de comando e execute o comando:

npm install -g typescript

Para usuários Linux ou Mac é necessário incluir o comando sudo na frente!

@angular/cli

Command Line Interface, ferramenta para apoio ao desenvolvedor na construção do projeto e de suas partes

Para instalar, acesse o prompt de comando e execute o comando:

npm install -g @angular/cli

Para usuários Linux ou Mac é necessário incluir o comando sudo na frente!

Visual Studio Code

Editor de código gratuito e muilt-plataforma da microsoft 100% compatível com typescript e indicado para o desenvolvimento de projetos Angular.

Para instalar, acesse code.visualstudio, baixe e instale a versão mais recente.

Importante: O VS Code não é essencial, é uma sugestão de editor para a programação em Angular!

Para verificar que o ambiente está correto, na linha de comando execute o seguinte comando:
ng --version
O resultado esperado é algo do tipo:

Criando e testando o projeto

Criando o projeto

Depois do ambiente configurado, a criação de um novo projeto se torna uma tarefa extremamente simples.

1. No prompt de comando, acesse o diretório raiz onde seus projeto será guardado
2. Execute o seguinte comando:
   
   1. ng new my-first-project

Após a execução, o CLI irá criar e baixar as dependências para o novo projeto.

Testando o projeto

Uma dos muitos recursos do CLI é capacidade de compilar e hospedar nossa aplicação, permitindo assim o teste.
Para executar o projeto, acesse o diretório do processo, no nosso caso a pasta “my-first-project” e execute o seguinte comando:
npm start
Esse comando irá executar o comando: ng serve, que por sua vez irá validar o código do projeto e, se estiver tudo ok, irá disponibilizá-lo para uso na porta 4200 (http://localhost:4200)

Quando acessado via browser, o seguinte resultado é exibido:

É isso ai, agora é abrir o código gerado no seu editor de texto preferido (indico o Visual Studio Code) e começar o desenvolvimento!