Curso Angular 2 – Aula 1: Criando a primeira aplicação

Curso básico gratuito de Angular 2 | kazale.comVamos começar a estudar o Angular 2 criando uma aplicação do zero na prática, pois assim desde o início você já estará em contato com este excelente framework e já conseguirá vê-lo em ação!

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

1. Instalando o NPM

O primeiro passo antes de começarmos será instalar o NPM (Node Package Manager), que é o gerenciador de pacotes que utilizaremos para executar as diversas tarefas em nosso projeto daqui por diante.

Sua instalação é bastante simples, e um vídeo detalhado de como proceder com a instalação pode ser encontrado aqui: https://docs.npmjs.com/getting-started/installing-node.

2. Configurando o NPM na aplicação

Com o NPM instalado, vamos criar um novo diretório para a nossa aplicação:

Em seguida iremos inicializar o NPM em nosso diretório:

O comando acima criará um arquivo chamado package.json no diretório raiz da aplicação, que conterá as informações do projeto.

Edite o arquivo package.json e adicione o seguinte conteúdo nele:

Em ‘scripts’ temos os comandos que executaremos para compilar e inicializar nosso servidor local, e em ‘dependencies’ e ‘devDependencies’ temos informações das bibliotecas a serem incluídas e utilizadas no projeto.

Para baixarmos as bibliotecas devemos executar o seguinte comando:

Esse comando pode levar algum tempo até terminar, e ao término o diretório node_modules será criado na raíz da aplicação.

3. Configurando o TypeScript

Agora chegou a hora de configurar o TypeScript, para isso crie o arquivo tsconfig.json na raiz da aplicação:

Edite o arquivo recém criado e insira o seguinte código nele:

Não entraremos em detalhes sobre as configurações de compilação nesta aula, mas as opções acima são as padrões utilizadas para o TypeScript gerar os arquivos .js a partir dos arquivos .ts que criaremos.

4. Criando o primeiro componente do Angular 2

Agora finalmente criaremos nosso primeiro componente com o Angular 2!

Crie o diretório ‘app’, que conterá nossos arquivos .ts do Angular 2:

Crie o arquivo app/app-component.ts:

Edite o arquivo recém criado e adicione o seguinte conteúdo nele:

Primeiro precisamos importar a anotação ‘Component’ que esta no pacote ‘core’ do Angular 2.

Depois utilizamos a anotação ‘Component’ em uma classe TypeScript, no caso ‘AppComponent’. A anotação ‘Component’ será interpretada pelo Angular 2 no momento da execução.

O atributo ‘selector’ significa o nome da tag HTML que usaremos em nosso HTML, e que será interpretado pelo Angular 2, enquanto que o atributo ‘template’ contém o código HTML que será inserido na página dentro da tag definida em ‘selector’.

Um componente no Angular 2 também é um módulo, e no futuro teremos diversos módulos em nosssas aplicações, o que ajudará a manter o código organizado e fácil de ser testado.

5. Criando o arquivo de inicialização do Angular 2

Agora precisamos criar o arquivo que será responsável por inicializar o Angular 2 quando a página for carregada, para isso crie o arquivo app/boot.ts:

Edite o arquivo recém criado e adicione o seguinte conteúdo nele:

O código acima executa duas tarefas, ele inicializa o Angular 2 chamando a função ‘bootstrap’, e elege o ‘AppComponent’ como o componente pai da aplicação (no futuro teremos mais módulos filhos de ‘AppComponent’).

6. Criando o arquivo index.html

Por fim basta criar o arquivo index.html na raíz de nossa aplicação, arquivo que será executado assim que a página for acessada:

Adicione o seguinte conteúdo nele:

7. Compilando e executando a aplicação

Vamos agora compilar e executar a nossa aplicação, para isso execute o seguinte comando:

Em alguns instantes o navegador será aberto e a seguinte mensagem deverá ser exibida:

Meu primeiro app com o Angular 2!!!

Caso a mensagem não seja exibida, revise o código criado e consulte o anexo no final do artigo.

8. Entendendo o fluxo de execução da aplicação

