 |
|
||||
Você está aqui: Angular ::: Dicas & Truques ::: Angular CLI (Interface de Linha de Comandos do Angular) |
Como criar sua primeira aplicação Angular usando o Angular CLI (Interface de Linha de Comando do Angular)Quantidade de visualizações: 2215 vezes |
|
Em outras dicas e truques de Angular (e AngularJS), eu mostrei como instalar e testar o Angular CLI, a interface de linha de comando do Angular. Agora mostrarei, passo-a-passo, como criar sua primeira aplicação Angular usando o CLI. Trata-se de uma aplicação básica, mas que você poderá usar como ponto de partida para os seus estudos. Então, vamos começar. Crie uma pasta chamada estudos_angular no local de sua preferência. Na minha máquina eu coloquei em "C:\estudos_angular". Agora, abra uma janela de terminal, navegue até este diretório e dispare o comando abaixo: c:\docs_osmar>cd c:\estudos_angular c:\estudos_angular>ng new escola Aqui nós estamos pedindo para o comando ng do Angular CLI criar um novo projeto com o nome escola. Vá pegar um cafezinho. Este procedimento vai levar alguns longos minutos. Finalizada a criação e instalação da aplicação, vamos disparar os comandos abaixo: c:\estudos_angular>cd escola c:\estudos_angular\escola>ng serve --open A flag --open, fornecida para o comando ng, indica que o navegador web padrão deverá ser executado e abrir a aplicação no endereço http://localhost:4200. E é justamente isso que temos na figura abaixo:  Veja que a aplicação, mesmo gerada automaticamente, está 100% funcional e podemos ir adiante e "brincar" com os arquivos gerados pelo Angular CLI. Usando o seu editor de código favorito, vá até o diretório "C:\estudos_angular\escola\src\app" e você verá os seguintes arquivos: app-routing.module.ts app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts Em geral uma aplicação Angular é dividida em componentes, e aqui nós temos apenas o componente AppComponent, cuja classe está definida no arquivo app.component.ts, com sua apresentação HTML no arquivo app.component.html e seus estilos CSS no arquivo app.component.css. Vamos "brincar" um pouco agora? Abra o arquivo app.component.ts e altere o seu código para a seguinte versão:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
titulo = "Estudos Angular CLI";
Agora exclua todo o conteúdo do arquivo app.component.html e insira o código abaixo:
<h1>{{titulo}}</h1>
<p>{{texto}}</p>
Pronto! É só isso. Se o servidor ainda estiver rodando, o resultado de nossas alterações já deve estar aparecendo lá, caso contrário dispare o comando ng serve --open. A página de sua aplicação deve estar parecida com:  Agora é só continuar acompanhando as nossas dicas e truques de Angular e Angular CLI. Bons estudos. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de Angular |
Dicas e truques de outras linguagens |
|
PHP - Programação Orientada a Objetos em PHP - Como passar um objeto de uma classe para uma função PHP |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
