Angular 2 - Hello World

Existem várias maneiras de começar a usar seu primeiro aplicativo Angular JS.

Uma maneira é fazer tudo do zero, o que é mais difícil e não o preferido. Devido às muitas dependências, torna-se difícil obter essa configuração.
Outra maneira é usar o início rápido do Angular Github. Ele contém o código necessário para começar. Isso normalmente é o que é optado por todos os desenvolvedores e é isso que mostraremos para o aplicativo Hello World.
A forma final é usar o Angular CLI. Discutiremos isso em detalhes em um capítulo separado.

A seguir estão as etapas para colocar um aplicativo de amostra em funcionamento por meio do github.

Step 1 - Vá para o url do github - https://github.com/angular/quickstart

Step 2- Vá para o prompt de comando e crie um diretório de projeto. Este pode ser um diretório vazio. Em nosso exemplo, criamos um diretório chamado Projeto.

Step 3- Em seguida, no prompt de comando, vá para este diretório e emita o seguinte comando para clonar o repositório github em seu sistema local. Você pode fazer isso emitindo o seguinte comando -

git clone https://github.com/angular/quickstart Demo

Isso criará um aplicativo Angular JS de amostra em sua máquina local.

Step 4 - Abra o código no código do Visual Studio.

Step 5 - Vá para o prompt de comando e na pasta do projeto novamente e emita o seguinte comando -

npm install

Isso instalará todos os pacotes necessários para que o aplicativo Angular JS funcione.

Uma vez feito isso, você deve ver uma estrutura em árvore com todas as dependências instaladas.

Step 6- Vá para a pasta Demo → src → app → app.component.ts. Encontre as seguintes linhas de código -

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

E substitua a palavra-chave Angular por World conforme mostrado abaixo -

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'World'; }

Existem outros arquivos que são criados como parte da criação do projeto para o aplicativo Angular 2. No momento, você não precisa se preocupar com os outros arquivos de código porque eles estão incluídos como parte de seu aplicativo Angular 2 e não precisam ser alterados para o aplicativo Hello World.

Discutiremos esses arquivos em detalhes nos capítulos subsequentes.

Note - O Visual Studio Code compilará automaticamente todos os seus arquivos e criará arquivos JavaScript para todos os seus arquivos typescript.

Step 7- Agora vá para o prompt de comando e emita o comando npm start. Isso fará com que o gerenciador de pacotes do Node inicie um servidor web leve e inicie seu aplicativo Angular.

O aplicativo Angular JS agora será iniciado no navegador e você verá “Hello World” no navegador, conforme mostrado na captura de tela a seguir.

Desdobramento, desenvolvimento

Este tópico se concentra na implantação do aplicativo Hello world acima. Por ser um aplicativo Angular JS, ele pode ser implantado em qualquer plataforma. Seu desenvolvimento pode ser em qualquer plataforma.

Nesse caso, ele estará no Windows usando o código do Visual Studio. Agora, vamos examinar duas opções de implantação.

Implantação em servidores NGNIX no Windows

Observe que você pode usar qualquer servidor da web em qualquer plataforma para hospedar aplicativos Angular JS. Nesse caso, tomaremos o exemplo do NGNIX, que é um servidor da web popular.

Step 1 - Baixe o servidor da web NGNIX a partir do seguinte url http://nginx.org/en/download.html

Step 2- Após extrair o arquivo zip baixado, execute o componente exe nginx que fará com que o servidor web seja executado em segundo plano. Você poderá então ir para a página inicial no url -http://localhost

Step 3 - Vá para a pasta do projeto Angular JS no Windows Explorer.

Step 4 - Copie a pasta Project → Demo → node-modules.

Step 5 - Copie todo o conteúdo da pasta Projeto → Demo → src.

Step 6 - Copie todo o conteúdo para a pasta nginx / html.

Agora vá para o URL - http://localhost, você verá o aplicativo hello world conforme mostrado na captura de tela a seguir.

Configurando no Ubuntu

Agora vamos ver como hospedar o mesmo aplicativo hello world em um servidor Ubuntu.

Step 1 - Emita os seguintes comandos em seu servidor Ubuntu para instalar o nginx.

apt-get update

