Gerando a aplicação
Vamos agora explorar um pouco mais os comandos do angular cli
Já vimos que para criar a estrutura de uma aplicação em angular utilizamos o comando:
ng new primeraAppAngular
importante criar aplicação já definindo um arquivo de rotas que iremos utilizar mais a frente. Para tanto utilizamos o comando:
ng new primieraAppAngular --routing
Desta forma teremos a seguinte estrutura:
note o arquivo (app-routing.module.ts), nele serão configuradas as rotas dos componentes criados.
Podemos utilizar também o ng new em conjunto com outras opções:
ng new nomeApp <options...>
| opção |
alias |
Descrição |
| --dry-run |
-d |
Roda o comando, porém não grava os arquivos no diretório.
Esta opção é interessante quando queremos ter um prévia do que será gravado em disco |
| --skip-install |
-si |
Roda o comando, porém não baixa os pacotes de dependências do projeto, caso use esta opção depois será necessário utilizar o comando "npm install", para que as dependências sejam instaladas |
| --skip-git |
-sg |
não inicializa o repositório local do git |
| --skip-tests |
-st |
gera a aplicação, menos os arquivos "spec.ts" dos testes |
| --skip-comit |
-sc |
não efetua o primeiro commit no repósitorio git local |
| --directory |
-dir |
define o diretório onde a aplicação será criada |
| --source-dir |
-sd |
define o subdiretório onde serão criados os códigos fonte da aplicação |
| --style |
|
tipo de extensão dos arquivos de estilo, padrão "css" |
| --prefix |
-p |
prefixo que será usado por todos os componentes |
Pacotes do projeto (package.json)
No arquivo package.json temos as configurações para o gerenciador de pacotes do node (npm) definimos os scripts (node tasks), bibliotecas que serão utilizadas na aplicação (seção dependencies) e também as bibliotecas utilizadas para o desenvolvimento (devDependencies)
Scripts
aqui temos os scripts que poderão ser executados pelo npm em nossa aplicação
"scripts": {
"ng": "ng",
"start": "ng serve", //roda a aplicação em um servidor web
"build": "ng build", //compila a aplicação
"test": "ng test", //roda os testes unitários
"lint": "ng lint", //roda o lint para verificar os padrões de código
"e2e": "ng e2e" //roda os testes end to end
},
Dependencies
nesta seção definimos as bibliotecas que estarão presentes na aplicação.
Aqui temos o nome da biblioteca e também a versão.
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
Importante notar que o simbolo "^" define a
major version, caso tivermos "^5.0.0", siginifica que o npm pode utilizar qualquer versão que combine com 5.x.x,
Já o simbolo "~" define a minor version, ou seja deve se tivermos algo como "~2.4.1", significa que o npm pode utilizar as versões que combine com 2.4.x.
Caso nenhum dos símbolos estiver presente, significa que o npm irá utilizar a versão exata.
DevDependencies
Nesta seção temos as bibliotecas necessárias para desenvolver a aplicação, estas bibliotecas não são incluídas no deploy da aplicação, são necessárias para o desenvolvimento aplicação, como por exemplo compiladores, loaders, testes unitários, etc.
Gerando código dentro da aplicação
Aqui alguns comandos que vão auxiliar muito, na criação de código dentro da aplicação em angular, pestes comandos auxiliam a desenvolver de forma bem rápida e prática os stubs de código para gerar classes, componentes, diretivas, pipes, módulos entre outros
ng generate <comando> <opções>
ng g <comando> <opçoes>
comando
ng generate |
alias
ng g |
Descrição |
| component |
ng g c |
Cria um componente
Exemplo:ng g s nomeComponente
|
| class |
ng g cl |
Cria uma classe
Exemplo:ng g cl nomeClasse |
| directive |
ng g d |
Cria uma diretiva
Exemplo:ng g d nomeDiretiva |
| enum |
ng g e |
Cria um enum
Exemplo:ng g e nomeEnum |
| guard |
ng g guard |
Cria um guard, utilizado pra proteger rotas
Exemplo:ng g guard nomeGuard |
| interface |
ng g i |
Cria uma interface
Exemplo:ng g i nomeInterface |
| module |
ng g m |
Cria um modulo, uma opção importante aqui é criar o modulo já especificando também a um arquivo de rota.
Exemplo: ng g m nomeModulo --routing |
| pipe |
ng g p |
Cria um pipe |
| service |
ng g s |
Cria um serviço
Exemplo:ng g s nomeServico
|
uma opção importante que pode ser usada para estes comandos de geração de código é o dry run(--dry-run ou -d), assim podemos ter uma visão dos arquivos que serão gerados sem que sejam realmente gravados em disco, só depois executar o comando sem opção:
exemplo:
ng g c nomeComponente -d
Criando componente
Como exemplo vamos criar o componente "about" em nossa aplicação, primeiro com a opção -d, para verificar o que será gerado
Note que o cli exibe a mensagem "Run with "dry run" no changes were made"
agora executando o comando para que os dados sejam gravados em disco
ng g c about
Desta vez os arquivos são gravados em disco.
o que podemos verificar abrindo nossa aplicação no visual studio code
O cli cria por padrão o arquivo typescript do componente, o arquivo css, o arquivo com o template html, e o arquivo spec.ts para o teste unitário.
Para verificar no browser o componente que acabamos de criar, temos que adicionar uma rota para o componente, editando o arquivo "app-routing.module.ts".
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [{path:'about', component:AboutComponent}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
agora podemos executar nossa aplicação e verificar que o componente esta funcionando
ng serve -o
digitamos no barra de endereço http://localhost:4200/about
no final da página podemos ver que a rota funcionou corretamente exibindo o texto "about works!"