Começando os trabalhos

• Com o arquivo do projeto descompactado, vamos dar uma olhada em sua estrutura.

  • Ele possui as pastas server e client.
  • Vimos no exercício obrigatório do capítulo que a pasta server contém o código completo do nosso servidor web que será usado pela nossa aplicação Angular.
  • Inclusive é na pasta client que ficarão todos os arquivos do nosso projeto Angular.
  • Sendo assim, focaremos apenas na pasta client, ignorando por enquanto a pasta server.

• Dentro da pasta alurapic/client temos o arquivo index.html, a página principal da aplicação.

  • Nela já importamos todos os scripts necessários do Angular e também já importamos os css's do Bootrap para nos auxiliar com o visual da nossa aplicação.
  • Os scripts que devem ser importados e o conteúdo de outros arquivos de configuração que veremos são disponibilizados na própria documentação do Angular, não é necessário decorá-los.

• Além da configuração em index.html, temos os arquivos package.json, systemjs.config.js, tsconfig.json e typings.json.

  • Não se preocupe agora com esses arquivos, mas saiba que são necessários para construir aplicações com Angular.

• Um ponto importante quando usamos Angular 2 é que você não baixará mais seus arquivos do site do próprio Angular, mas do framework através do npm, o gerenciador de pacotes do Node.js que já vem com sua instalação. Assim, o uso da plataforma Node.js já não é opcional com Angular, mas uma exigência.

• Mas como o npm saberá quais arquivos baixar? Veja que dentro da pasta alurapic/client há o arquivo package.json. Editando o arquivo vemos a seguinte declaração:

{
  "name": "client",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc:w": "tsc -w",
    "start": "npm run tsc:w",
    "typings": "typings"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "typescript": "^2.0.2",
    "typings":"^1.3.2"
  }
}

• As dependências baixadas pelo npm ficam dentro da pasta alurapic/client/node_modules.

  • No entanto, apesar do projeto já ter todos os scripts do Angular, as dependências listadas em devDependencies de package.json precisam ser baixadas em sua máquina.
  • A razão disso é que elas são compiladas em suas máquinas.
  • Caso tivéssemos disponibilizado as duas com o projeto, poderiam não funcionar em sua máquina, se ela fosse diferente da que eu usei ao criar o projeto.

• Contudo, antes de baixá-las, vamos subir nosso servidor web para que possamos acessar a aplicação através de http://localhost:3000.

  • Para isso, abra seu terminal favorito e entre na pasta alurapic/server. Dentro dela, execute o seguinte comando:

    npm start
    

• Este comando fará com que o seu servidor seja iniciado permitindo acessar o conteúdo da pasta alurapic/client através do endereço http://localhost:3000.