O comando acima irá garantir que todos os pacotes do sistema estejam atualizados.

Uma vez feito isso, o sistema deve estar atualizado.

Step 2 - Agora, instale o GIT no servidor Ubuntu emitindo o seguinte comando.

sudo apt-get install git

Feito isso, o GIT será instalado no sistema.

Step 3 - Para verificar o git versão, emita o seguinte comando.

sudo git –version

Step 4 - Instale npmque é o gerenciador de pacotes do nó no Ubuntu. Para fazer isso, emita o seguinte comando.

sudo apt-get install npm

Uma vez feito, npm será instalado no sistema.

Step 5 - Para verificar o npm versão, emita o seguinte comando.

sudo npm -version

Step 6 - Em seguida, instale nodejs. Isso pode ser feito por meio do seguinte comando.

sudo npm install nodejs

Step 7 - Para ver a versão do Node.js, basta emitir o seguinte comando.

sudo nodejs –version

Step 8 - Crie uma pasta de projeto e baixe o projeto github starter usando o seguinte comando git.

git clone https://github.com/angular/quickstart Demo

Isso fará o download de todos os arquivos do sistema local.

Você pode navegar pela pasta para ver se os arquivos foram baixados com sucesso do github.

Step 9 - Em seguida, emita o seguinte comando para npm.

npm install

Isso instalará todos os pacotes necessários para que o aplicativo Angular JS funcione.

Uma vez feito isso, você verá todas as dependências instaladas no sistema.

Step 10- Vá para a pasta Demo → src → app → app.component.ts. Use o editor vim se necessário. Encontre as seguintes linhas de código -

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'Angular'; }

E substitua a palavra-chave Angular por World, conforme mostrado no código a seguir.

import { Component } from '@angular/core';  

@Component ({ 
   selector: 'my-app', 
   template: '<h1>Hello {{name}}</h1>'; 
}) 
export class AppComponent { name = 'World'; }

Discutiremos esses arquivos em detalhes nos capítulos subsequentes.

Step 11- Em seguida, instale o servidor lite que pode ser usado para executar o aplicativo Angular 2. Você pode fazer isso emitindo o seguinte comando -

sudo npm install –save-dev lite-server

Uma vez feito isso, você verá o status de conclusão. Você não precisa se preocupar com os avisos.

Step 12- Crie um link simbólico para a pasta do nó por meio do seguinte comando. Isso ajuda a garantir que o gerenciador de pacotes do nó possa localizar a instalação do nodejs.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Step 13- Agora é hora de iniciar o aplicativo Angular 2 por meio do comando npm start. Isso criará primeiro os arquivos e, em seguida, iniciará o aplicativo Angular no servidor lite que foi instalado na etapa anterior.

Emita o seguinte comando -

sudo npm start

Uma vez feito isso, você verá o URL.

Se você acessar a URL, verá agora o aplicativo Angular 2 carregando o navegador.

Implantar nginx no Ubuntu

Note- Você pode usar qualquer servidor da web em qualquer plataforma para hospedar aplicativos Angular JS. Nesse caso, tomaremos o exemplo do NGNIX, que é um servidor da web popular.

Step 1 - Emita o seguinte comando em seu servidor Ubuntu para instalar o nginx como um servidor web.

sudo apt-get update

Este comando irá garantir que todos os pacotes do sistema estejam atualizados.

Uma vez feito isso, o sistema deve estar atualizado.

Step 2 - Agora emita o seguinte comando para instalar nginx.

apt-get install nginx

Uma vez feito isso, o nginx será executado em segundo plano.

Step 3 - Execute o seguinte comando para confirmar que o nginx serviços estão em execução.

ps –ef | grep nginx

Agora, por padrão, os arquivos do nginx são armazenados na pasta / var / www / html. Portanto, conceda as permissões necessárias para copiar seus arquivos Hello World para este local.

Step 4 - Emita o seguinte comando.

sudo chmod 777 /var/www/html

Step 5 - Copie os arquivos usando qualquer método para copiar os arquivos do projeto para a pasta / var / www / html.

Agora, se você navegar até o URL - http://192.168.1.200/index.html você encontrará o aplicativo Angular JS do Hello world.

↰ Previous page Next page ↱