Category Archives: Angular

#01 – Ang2 – ng serve

Um pouco de teoria! #1 – Up na App!

Saga: M&M (Mundo Mobile)

Continuando a saga para nos familiarizar com o Angular2. Aprenda agora conceitos e utilização do comando ng serve responsável por levantar nossa webapp. Vamos lá:

Para executar nossa webapp:

ng serve

Em seguida, abra um browser com esta URL:

http://localhost:4200

Este deve ser o resultado, a página de boas-vindas do AngularJS e nossa web app funcionando.

basi_ng_serve

Bastidores

O que o Angular CLI executa por trás do panos:

  • Carrega nossa config a partir do angular-cli.json
  • Executa o Webpack para construir e agregar todo código JS e CSS
  • Inicia o servidor Webpack dev para pré-visualizar o resultado em localhost: 4200

Note que a janela de comandos com o ng serve (levanta a webapp), não está retornando para nosso prompt de comando.

Em vez disso, e porque ele inclui o suporte LiveReload, processo que monitora a pasta src para carregar arquivos. Ou seja, quando ocorrer uma mudança em qualquer arquivo do projeto ele irá automaticamente atualizar a página.

Para encerrar este processo, dê CTRL+BREAK na janela de comandos. Isso irá parar o servidor e encerrar a app.

Pronto! Agora temos uma app sem erros e pronta para continuar a jornada Angular2.

O jogo continua.

Missão cumprida!

#01 – Angular2 – Estrutura da Solução

Um pouco de teoria! #1 – A estrutura do projeto à ser trabalhado!

Saga: M&M (Mundo Mobile)

Um app Angular2 é composto por muitos arquivos e recursos. Vamos aprender hoje sobre esta estrutura e todas as pastas e o tipo de informação que cada uma delas guarda. Vamos lá:

ang2_basico_estrutura

A imagem ilustra essa estrutura inicial mínima aberto no VS Code, ao final desse processo temos essa estrutura de pastas/arquivos necessários para construir um webapp.

Trabalho em equipe

Toda webapp Angular2 deve conter estas pastas/arquivos de configuração:

  • json – guarda todas as informações de dependências do projeto
  • json – guarda as informações sobre como o TS deve gerar JS a partir dos arquivos do projeto, configura o compilador TS
  • config.js – carrega módulos compilados usando o compilador TS (*)

(*) Para módulos anônimos (um módulo por arquivo JS). Ele permite mapear o nome dos módulos para arquivos JS que realmente contêm código JS do módulo.

Estrutura mais real

ang2_basico_estrutura_proj

  • e2e – mantém arquivos de testes e configurações para realizar testes
  • node_modules – mantém os pacotes restaurados a partir das dependências definidas no json
  • src – mantém a pasta app, templates HTML, componentes, módulos, etc.
  • app – mantém o arquivo de módulo, componente, view, arquivo de estilo, testes, etc.
  • ts – inicia a app
  • json, index.html, etc – arquivos necessários para rodar a app
  • json – mantém as referências de todos os pacotes necessários da app

Na pasta:

  • component.css – estilos
  • component.html – html que será exibido na view
  • component.spec.ts – testes
  • component.ts – lógica
  • module.ts – módulo que agrupa components, diretivas, pipes e serviços utilizados

A sintaxe da nomenclatura dos arquivos segue o style guide Angular.

Referências

https://angular.io/guide/styleguide

O jogo continua!

Missão cumprida!!!!