Agora que criamos nossa primeira aplicação com o Angular 2, vamos entender o que acontece quando a página index.html é carregada no navegador:

1. O SystemJS se encarrega de carregar todos os arquivos .js necessários para a execução da aplicação

2. A função ‘bootstrap’ definida em app/boot.js é chamada

3. A função ‘bootstrap’ então inicializa o componente ‘AppComponent’, que é passado como parâmetro para ela

4. O Angular 2 percorre os elementos HTML da página buscando por tags relacionadas a componentes, e no caso encontra a tag ‘meu-app’

5. O Angular 2 então executa o código do componente ‘AppComponent’, adicionando o conteúdo do atributo ‘template’ à tag HTML ‘meu-app’

9. Estrutura final dos arquivos

Ao término do desenvolvimento teremos os seguintes arquivos em nosso projeto:

10. Anexo 1: Suporte ao ES6

Alguns navegadores mais antigos não oferecem suporte ao padrão ES6 utilizado pelo Angular 2.

Para contornar esse problema, adicione a seguinte linha de código ao arquivo index.html:

11. Anexo 2: Comandos de execução do NPM

O NPM é capaz de executar comandos para compilar e executar nossa aplicação, definidos da seguinte forma:

O comando ‘tsc’ chama o compilador do TypeScript, que é responsável por gerar os arquivos .js utilizados em nossa aplicação.

O comando ‘tsc:w’ também efetua a compilação dos arquivos .ts em .js, porém a flag ‘-w’ faz que ele fique em modo de escuta e sempre que um arquivo .ts for modificado, o compilador é chamado automaticamente.

O comando ‘lite’ cria o servidor que executara a aplicação.

O comando ‘start’ executa de forma concorrente a compilação e o inicia o servidor, ambos em modo de escuta, o que significa que sempre que um arquivo for modificado a página sera recarregada automaticamente!

Clique para fazer o download dos arquivos da aula.

