Leia também o artigo:
Home / Angular / Angular

Angular

Sobre

Instalação

Para a instalação do Angular vamos precisar de:

  • NodeJs (ver a instalação nesse artigo).
  • AngularCli (através do NPM).
    • comando: npm install -g @angular/cli (instalação)
    • glossário: -g: global
    • comando: ng v (verificar os pacotes instalados)

Dica: VS Code – ferramenta para a escrita do código-fonte.
https://code.visualstudio.com/download

Gerando uma aplicação

ng new nome-aplicacao –prefix

  • Na linha de comando, criar primeiro o diretório(workspace) onde deseja gerar a aplicação, e entrar nele, depois executar o comando acima (ele irá criar outro diretório com o nome da aplicação).
  • –prefix: utilizado na frente de cada componente criado por nós.
  • Exemplo: ng new nintendo-academy –prefix=nad

Para testar o que foi criado:

  • entre no diretório da aplicação pela linha de comando, e execute o comando:
    • ng serve
    • acessar: http://localhost:4200

Alguns arquivos do projeto:

  • package.json: segue a estrutura do node, arquivo de configuração da aplicação onde vão ter todas as dependências do projeto;
  • angular.json: configurações gerais do projeto como diretórios, scripts, testes, etc.
  • styles.css: configuração global de estilos.
  • polyfills.ts: incluir scripts que dão suporte a funcionalidades novas a navegadores antigos.

Componentes:

  • São pequenas partes independentes e reusáveis.
  • Em angular, são classes que tem determinado ciclo de vida.
  • Possuem um template para definir a aparência.
  • Possuem um selector (tag) para ser usada em outras partes da aplicação.
  • resumindo, são elementos personalizados.

Criando nosso primeiro componente:

  • dentro do diretório do projeto.
  • ng generate component nome-componente –spec=false (ou)
  • ng g c nome-componente –spec=false
  • exemplo: ng g c header –spec=false
  • criado em src>app>nome-componente>arquivos-do-componente
  • inclui a existência do componente novo no app.module.ts
  • personalizar o html do componente.
  • chamar a tag do componente no html principal da aplicação (app.component,html) – tag do nosso exemplo: prefix+nome-componente = nad-header

Sobre Haylson Martins

Me chamo Haylson Martins, formado em Sistemas de Informação, trabalho com T.I de forma geral desde 2002 com suporte depois na área de negócio e treinamentos, e com Desenvolvimento para Sistemas Web desde 2010 com linguagem principal o Java. Amo tecnologia, amo aprender coisas novas, gosto de ensinar embora não seja essa a minha pretensão. Por meio desse blog pretendo reforçar o que ando aprendendo e estudando de outras linguagens e tecnologias, e principalmente como uma espécie de bloco de notas para consultas posteriores e quem sabe também ajude outras pessoas que estudam e têm as mesmas dúvidas que já tive ou que ainda tenho. Vamos começar?

Deixe uma resposta

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