Angular: One framework – Mobile & desktop

Angular é um framework open source (código aberto) poderoso, que permite o desenvolvimento de aplicações web e mobile, mantido pela Google em parceria com a Microsoft, que introduziu a linguagem Typescript.

O framework não é continuação do Angular 1.x, oficialmente conhecido como AngularJS , ele foi reescrito ,remember #ItsJustAngular. Aplicações em Angular são orientadas a componentes, tudo que existe na aplicação é um componente, podendo ser facilmente reutilizado.

Agora, vamos colocar a mão na massa e criar o nosso primeiro projeto:

Preparando o ambiente de desenvolvimento 

Antes de tudo é necessário preparar o ambiente:

Instalar nodeJS e npm

O npm é o gerenciador de pacotes do node, portanto já vem incluso com o instalador que está disponível em:   https://nodejs.org/

Após a instalação do node é necessária a instalação do angular CLI, abrindo o seu terminal e digitando o comando:

npm install -g @angular/cli

O objetivo do Angular CLI é facilitar o gerenciamento de projetos do framework.

Para verificar se ocorreu tudo bem com a instalação é possível utilizar o comando:
ng -v

Se tudo estiver ok será possível observar essa imagem em seu terminal:

Para criar o primeiro projeto com angular CLI

Acesse o diretório onde deseja criar o projeto e execute o comando:

ng new nome-do-projeto

Seguindo as boas práticas da comunidade angular, o nome do projeto deve ser separado por hífen.

Como no exemplo abaixo o angular CLI cuidará da criação de toda a estrutura padrão do projeto, criando os arquivos iniciais e instalando todos os pacotes do npm que são necessários, incluindo as bibliotecas do angular juntamente com suas dependências, podendo demorar alguns minutos para concluir esse processo.

ng new primeiro-projeto

Após a finalização desse passo já é possível abrir o diretório onde foi criado o projeto e visualizar toda a estrutura criada pelo Angular CLI.

Para verificar a saída em seu browser utilize o comando
ng serve

O node iniciará um servidor, que observa seus arquivos e recria o aplicativo a cada alteração.

Usando a opção –open (ou apenas -o) abrirá automaticamente o seu navegador em
http://localhost:4200

ng serve –open

A saída será como a imagem, pois, ao criar a estrutura do projeto, um template padrão é gerado no componente raiz da aplicação, com o nome app.component.html

O angular é baseado em componentes, portanto, para criar um novo componente podemos utilizar o comando:
ng generate component primeiro
ou para facilitar:

ng g c primeiro

“primeiro” é o nome do componente.
O Angular CLI criará os novos arquivos e atualizará o módulo raiz.

Criado o componente já é possível utilizá-lo. 

Abrindo o diretório “primeiro” é possível localizar um arquivo typescript com o nome “primeiro.component.ts”

O selector é a tag que utilizaremos para chamar esse componente, neste caso a tag será ‘app-primeiro’.

Podemos mudar o  template em “primeiro.component.html”

Para utilizar o nosso primeiro componente navegaremos até o nosso template raiz “app.component.html “ e utilizar a tag que estava no selector.

Salvando as alterações o node automaticamente realiza o rebuild da aplicação e mostra o resultado.

Primeiro componente criado. 

A documentação oficial do Angular está disponível em https://angular.io/