29 comentários em “Curso Angular 2 – Aula 1: Criando a primeira aplicação

  1. Muito legal sua aula. Eu nunca utilizei angular, já vi alguma coisa sobre o angular 1, mas não me sentir encorajado utilizar. Mas agora estou em um projeto que não tem jeito, tenho que construir a aplicação de forma mais rica. E tenho duas escolhas, jquery ou angular 😀 então vms aprender esse angular 2. parabéns pela iniciativa.

    1. Olá Fábio, que bom que agora esteja encorajado a aprender o Angular 2.
      Na verdade o Angular 2 trabalha muito bem em conjunto com o jQuery, como por exemplo na utilização de componentes ricos jQuery como calendários, sliders, tabs…

  2. bom dia o meu projeto não rodou, sou iniciante e não sei identificar o problema. Estou colocando o erro apresentado abaixo, se alguém puder ajudar desde já agradeço.

    rmoledo.tty@TTYSICPF01 MINGW64 /c/Users
    $ npm start
    npm ERR! Windows_NT 6.1.7601
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “start”
    npm ERR! node v6.2.2
    npm ERR! npm v3.9.5
    npm ERR! path C:\Users\package.json
    npm ERR! code ENOENT
    npm ERR! errno -4058
    npm ERR! syscall open

    npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\package.json’
    npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\package.json’
    npm ERR! enoent This is most likely not a problem with npm itself
    npm ERR! enoent and is related to npm not being able to find a file.
    npm ERR! enoent

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Users\npm-debug.log

    1. Olá Renato,

      Olhando para a mensagem ‘npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\package.json’’, ele diz não ter encontrado o package.json, que é o arquivo utilizado pelo NPM para baixar as dependências do projeto.

      O que você deverá fazer é executar o ‘npm start’ dentro do diretório do seu projeto, mas antes lembre-se de executar o ‘npm install’ e ‘npm run tsc’.

  3. Parabéns pela aula, excelente!!!

    Eu fiquei com duas dúvidas referente ao arquivo package.json, no dicionario da chave “scripts”, a chave é o script e o valor é o comando (exemplo “tsc:w”: “tsc -w”, chave[script]: valor[comando] ) ? A outra pergunta é, em que momento esses scripts são executados, quando eu dou o comando npm start?

    Grato

    1. Obrigado Rafael!

      Sim, a chave scripts funciona exatamente como você descreveu, chave seria o alias para o comando e o valor é o comando que será executado.

      Eu recomendo a execução do ‘npm start’ sempre que você começar a trabalhar com seu projeto, pois esse comando executa a aplicação, e também fica em modo de escuta por alterações nos arquivos compilando-os novamente automaticamente.

  4. Olá Kazale,

    Meu projeto rodou mas não alterou a label como diz no exemplo.
    Quando abri o inspetor de elemento notei um erro dentro do angular2-polyfill.js, dele não ter o Javacript definido. Será isso que está ocasionando a não troca da mensagem?
    Aguardo resposta.

    Grato.

    1. opá…tdo bem Allan? Estou com o mesmo erro e não encontrei uma solução, vou aproveitar seu tótpico. Como conseguiu resolver esse problema???

      E parabéns Kazale, melhor curso de Angular2 ptbr que encontrei até agora….

      attt

  5. Exelente curso,mto claro e objetivo, trabalho a mais de uma década com Java, já utilizei diversas tecnologias e neste momento pretendo entrar de cabeça em angular e node.
    Parabéns pela iniciativa, com certeza ajudará a mim e muitos outros a dar os primeiros passos neste novo caminho.

  6. Assisti a primeira aula. Espetacular. Muito bem explicado. As coisas não ficam jogadas. Já procurei bastante coisa sobre angular 2 e em português foi a melhor.
    Obrigado por dividir conosco.

  7. Olá, parabéns pela aula, muito bom.

    Infelizmente tive alguns erros ao baixar as dependências. Estava no diretório da minha aplicação.
    Vou deixar a seguir, se puder me dar uma força, eu agradeço!

    npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
    npm WARN angular2-aula1@1.0.0 No description
    npm WARN angular2-aula1@1.0.0 No repository field.
    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv “F:\\nodejs\\node.exe” “C:\\Users\\Eduardo\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js” “install”
    npm ERR! node v4.5.0
    npm ERR! npm v3.10.7
    npm ERR! path F:\xampp\htdocs\angular2-aula1\node_modules\.staging\accepts-4eee7e6f
    npm ERR! code EPERM
    npm ERR! errno -4048
    npm ERR! syscall rename

    npm ERR! Error: EPERM: operation not permitted, rename ‘F:\xampp\htdocs\angular2-aula1\node_modules\.staging\accepts-4eee7e6f’ -> ‘F:\xampp\htdocs\angular2-aula1\node_modules\engine.io\node_modules\accepts’
    npm ERR! at destStatted (C:\Users\Eduardo\AppData\Roaming\npm\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR! at FSReqWrap.oncomplete (fs.js:82:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename ‘F:\xampp\htdocs\angular2-aula1\node_modules\.staging\accepts-4eee7e6f’ -> ‘F:\xampp\htdocs\angular2-aula1\node_modules\engine.io\node_modules\accepts’
    npm ERR! at Error (native)
    npm ERR! { [Error: EPERM: operation not permitted, rename ‘F:\xampp\htdocs\angular2-aula1\node_modules\.staging\accepts-4eee7e6f’ -> ‘F:\xampp\htdocs\angular2-aula1\node_modules\engine.io\node_modules\accepts’] parent: ‘engine.io’ }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR! F:\xampp\htdocs\angular2-aula1\npm-debug.log

    1. Olá Eduardo,

      parece ser um problema de permissão de acesso, acredito que executando o comando acima como administrador do sistema seja o suficiente para resolver o problema.

  8. Poderia deixar a parte escrita em pdf, para lermos em qualquer lugar e revisar o que foi visto nos vídeos. Estou iniciando a carreira como dev e posso dizer que é difícil encontrar um material que explique o porque de cada sinal, o que cada coisa resulta. Parabéns pelo ótimo compartilhamento e irei assistir todos os vídeos e indicarei aos meus amigos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

11 − 6 =