Criando uma aplicação em agular

23 setembro 2017 Adilson-de-Almeida-Pedro Angular

Olá pessoal!

Hoje vamos iniciar nossa jornada em Angular 4.0.
Neste primeiro tutorial, vamos aprender a utilizar o angular cli para criar e executar a aplicação angular template no browser

 

Instalação

Instalando o Node.js

Para começar vamos criar uma aplicação bem no estilo "Hello world" para explorar o básico sobre este fantásctico framework e também conhecer sobre a interface de linha de comando o angular cli.

Antes de mais nada, precisamos instalar o node.js (https://nodejs.org)

 

Após a instalação, para verificar que o node está instalado corretamente na máquina digite o seguinte comando:

node -v

A instalação do node acompanha o gerenciador de pacotes "NPM", que será utilizado para baixar o próprio angular e também os outros pacotes necessários

Para verificar se o npm está instalado corretamente, podemos verificar digitando o comando:

npm -v

Instalação angular cli

Agora que temos o node e o npm instalados, poderemos baixar o angular cli globalmente na máquina, digite no console:

npm install -g @angular/cli



 Finalmente para verificar que o ANGULAR CLI está devidamente instalado, podemos digitar no console:

ng -v

Criando nossa primeira aplicação em angular

Agora vamos criar nossa aplicação de exemplo, utilizando a interface de linda de comando.

Abra o console e digite:

ng new primeriaAppAngular

O angular cli irá então iniciar a criação da nossa app e instalar os pacotes necessários.

Isso levará alguns minutos, dependendo da conexão com a internet, pois a ferramenta, através do npm, irá baixar e instalar todas as dependências da aplicação.

Ao final será exibida a mensagem "Project 'primeiraAppAngular' successfully created".

Rodando a aplicação no bowser

Para executar nossa aplicação, o angular cli disponibiliza um servidor web para que possamos testar nossa aplicação.

Devemos então mudar para o diretório da nossa aplicação:

cd primeiraAppAngular

agora podemos executar o comand:

ng serve -o


o angular cli, utiliza o webpack para compilar a aplicação, isso mesmo "compilar", pois o angular utiliza como linguagem o typescript, o que veremos mais a frente em outros tutoriais.

O webpack que está configurado internamente no angular cli, através de seus loaders, irá então transformar o typescript em javascript para que o browser possa assim interpretar o código da nossa aplicação.

a opção "-o" do comando "ng serve", abre uma instancia do navegador com a nossa aplicação rodando

 

E aí está! Nossa primeira aplicação em angular está rodando.

Alguns comandos básicos

A interface do angular cli expõe outros comandos que veremos no próximo tutorial, mas vamos conhecer agora alguns que podemos utilizar.

Digitando "ng help" no console, será exibida a lista dos comandos.
Entre eles:
- ng new nomeApplicacao : cria uma aplicação angular padrão
- ng generate ou ng g: gera stubs de código em nossa aplicação
o comando ng generate pode ser usado para criar:

  • classe - ng g class nomeClasse;
  • component - ng g c nomeComponent;
  • directive - ng g d nomeDiretiva;
  • pipe - ng g p nomePipe;
  • enum - ng g e nomeEnum;
  • guard - ng g guard nomeGuard;
  • interface - ng g interface nomeInterface;

Próximas etapas:
 - Explorando a interface de comando (angular/cli)
 - Components
 - Directives
 - Pipes
 - Bindings
 - Criando Rotas 
 - Formulários (template forms)
 - Formulários (reactive forms)
 - Services
 - Consumindo API (web api .net)
 - Generics com typescript

Tags :

Comentar

Loading