top of page

Nessa primeira aula vamos elencar algumas vantagens do angular 2, instalar e configurar o windons para o nodes e o npm e definir os pacotes de dependencias do projeto.

​

Por que Angular 2?

​

Pontos positivos:

​

1 - Angular 2 é mais rápido.

2 - Substituição dos controles e escopo por componentes.

3 - Diretivas mais simples.

4 - Sintaxe intuitiva para fazer data binding.

5 - Service virou classe

6 - Typescript transpile in java script (posso transformar em js no browser, ou transformar antes de ir para o browser(preferível)).

​

Ponstos Negativos:

As ferramentas necessárias são complicadas de configurar

​

obs: O que é transpiling? 

Primeiro precisamos da definição de compiling, que é termo geral para pegar código escrito em uma linguagem e transforma-lo em outra linguagem.

Já transpiling é termo específico para pegar um código escrito em uma linguagem e transforma-lo em outra linguagem que tem um nível similar de abstração. Ou seja, transpiling é um compiling para linguagem com nível de abstração similar.

​

Nosso objetivo principal será construir uma aplicação simples em typeScript, e estabelecer um ambiente de desenvolvimento.

​

Passo a passo para construir o app:

 

1- Instalar o Nodes.js

2 - Primeiro: Criar a estrutura de pastas do projeto, definir os pacotes de dependências.

3 - Segundo: Criar componente

4 - Terceiro: Criar modulo angular

5 - Quarto: Adicionar main.ts, identificando o componente mestre do angular

6 - Quinto: Adicionar o index.html, a página web que vai abrigar a aplicação.

7 - Sexto: Construa e rode a aplicação

8 - Faça algumas mudanças na aplicação

9 - Empacotar a aplicação

​

Instalar o Nodes.js -->

Pré requisitos: Nodes versão 4.x.x e Npm versão 3.x.x

​

Eu já tinha o nodes instalado na versão 4.x.x(pré-requisito).

Mas meu npm estava na versão 2.x.x, e o pré-requisito é versão 3.x.x

Usando o windows, tive que entrar como administrador no prompt de comando, na pasta nodesjs e instalar a última versão do npm com o comando: "npm install npm@latest".

Notem que mesmo o npm estando no path do Windows eu não consegui fazer o update do mesmo com -global, o segredo é ir na pasta e fazer o update local, que o path do Windows vai enxergar a nova versão do npm.

​

Se você não tiver o nodes, basta ir no site e efetuar o download . Após o download basta colocar a pasta raiz no path do windons para que o nodes e o npm possam ser acessados de qualquer pasta. Pra ter certeza da versão baixada é só digitar node -v e npm -v no prompt de comando e conferir se as versões são as do pré requisito para o angular 2.

Criar a estrutura de pastas do projeto, definir os pacotes de dependências -->

​

É preciso dar o comando “npm init” para criar o arquivo de configuração e gerenciamento de dependências do projeto chamado package.json . Exemplo de como ele vai ficar no final das configurações:

Notem que ainda temos alguns arquivos de configurações relacionados com typescript, hoje em dia o typescript ainda não é reconhecido pelos browsers e precisamos transforma-lo em javascript. O typescript permite que vc escreva código javascript na forma como foi acostumando quando aprendeu orientação a objetos, e possui um compilador para javascript.

​

Instalando o typeScript:  npm install typescript –g

 

Após instalar o typeScript vc pode usar o comando “tsc” para compilar um arquivo que geralmente está na extensão ts para js.

 

Exemplo, crie arquivo script.ts e execute o comando: tsc --out script.js script.ts

 

As dependências do arquivo typings.json não serão instaladas com o comando npm install, é preciso instalar manualmente.

Use o “npm run typings install” para instalar as dependências.

​

A estrutura de pastas do projeto ficará da seguinte forma:

​

Se você quiser entender melhor o que é cada dependência elencada acima e a sua real necessidade clique no link abaixo para continuar os estudos.

Dependências básicas do angular 2
No mais continuamos na aula 2, até lá!
bottom of page