{"id":20094194,"url":"https://github.com/naopeke/angular-practice","last_synced_at":"2026-05-12T17:42:51.304Z","repository":{"id":211326073,"uuid":"728287247","full_name":"naopeke/Angular-practice","owner":"naopeke","description":"self-learning","archived":false,"fork":false,"pushed_at":"2023-12-11T09:57:37.000Z","size":505,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T03:31:11.684Z","etag":null,"topics":["angular","reference-material"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naopeke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-06T16:11:59.000Z","updated_at":"2024-02-02T08:45:59.000Z","dependencies_parsed_at":"2023-12-11T09:28:26.302Z","dependency_job_id":"7142a185-5797-4816-a274-ac31f4bed8c5","html_url":"https://github.com/naopeke/Angular-practice","commit_stats":null,"previous_names":["naopeke/angular-practice"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naopeke%2FAngular-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naopeke","download_url":"https://codeload.github.com/naopeke/Angular-practice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241533629,"owners_count":19977826,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","reference-material"],"created_at":"2024-11-13T16:49:42.893Z","updated_at":"2026-05-12T17:42:51.257Z","avatar_url":"https://github.com/naopeke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular-practice\n```\nnpm i -g @angular/cli@16.2.10\n```\n```\nnpm uninstall -g @angular/cli\n```\n```\nnpm cache clean --force\n```\n```\nng new my-app(nombre de aplicacion)\u003c/p\u003e\n```\n\n**MODULOS CON CLI**\n```\nng generate module nombre-del-modulo\nng g m nombre-del modulo\n```\n\n**MODULOS**\n```\nimport{ NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common'\nimport { MiComponente } from './mi-componente.component'\n\n@NgModule({\u003cbr\u003e\n    declarations: [MiComponente],\n    imports: [CommonModule],\n    exports: [MiComponente]\n})\n\nexport class MiModulo {}\n```\n\n**COMPONENTS CON CLI**\n```\nng generate component nombre-del componente\nng g c nombre-del componente\n```\n\n**4 archivos**\n__.component.ts\u003cbr\u003e\n__.component.html\u003cbr\u003e\n__.component.css\u003cbr\u003e\n__.component.spec.ts\u003cbr\u003e\n\n```\nnpm start\u003cbr\u003e\n```\n**Actively supported versions**\nhttps://angular.io/guide/versions\nNode.js\n```\nnvm install 18.10.0 // to install the version of node.js I wanted\nnvm use 18.10.0  // use the installed version\n```\nAngular (Downgrade @angular-devkit/build-angular)\n```\nnpm list @angular-devkit/build-angular\nnpm install @angular-devkit/build-angular@16.2.10 --save-dev\n```\n\nhttp://localhost:4200/\u003cbr\u003e\n\n**親のコンポーネント作成（myApp-src-app内トップ）**\n```\nng g c padre\n```\n```\napp.module.ts\n@NgModule({\n    declarations: [\n        AppComponent,\n        PadreComponent\n        // added automatically\n    ]\n})\n```\n\n**INPUT**\n```\n//Componente hijo\n@Input() datoEntrada: string;\n\n//Componente padre\n\u003capp-hijo [datoEntrada]=\"valorDesdePadre\"\u003e\u003c/app-hijo\u003e\n\n//Componente padre\nvalorDesdePadre = \"Hola, mundo!\"\n\n//Componente hijo template\n{{ datoEntrada }}\n```\n\n**OUTPUT**\n```\n//Componente hijo\n@Output() messageEvent = new EventEmitter\u003cstring\u003e();\nmessage: string = '';\n\nsendMessage(){\n    this.messageEvent.emit(this.message)\n}\n\n//Componente hijo\n\u003cdiv\u003e\n\u003clabel for=\"childInput\"\u003eMensaje:\u003c/label\u003e\n\u003cinput id=\"childInput\"\u003e [(ngModel)]=\"message\" /\u003e\n\u003cbutton (click)=\"sendMessage()\"\u003eEnviar Mensaje\u003c/button\u003e\n\n//Componente padre\nreceivedMessage: string = '';\n\nreceiveMessage(message: string){\n    this.receivedMessage = message;\n}\n\n//Componente padre\n\u003cdiv\u003e\u003cbr\u003e\n\u003capp-child (messageEvent)=\"receiveMessage($event)\"\u003e\u003c/app-child\u003e\n\u003cp\u003eMensaje recibido en el padre {{ receivedMessage}}\u003c/p\u003e\n```\n\n**Servicio con Cli**\n```\nng generate service nombre-del-servicio\nng g s nombre-del-servicio\n```\n```\n@import { Injectable } from '@anglar/core';\n\n@Injectable({\n    providedIn: 'root'\n})\n\nexport class MiServicioService {\n    constructor() {}\n\n      //Métodos y lógica del servicio\n}\n```\n**Inyeccion de dependencias**\n```\nimport { Component } from '@anglar/core';\nimport { MiServicio } from './mi-servicio.service';\n\n@Component({\n    selector: 'app-mi-componente',\n    templateUrl: './mi-componente.component.html'\n})\nexport class MiComponente {\n    constructor(privete miServicio: MiServicio){\n        //una variable, miServicio e inyecta esta forma de MiServicio\n        //...\n        //a partir de Angular17, \"inject\". servicio inject MiServicio\u003cbr\u003e\n    }\n}\n```\n\n**Directiva**\n```\nng generate directive nombre-de-la-directiva\nng g d nombre-de-la-directiva\n```\n```\n//html\n\u003cdiv appMiDirectiva\u003e\n Este es un elemento con mi directiva personalizada.\n \u003c/div\u003e\n\n//nombre-de-la-directiva.directive.ts\nimport { Directive, ElementRef } from '@angular/core';\n\n@Directive({\n    selector: '[appMiDirectiva]'\n})\nexport class MiDirectivaDirective {\n    constructor(private el: ElementRef){\n        //Accede al elemento del DO en el que se aplica la directiva (this.el.nativeElement)\n        this.el.nativeElement.style.backgroundColor = 'yellow';\n    }\n}\n```\n\n**PIPES**\n```\nng generate pipe nombre-del-pipe\nng g p nombre-del-pipe\n```\n```\n//nombre-del-pipe.pipe.ts\nimport { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n    name: 'miPipe'\n})\nexport class MiPipe implements PipeTransform {\n    transform(valor: any): any{\n        //Implementa la lógica de transformación aquí\n        return valor.toUpperCase();\n    }\n}\n```\n```\n\u003cp\u003e{{texto | miPipe }}\u003c/p\u003e\nhttps://angular.io/guide/pipes\n```\n\n**Rutas(Routes)**\napp-routing.module.ts\n```\n\u003cp\u003econst routes: Routes = [\n    { path: 'inicio', component: InicioComponent },\n    { path: 'productos', component: ProductosComponent },\n    { path: 'contacto', component: ContactoComponent },\n]\u003c/p\u003e\n```\n\n**Router Outlet**\napp.component.html\n```\n\u003crouter-outlet\u003e\u003c/router-outlet\u003e\n```\n\n**Navegación**\nhtml\n```\n\u003ca routerLink=\"/inicio\"\u003eInicio\u003c/a\u003e\n```\n\n**Parámetros de Ruta**\n```\n{ path: 'producto/:id', component: DetalleProductoComponent }\n\u003ca [routerLink]=\"['/producto', producto.id]\"\u003eVer Detalles\u003c/a\u003e\n```\n\n**routerLinkActive**\n```\n\u003cnav\u003e\n\u003ca routerLink=\"/inicio\" routerLinkActive=\"active\"\u003eInicio\u003c/a\u003e\n\u003ca routerLink=\"/productos\" routerLinkActive=\"active\"\u003eProductos\u003c/a\u003e\n\u003ca routerLink=\"/contacto\" routerLinkActive=\"active\"\u003eContacto\u003c/a\u003e\n\u003c/nav\u003e\n```\n\n**Parámetros por la URL**\n(1)Definir una ruta con varios parámetros:\n```\nconst routes: Routes = [\n    { path: 'producto/:categoria/:id', component: DetalleProductoComponent },\n];\n```\n\n(2)Enlazar a la ruta con múltiples parámetros:\n```\n\u003ca [routerLink]=\"['/producto', producto.categoria, producto.id]\"\u003eVer Detalles\u003c/a\u003e\n```\n()\n3)Recuperar los parámetros en el componente:\n```\nimport { ActivatedRoute } from '@angular/router';\n\n//...\n\nconstructor(private route: ActivatedRoute) {}\n\nngOnInit(){\n    this.route.params.subscribe(params =\u003e {\n        const categoria = params['categoria'];\n        const productId = params['id'];\n        // Hacer algo con los valores de los parámetros\n    })\n}\n```\n\n**Navegar desde el controller**\n```\nimport { Router } from '@angular/router';\n\n//...\n\nconstructor(private router: Router) {}\n\n//...\n\nnavegarAProducto(productoId: number){\n    //Puedes navegar a una ruta especifica programáticamente\n    this.router.navigate(['/producto, productoId]);\n\n}\n```\n\n**Bootstrap**\n```\nnpm i bootstrap@5.3.2\n```\n\nルーティングモジュール(app-routing.module.ts)を手動で追加:\n```\nng generate module app-routing --flat --module=app\n```\nあるいは\n新しいプロジェクトを--routingフラグをつけて作成\n```\nng new my-app --routing\n```\n\nnode_module - dist - css - bootstrap.min.css - (click) copy relative path \n=\u003e (paste)angular.json \n```\n//27, 92\n\"styles\": [\n    \"src/styles.css\",\n    \"node_modules/bootstrap/dist/css/bootstrap.min.css\"\n]\n```\nnode_module - dist - js - bootstrap.bundle.min.js - (click) copy relative path\n```\n//30, 95\n    \"scripts\": [\n    \"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js\"\n    ]\n```\n**Crear otros componentes**\n```\nng g c home\n```\n```\nng g c products\n```\n```\nng g c contact\n```\n```\nng g c product-detail\n```\n\n**Estructuras de Control**\nngIf\n```\n\u003cdiv *ngIf = \"mostrarElemento\"\u003e\n Contenido visible si mostrarElemento es true.\n\u003c/div\u003e\n```\nngFor\n```\n\u003cul\u003e\n\u003cli *ngFor=\"let item of listaItems\"\u003e\n{{ item }}\n\u003c/li\u003e\n\u003c/ul\u003e\n```\nngSwitch\n```\n\u003cdiv [ngSwitch]=\"opcion\"\u003e\n \u003cp *ngSwitchCase=\"'opcion1'\"\u003eContenido para opción 1\u003c/p\u003e\n \u003cp *ngSwitchCase=\"'opcion2'\"\u003eContenido para opción 2\u003c/p\u003e\n \u003cp *ngSwitchDefault\u003eContenido por defecto\u003c/p\u003e\n\u003c/div\u003e\n```\nngClass\n```\n\u003cdiv [ngClass]=\"{'clase1': condicion1, 'clase2': condicion2}\"\u003e\n  //Contenido con clases dinámicos\n\u003c/div\u003e\n```\nngStyle\n```\n\u003cdiv [ngStyle]=\"{'color': color, 'font-size': tamano}\"\u003e\n  //Contenido con estilos dinámicos\n\u003c/div\u003e\n```\nngContainer\n```\n\u003cng-container *ngIf=\"condicion\"\u003e\n  //Contenido que no afecta al DOM directamente\n\u003c/ng-container\u003e\n```\notras estructuras de control:\nngTemplate\nngPlural\nngComponentOutlet\n\n**Formulario**\nImportar FormsModule para formularios de plantilla\n```\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n    declarations: [\n        //tus componentes aquí\n    ],\n    imports: [\n        FormsModule,\n        // otros modulos que estés utilizando\n    ],\n    bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\nFormularios basados en plantillas (Template-driven);\n```\n\u003cform #myForm=\"ngForm\" (ngSubmit)=\"onSubmit()\"\u003e\n\u003clabel for =\"name\"\u003eNombre:\u003c/label\u003e\n\u003cinput type=\"text\" id=\"name\" name=\"name\" [(ngModel)]=\"user.name\" required\u003e\n\n\u003clabel for =\"email\"\u003eCorreo:\u003c/label\u003e\n\u003cinput type=\"email\" id=\"email\" name=\"email\" [(ngModel)]=\"user.email\" required\u003e\n\n\u003cbutton type=\"submit\"\u003eEnviar\u003c/button\u003e\n\u003c/form\u003e\n```\nManejo de estado y errores\n```\n\u003cdiv *ngIf=\"!name.valid \u0026\u0026 name.touched\"\u003eNombre es obligatorio.\u003c/div\u003e\n```\nImportar ReactiveFormsModule para formularios reactivos\n```\nimport { FormsModule } from '@angular/forms';\n\n@NgModule({\n    declarations: [\n        // tus componentes aquí\n    ],\n    imports: [\n        ReactiveFormsModule\n        // otros módulos que estés utilizando\n    ],\n    bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\nFormularios reactivoe (Reactive): utiliza el servicio FormBuilder\nHTML\n```\n\u003cform [formGroup]=\"myForm\" (ngSubmit)=\"onSubmit()\"\u003e\n\u003clabel for=\"name\"\u003eNombre:\u003c/label\u003e\n\u003cinput type=\"text\" id=\"name\" formControlName=\"name\"\u003e\n\n\u003clabel for=\"email\"\u003eCorreo:\u003c/label\u003e\n\u003cinput type=\"email\" id=\"email\" formControlName=\"email\"\u003e\n\n\u003cbutton type=\"submit\"\u003eEnviar\u003c/button\u003e\n```\nTS\n```\nimport { FormBuilder, FormGroup, Validators } from '@angular/forms';\n\nconstructor(private fb: FormBuilder){\n    this.myForm = this.fb.group( {\n        name: ['', Validators.required],\n        email: ['', [Validators.required, Validators.email]],\n    });\n}\n```\nManejo de estado y errores\n```\n\u003cdiv *ngIf=\"myForm.get('name').hasError('required') \u0026\u0026 myForm.get('name').touched\"\u003e\n Nombre es obligatorio.\n\u003c/div\u003e\n\u003cdiv *ngIf=\"myForm.get('email').hasError('email') \u0026\u0026 myForm.get('email').touched\"\u003e\n Correo no válido.\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaopeke%2Fangular-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaopeke%2Fangular-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaopeke%2Fangular-practice/lists"}