Tutorials

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

menu

Angular

What is Angular?

Angular is a JavaScript framework that developers use to create web applications.

Angula is made up of a template.
Angular is object-oriented.
Note: Those who like Java will like Angular.

(TS: Object class) + (HTML file) + (CSS) + (tests)

Pastas:

- Node_mudules : libraries.
- src : where is the application.
- src/app : where are the components.
- ASSETS : is the public folder for static files.

Arquivos:

- app.routing.modules.ts : Where we declare the application routes.
- app.component.html : Component HTML.
- app.component.scss : Component styling.
- app.component.spec.ts : tests
- app.component.ts : Where you declare the component (html and css path) and program the component.

PORT

By default Angula runs on port 4300.
To change the port, include the port parameter in the angular.json file.

Angular directives look like React Hooks.

Install Angular

1º Install 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