Uma introdução mais elaborada ao Angular 2.0 (parte 2)

angular_2_screenshotNo post anterior eu propus criar uma série de artigos para construirmos uma aplicação com Angular 2.0 um pouco mais elaborada. Pois bem, aqui está a continuação, vamos montar nosso ambiente.

Lembra que pretendemos criar uma solução usando as seguintes tecnologias?

Nós iremos usar a combinação NodeJS, NPM, Gulp e TSD para resolver nossas dependências de bibliotecas e executar os passos de build e a combinação TypeScript, Bootstrap 4 e Angular 2.0 para construir nossa aplicação; isso no que se refere ao Front-End. Então vamos instalar essas ferramentas:

PS: Esta série de artigos não abrange a explicação sobre as tecnologias usadas para a construção da aplicação, somente o Angular 2.0 de forma introdutória. Portanto siga os links apontados nos próprios textos para saber mais sobre cada uma.

Instalando o NodeJS com NPM

Para este artigo usaremos a versão 4.1.1 do NodeJS e 2.4.14 do NPM. Acesse http://nodejs.org e baixe o instalador para sua versão (aqui estou usando Windows 8 64 bits) e siga o passo básico de instalação (veja imagem abaixo). Isso irá instalar tanto o NodeJS quanto o NPM de uma única vez.

Alternativo

Verifique se a instalação foi finalizada com sucesso executando os comandos abaixo na sua interface de linha de comandos preferida, se conseguir exibir o número da versão das ferramentas, é porque deu tudo certo na instalação.

[gist https://gist.github.com/erlimar/ea61f6b1f1814c29b915 /]

Instalando o Gulp

O Gulp é uma ferramenta de automação de fluxo de trabalho, ou simplesmente um Task Runner, parecido com o Grunt (só que melhor na minha opinião), é escrita em JavaScript, roda no NodeJS e é instalada usando o NPM. Neste artigo usamos a versão 3.9.0 da ferramente, e para instalar execute o seguinte comando:

[gist https://gist.github.com/erlimar/0fb0d2a1b53fdf2a0fe6 /]

Se tudo correr bem com a instalação confira a versão da mesma com o comando:

[gist https://gist.github.com/erlimar/e89ce442264b87e77de0 /]

Se você encontrar algum problema durante a instalação de ferramentas usando o NPM, talvez porque você esteja em uma rede corporativa, tem essa dica que talvez te ajude.

Instalando o TSD

O TSD, ou TypeScript Definition manager for DefinitelyTyped, é uma ferramenta para gerenciar as bibliotecas de definição de tipos de terceiros para TypeScript que usaremos em nossos projetos (o Angular 2.0 é uma biblioteca de terceiro que usaremos em nosso projeto). Não conhece? Dá uma olhada na documentação do TSD ou do próprio TypeScript para maiores detalhes. Aqui nós iremos somente instalar a ferramenta, e isso é feito com o comando abaixo:

[gist https://gist.github.com/erlimar/d6b7e75ceae6081168e4 /]

Confira a versão:

[gist https://gist.github.com/erlimar/330005a6a5c6182bfa7e /]

Pronto

Com isso nosso ambiente está prontinho pra começarmos a codificar.

O código fonte da aplicação construída neste artigo está disponível neste repositório do GitHub, e um exemplo da aplicação em funcionamento está (ou estará – ela vai ser construída durante a escrita dos artigos) disponível neste link.

Bom, por agora é só. Até o próximo artigo onde iremos criar a estrutura de nosso projeto, entender que fluxo de trabalho iremos usar no restante dessa série e construir o “Hello Alice”.

Anúncios

2 comentários sobre “Uma introdução mais elaborada ao Angular 2.0 (parte 2)

Os comentários estão desativados.