Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naopeke/angular-practice
https://github.com/naopeke/angular-practice
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/naopeke/angular-practice
- Owner: naopeke
- Created: 2023-12-06T16:11:59.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-11T09:57:37.000Z (about 1 year ago)
- Last Synced: 2023-12-12T09:29:25.952Z (about 1 year ago)
- Language: TypeScript
- Size: 493 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular-practice
```
npm i -g @angular/[email protected]
```
```
npm uninstall -g @angular/cli
```
```
npm cache clean --force
```
```
ng new my-app(nombre de aplicacion)
```
**MODULOS CON CLI**
```
ng generate module nombre-del-modulo
ng g m nombre-del modulo
```
**MODULOS**
```
import{ NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { MiComponente } from './mi-componente.component'
@NgModule({
declarations: [MiComponente],
imports: [CommonModule],
exports: [MiComponente]
})
export class MiModulo {}
```
**COMPONENTS CON CLI**
```
ng generate component nombre-del componente
ng g c nombre-del componente
```
**4 archivos**
__.component.ts
__.component.html
__.component.css
__.component.spec.ts
```
npm start
```
**Actively supported versions**
https://angular.io/guide/versions
Node.js
```
nvm install 18.10.0 // to install the version of node.js I wanted
nvm use 18.10.0 // use the installed version
```
Angular (Downgrade @angular-devkit/build-angular)
```
npm list @angular-devkit/build-angular
npm install @angular-devkit/[email protected] --save-dev
```
http://localhost:4200/
**親のコンポーネント作成（myApp-src-app内トップ）**
```
ng g c padre
```
```
app.module.ts
@NgModule({
declarations: [
AppComponent,
PadreComponent
// added automatically
]
})
```
**INPUT**
```
//Componente hijo
@Input() datoEntrada: string;
//Componente padre
//Componente padre
valorDesdePadre = "Hola, mundo!"
//Componente hijo template
{{ datoEntrada }}
```
**OUTPUT**
```
//Componente hijo
@Output() messageEvent = new EventEmitter();
message: string = '';
sendMessage(){
this.messageEvent.emit(this.message)
}
//Componente hijo
Mensaje:
[(ngModel)]="message" />
Enviar Mensaje
//Componente padre
receivedMessage: string = '';
receiveMessage(message: string){
this.receivedMessage = message;
}
//Componente padre
Mensaje recibido en el padre {{ receivedMessage}}
```
**Servicio con Cli**
```
ng generate service nombre-del-servicio
ng g s nombre-del-servicio
```
```
@import { Injectable } from '@anglar/core';
@Injectable({
providedIn: 'root'
})
export class MiServicioService {
constructor() {}
//Métodos y lógica del servicio
}
```
**Inyeccion de dependencias**
```
import { Component } from '@anglar/core';
import { MiServicio } from './mi-servicio.service';
@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html'
})
export class MiComponente {
constructor(privete miServicio: MiServicio){
//una variable, miServicio e inyecta esta forma de MiServicio
//...
//a partir de Angular17, "inject". servicio inject MiServicio
}
}
```
**Directiva**
```
ng generate directive nombre-de-la-directiva
ng g d nombre-de-la-directiva
```
```
//html
Este es un elemento con mi directiva personalizada.
//nombre-de-la-directiva.directive.ts
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appMiDirectiva]'
})
export class MiDirectivaDirective {
constructor(private el: ElementRef){
//Accede al elemento del DO en el que se aplica la directiva (this.el.nativeElement)
this.el.nativeElement.style.backgroundColor = 'yellow';
}
}
```
**PIPES**
```
ng generate pipe nombre-del-pipe
ng g p nombre-del-pipe
```
```
//nombre-del-pipe.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'miPipe'
})
export class MiPipe implements PipeTransform {
transform(valor: any): any{
//Implementa la lógica de transformación aquí
return valor.toUpperCase();
}
}
```
```
{{texto | miPipe }}
https://angular.io/guide/pipes
```
**Rutas(Routes)**
app-routing.module.ts
```
const routes: Routes = [
{ path: 'inicio', component: InicioComponent },
{ path: 'productos', component: ProductosComponent },
{ path: 'contacto', component: ContactoComponent },
]
```
**Router Outlet**
app.component.html
```
```
**Navegación**
html
```
Inicio
```
**Parámetros de Ruta**
```
{ path: 'producto/:id', component: DetalleProductoComponent }
Ver Detalles
```
**routerLinkActive**
```
```
**Parámetros por la URL**
(1)Definir una ruta con varios parámetros:
```
const routes: Routes = [
{ path: 'producto/:categoria/:id', component: DetalleProductoComponent },
];
```
(2)Enlazar a la ruta con múltiples parámetros:
```
Ver Detalles
```
()
3)Recuperar los parámetros en el componente:
```
import { ActivatedRoute } from '@angular/router';
//...
constructor(private route: ActivatedRoute) {}
ngOnInit(){
this.route.params.subscribe(params => {
const categoria = params['categoria'];
const productId = params['id'];
// Hacer algo con los valores de los parámetros
})
}
```
**Navegar desde el controller**
```
import { Router } from '@angular/router';
//...
constructor(private router: Router) {}
//...
navegarAProducto(productoId: number){
//Puedes navegar a una ruta especifica programáticamente
this.router.navigate(['/producto, productoId]);
}
```
**Bootstrap**
```
npm i [email protected]
```
ルーティングモジュール(app-routing.module.ts)を手動で追加:
```
ng generate module app-routing --flat --module=app
```
あるいは
新しいプロジェクトを--routingフラグをつけて作成
```
ng new my-app --routing
```
node_module - dist - css - bootstrap.min.css - (click) copy relative path
=> (paste)angular.json
```
//27, 92
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
```
node_module - dist - js - bootstrap.bundle.min.js - (click) copy relative path
```
//30, 95
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
```
**Crear otros componentes**
```
ng g c home
```
```
ng g c products
```
```
ng g c contact
```
```
ng g c product-detail
```
**Estructuras de Control**
ngIf
```
Contenido visible si mostrarElemento es true.
```
ngFor
```
-
{{ item }}
```
ngSwitch
```
Contenido para opción 1
Contenido para opción 2
Contenido por defecto
```
ngClass
```
//Contenido con clases dinámicos
```
ngStyle
```
//Contenido con estilos dinámicos
```
ngContainer
```
//Contenido que no afecta al DOM directamente
```
otras estructuras de control:
ngTemplate
ngPlural
ngComponentOutlet
**Formulario**
Importar FormsModule para formularios de plantilla
```
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
//tus componentes aquí
],
imports: [
FormsModule,
// otros modulos que estés utilizando
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Formularios basados en plantillas (Template-driven);
```
Nombre:
Correo:
Enviar
```
Manejo de estado y errores
```
Nombre es obligatorio.
```
Importar ReactiveFormsModule para formularios reactivos
```
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
// tus componentes aquí
],
imports: [
ReactiveFormsModule
// otros módulos que estés utilizando
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Formularios reactivoe (Reactive): utiliza el servicio FormBuilder
HTML
```
Nombre:
Correo:
Enviar
```
TS
```
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
constructor(private fb: FormBuilder){
this.myForm = this.fb.group( {
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
});
}
```
Manejo de estado y errores
```
Nombre es obligatorio.
Correo no válido.
```