Tutoriais

https://vvcestudio.com.br/pt/tutorial/javascript/angular/

menu

Angular

O que é Angular?

O Angular é um framework JavaScript que os desenvolvedores usam para criar aplicações web.

Angula é formado por template.
Angular é orientado a objeto.
Nota: Quem gosta de Java vai gostar de Angular.

Todo componente do Angula é formado por 4 arquivos:
(TS: Classe do objeto) + (Arquivo HTML) + (CSS) + (testes)

Pastas:

- Node_mudules : bibliotecas.
- src : onde fica a aplicação.
- src/app : onde ficam os componentes.
- ASSETS : é a pasta pública de arquivos estáticos.

Arquivos:

- app.routing.modules.ts : Onde declaramos as rotas da aplicação.
- app.component.html : HTML do componente.
- app.component.scss : Estilização do componente.
- app.component.spec.ts : testes
- app.component.ts : Onde declara o componente(caminho do html e css) e programa o componente.

PORTA

Por padrão o Angula roda na porta 4300.
Para mudar a porta inclua o parâmetro port no arquivo angular.json.

Diretivas do Angular parecem com os Hooks do React.

Instalando Angular

1º Instale o NodeJS
2º Instale a CLI do Angular globalmente no seu computador.

Instale Angular

x

$ npm install -g @angular/cli
ou
$ sudo npm install -g @angular/cli
ou para instalar uma versão específica
$ sudo npm install -g @angular/cli@17

3º Verifique a versão do angular que foi instalada.

Mostrar versão

x

$ ng version
ou
$ ng -v

4º Criar um novo projeto

Criar projeto

x

$ ng new nome_do_projeto
Ou criar um projeto já com server site render
$ ng new –ssr

Gostaria de ativar o preenchimento automático? Isso configurará seu terminal para que pressionar TAB enquanto digita comandos Angular CLI mostrará opções possíveis e argumentos de preenchimento automático. (Ativar o preenchimento automático modificará os arquivos de configuração em seu diretório inicial) (y/n)
Y
Você gostaria de compartilhar dados de uso de pseudônimos sobre este projeto com a equipe Angular
no Google de acordo com a Política de Privacidade do Google em https://policies.google.com/privacy. Para mais detalhes e como alterar esta configuração, consulte o diretório) (y/n)
N
Escolha o tipo de estilização [CSS/SCSS/Sass/Less]
SCSS
Do you want to enable Server-Side Rendering SSR (y/n)
Y

5º Entre no diretório do projetocriado

Entrar no projeto

x

$ cd nome_do_projeto

6º Iniciar o servidor WEB local:

Iniciar projeto

x

$ ng server
ou
$ npm run start

Para rodar o projeto em outra prota:

Rodar na Porta 333

x

$ ng serve --port 3333 -o

Build

Execute `ng build` para compilar o projeto. Os artefatos de construção serão armazenados no diretório `dist/`.

teste unitárioi

x

$ ng build

Criar um novo componente

Criar componente

x

$ ng g c pasta/carrocel ou $ ng generate component pasta/carrocel

Incluir componente a página

Inclua a tag <app-novocomponente> no arquivo app.component.html
Inclua o novo componente no app.component.ts. na propriedade import.

Importar novo componente

x

@component({import:[novocomponente]})

Rotas

Para criar uma nova rota. Inclua um componente a uma rota, no arquivo app.routes.ts.

app.routes.ts

x

export const routes: Routes = [
{path:'', component: HomeComponent},
{path:'angular', component: AngularComponent},
{path:'backup', component: BackupangularComponent},
{path:'games', component: GamesComponent},
{path:'game', component: GamesComponent},
{path:'eu', component: EuComponent}
];

Testes unitários

Execute `ng test` para executar os testes de unidade via [Karma](https://karma-runner.github.io).

teste unitárioi

x

$ ng test

end-to-end tests

Execute `ng e2e` para executar os testes ponta a ponta (end-to-end) através de uma plataforma de sua escolha.
Para usar este comando, você precisa primeiro adicionar um pacote que implemente recursos de teste ponta a ponta (end-to-end).

testes ponta a ponta

x

$ ng e2e