{"id":28227899,"url":"https://github.com/cesarmartinez7/learning-angular","last_synced_at":"2026-02-13T12:12:36.769Z","repository":{"id":287089325,"uuid":"963563279","full_name":"CesarMartinez7/learning-angular","owner":"CesarMartinez7","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-14T21:18:59.000Z","size":233,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-18T13:16:41.902Z","etag":null,"topics":["angular","typescript"],"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/CesarMartinez7.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":"2025-04-09T21:47:40.000Z","updated_at":"2025-04-14T21:19:03.000Z","dependencies_parsed_at":"2025-04-09T23:29:27.025Z","dependency_job_id":null,"html_url":"https://github.com/CesarMartinez7/learning-angular","commit_stats":null,"previous_names":["cesarmartinez7/learning-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesarMartinez7%2Flearning-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesarMartinez7%2Flearning-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesarMartinez7%2Flearning-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesarMartinez7%2Flearning-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CesarMartinez7","download_url":"https://codeload.github.com/CesarMartinez7/learning-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CesarMartinez7%2Flearning-angular/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259163223,"owners_count":22815118,"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","typescript"],"created_at":"2025-05-18T13:16:40.798Z","updated_at":"2026-02-13T12:12:31.723Z","avatar_url":"https://github.com/CesarMartinez7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Aprendiendo 🅰ngular 19\n \nPara empezar es necesario tener instalado la version de node especifica segun el proyecto que quieras iniciar tmb me recomendaron la version 16 de angular porque suele ser muy estable.\n\nPrimer paso es tener ng instalado, si no esta instalado se tiene que instalar con el siguiente comando de forma global\n\n```bash\nnpm install -g @angular/cli \n```\n\nPara ejecutar el servidor de angular se ejecuta el siguiente comando, este comando compila y lanza un puerto que servira al proyecto en modo desarrollo\n\n```bash\n    ng serve \u0026\u0026 npm start\n```\n\n## Conceptos de Angular\n\n*`Que es un pipe:`* Los pipes son funciones que se ejecutan antes de mostrarse en la vista, mejor dicho son  funciones que se transforman antes de mostrarse en la vista del usuario y se utilizan junto a la __interpolacion__ y se utilizan con el operador `|`. Los pipes no funcionan en los bucles @for\n\n\n\n*`Servicios`* :  Los servicios podriamos decir que son los llamados customHooks de react que nos permiten llevar la logica de un componente para que puedan ser reautilizados, o simplemente llevarlos fueras de componente principal, La verdadera \n`Definicion` es que son simplemente clases que nos permiten encapsular logica reutilizable y permite la comunicacion entre un componente\n\n*`RxJS`*: React Extensiones para Javascript.\n\n*`HttpClient`*: HttpClient es un servicio ya definido de angular que nos permite hacer peticiones en Angular por medio de servicios.\n\n*`selector Props`* : Es el nombre que se le da en el documento html o la etiqueta.\n\n*`templateUrl`* : Es la ruta de donde se encuentra el documente html del componente.\n\n*`template`* : Puedes poner tu documento html aqui tambien, pero lo mejor seria separar la vista de la logica lo mas posible.\n\n*`CommonModule`* : Son aquellos componentes que son dependientes de sus modulos\n\n*`imports en @Component`* : Se utiliza para importar modulos o componentes que el componente necesita para funcionar. Por ejemmplo al utilizar standalone y querer utilizar el *ng necesitamos importar el CommonModule para que este traiga esas funcionalidades\n\n` ngOnInit`: Se ejecuta despues que angular crea el componente perfecto para ejecutar llamadas apis y todo lo demas, mucho mas recomendable que el metodo constructor de Angular , para implementar algo de el se utiliza la herencia de __JS__ con el implements metodo de clase.\n\n\n\n\n## Estructuras de Carpetas Sencilla\n\n```\n/nombre-del-proyecto\n│── 📂 src\n│   ├── 📂 app\n│   │   ├── 📂 core        → Servicios globales, guards, interceptores  \n│   │   ├── 📂 shared      → Componentes, pipes y directivas reutilizables  \n│   │   ├── 📂 modules     → Módulos organizados por funcionalidad  \n│   │   ├── 📂 pages       → Componentes específicos de cada página  \n│   │   ├── 📂 components  → Componentes generales usados en varias partes  \n│   │   ├── 📂 services    → Servicios específicos de cada módulo  \n│   │   ├── app.module.ts  → Módulo principal  \n│   │   ├── app.component.ts  → Componente raíz  \n│   ├── 📂 assets         → Imágenes, fuentes, JSON, etc.  \n│   ├── 📂 environments   → Configuración de entornos (`prod`, `dev`)  \n│   ├── main.ts           → Punto de entrada de Angular  \n│   ├── index.html        → Archivo principal HTML  \n│── angular.json          → Configuración de Angular  \n│── package.json          → Dependencias del proyecto  \n│── tsconfig.json         → Configuración de TypeScript  \n```\n\nAngular para componentes grandes la mejor manera de escribir los componentes en features si son rutas o components carpeta por si es una carpeta, dentro de estos directorios debe ir el archivo __TS__ el archivo __CSS__ el archivo __HTML__ y opcional el de las rutas de ese componente para manejar esa ruta\n\n## Rutas Angular v19\nPara manejar las rutas de angular se necesita el archivo app.route.ts, funciona similar al outlet de javascript, mejor dicho en react para poner que queremos poner se envuelve ese componente dentro de ello\n\n```ts\nimport { Routes } from \"...\"\nimport { NormalComponent } from \"...\"\n\nexport const routes: Routes = [\n    { path: \"\" , component: NormalComponent }\n];\n\n```\n\nRecibe una lista de objectos que contiene la ruta junto a al elemento, similar a la sintaxis de  `react-router-dom`\n\n## Comandos Basicos\n\nLos comandos son similares a los comandos de __Vite__ en React\n\n\nPara ofuscar el codigo , optimizar el codigo y frontend para produccion.\n\n``` bash\nng build\n```\nEl comando crea el tipico directorio __dist__ que contiene todo el codigo para produccion.\n\nAlternativa sencilla en el package.json a __ng serve__\n``` bash\nng start \n```\n\nPara todo lo que tiene que ver con testing esta el comando:\n``` bash\nng test\n```\n\n# Inicio \n\nAprendi cosas sencillas como el cambio de nombres en los templates y como funcionan las templates sencillas en angular para mandar bloques de codigo, tambien lo sencillo de como funcionan las rutas, como poner algunas carpetas y esctructurar los componentes y rutas y tambien algunas cosas para el funcionamiento detras de Angular\n\n\n## Creacion de los componentes desde Angular CLI\n\n```\nng generate component \u003cname-component\u003e --standalone --inline-template --skip-tests\n```\n__Altenativa con path__\n```\nng generate component \u003cruta\u003e/\u003cname-component\u003e\n```\n\nEl comando generara un directorio que tendra el componente de angular o ts y tambien los estilos de ese componente\n\n```\n| __ \u003cname-component\u003e 📁\n|    |\n    -- home.component.ts \n    -- home.component.css\n```\n\n\n\n## Manejo de Eventos en Angular\n\nEn angular los eventos funcionan algo similar a react o la mayoria de framework o modulos javascript, su sintaxi es sencilla\n\n```html\n\u003cbutton (click) = \"mostrarAlgo()\" \u003ePresioname\u003c/button\u003e\n```\n\nDonde `click` es el evento a hacer y __mostrarAlgo()__ es simplemente esa funcion o mejor dicho metodo que se hara cuando se dispare ese listener\n\nAhora la question seria donde esta la funcion que se ejecuta cuando se presiona el boton, sencillo en angular las funciones se definen en las mal llamadas `props` de un componente, es decir definen dentro del archivo `namecomponent.component.ts`\n\nTambien es importante saber que esas funciones son mejor dicho metodos porque no es necesario darle a entender que son funciones a javascript, porque son mas metodos por asi decirlo porque estan dentro de la importacion de la clase.\n\nEjemplo de esto\n\n```ts\nexport default class ButtonPressed {\n    mostrarAlgo(){\n        window.alert(\"Hola Soy tu primer componente Reactivo y no Angulativo ⚛️👑\")\n    }\n}\n```\n\n## Ejemplos de Eventos de Angular\n\n\nEvento __click__\n```ts\n(click) = \"nombreFuncion()\"\n```\nEvento __change__\n```ts\n(change) = \"nombreFuncion()\"\n```\nEvento __input__\n```ts\n(input) = \"nombreFuncion()\"\n```\nEvento __submit__\n```ts\n(submit) = \"nombreFuncion()\"\n```\n## Templates \n\n En angular los templates son pedazos de codigo HTML que nos permite y nos sirve para escribir algunas caracteristicas de angular y no es necesario incluir etiquetas como `\u003cbody\u003e` `\u003cbase\u003e` `\u003chtml\u003e` y se ignora la etiqueta `\u003cscript\u003e` por seguridad, y esta definidos solo para definir la interfaz o diretris\n\n ##  Binding Syntax\n\n El encuadernamiento de datos nos permite personalizar el HTML especificando valores con atributos de cadena desde el HTML , lo q nos propociona el encuadernamiento de datos es simplemente inicializar esta parte, como por dicho desde el __JS__ o __Angular__ en vez del HTML, es decir que funcionan desde el doom:\n\n Ejemplos de personlizacion de los atributos de cadena desde javascript\n\n### Los cuatro tipos de Biding syntax son\n\n#### Interpolation - Interpolacion\n\n`app.component.html`\n``` html\n\u003cp\u003e{{ name }}\u003c/p\u003e\n```\n`app.component.ts`\n\n```ts\nexport default class AppComponent {\n    name: string = \"Soy angulativo\"\n}\n```\n\n#### Property Binding \n\n`app.component.html`\n```html\n\u003cinput [value]=\"message\" /\u003e\n```\n`app.component.ts`\n```ts\nexport default class AppComponent {\n    message = \"Hello soy el valor de un input 😂\"\n}\n```\n\n#### Event Binding \n\n`app.component.html`\n```html\n\u003cbutton (click)=\"funcionARealizar()\" \u003ePresioname\u003c/button\u003e\n```\n`app.component.html`\n\n\n#### Two-Way biding\n\n\n\n## Renderizado de clases condicional\n\nAngular tiene su propia directiva llamada `ngClass` que nos permite darle estilos condicionales a una etiqueta de html y hay diferentes formas de hacerlo, en un `string`, `array` y en un `objeto`, le pasamos nuestro argumento, algo sencillo como un ternario estaria bien y despues nuestras clases para que se ejecuten dependiendo de la funcion\n\n\n### Sintaxis\n```html\n\u003cbutton [ngClass]=\"\u003cexpresion_si_si\u003e ? ´clase_si_Si´ : ´clase_si_No´ \" \u003ePresioname\u003c/button\u003e\n```\n\n## Signals\n\nLos signals son una nuevo manejo de estado hecho por angular similares a los estados de `react`, tienen un effect y asi como señales, cuando algo cambia este verifica si cambia algo en la ui y lo actualiza, la diferencia de las señales con los estados de react es que los señales estan hecos para una mejor optimizacion, ademas que tiene diferentes metods que podrian ayudarnos y no solo un `setteador`.\n\n### Sintaxis\n\n```ts\n\nconst contador = signals(0);\n\nhandleChangeContador (){\n    this.contador.set(this.contador() + 1)\n}\n\n```\n\n\n## Tipos de Pipes\n\nLos pipes son funciones que se transforman algo antes de mostrarse en la vista y se hacen con el operador de `|` \n\nPipes de `string`\n\n```ts\n{{\"hola mundo\" | uppercase }}\n{{\"hola mundo\" | lowercase }}\n```\n\nPipes de fecha `fecha`\n```ts\n{{fecha | date:\"dd/MM/yyyy\"}}\n```\nPipes de formato de moneda o `currency`\n```ts\n{{fecha | currency}}\n```\n\nPipes de `json`\n \n```ts\n{{data | json}}\n```\n\n\u003e [!NOTE]\n\u003e Se pueden crear Pipes personalizables .\n\nEn resumen los pipes son funciones que se transforman antes de mostrarse en la vista y se utilizan con el operador | en las plantillas de Angular y nos permiten hacer cosas simples para la vista del usuario\n\n## Comandos Angular Cli\n\n```sh\nng generate component\n```\n\n```bash\nng generate module\n```\n\n```bash\nng generate service\n```\n\n```bash\nng generate directive\n```\n\n# Decoradores en Angular \n\n\n    @Component: se utiliza para definir un componente en Angular. Se utiliza para especificar la plantilla, estilos y metadatos asociados con el componente.\n    @Directive: se utiliza para definir una directiva personalizada en Angular. Las directivas se utilizan para agregar comportamientos específicos a elementos de la interfaz de usuario.\n    @NgModule: se utiliza para definir un módulo en Angular. Los módulos se utilizan para agrupar componentes, directivas, servicios y otros objetos relacionados entre sí.\n    @Pipe: se utiliza para definir una tubería en Angular. Las tuberías se utilizan para transformar datos en tiempo real en una plantilla.\n    @Injectable: se utiliza para definir un servicio en Angular. Los servicios son una forma de compartir datos y funcionalidades entre componentes.\n    @Input: se utiliza para definir una propiedad de entrada en un componente. Las propiedades de entrada se utilizan para pasar datos a un componente desde un componente padre.\n    @Output: se utiliza para definir un evento en un componente. Los eventos se utilizan para enviar datos desde un componente hijo a un componente padre.\n    @HostBinding: se utiliza para enlazar una propiedad de un componente a una propiedad del elemento DOM que lo contiene.\n    @HostListener: se utiliza para escuchar eventos del elemento DOM que contiene el componente.\n    @ContentChild: se utiliza para obtener una referencia al primer elemento secundario coincidente de un componente.\n    @ContentChildren: se utiliza para obtener una referencia a todos los elementos secundarios coincidentes de un componente.\n    @ViewChild: se utiliza para obtener una referencia al primer elemento hijo coincidente de un componente.\n    @ViewChildren: se utiliza para obtener una referencia a todos los elementos hijos coincidentes de un componente.\n    @Attribute: se utiliza para obtener el valor de un atributo en un elemento DOM.\n    @Self: se utiliza para indicar que una inyección de dependencia debe ser resuelta solo en el propio componente.\n    @Optional: se utiliza para indicar que una inyección de dependencia es opcional y no causará un error si no se puede resolver.\n    @SkipSelf: se utiliza para indicar que una inyección de dependencia debe ser resuelta por un componente superior en la jerarquía de componentes.\n    @Inject: se utiliza para especificar un proveedor de inyección de dependencia personalizado en un componente.\n\n\n# Cosas a tener en cuenta\n\nMe llevo 5 minutos arreglar una interfaz y fue simplemente porque la interfaz que puse se encontraba debajo del decorador `@Component` algo que sin escusa tiene sentido ya q este espera si o si un componente en clase, pero es algo a tener en cuenta sin duda.\n\n\n❌ Los pipes no funcionan dentro de bucles @for una cosa demasiado rara en angular\n\n# Pensamientos propios\n\nCreo que ya voy entendiendo el sistema de modulos y el standalone al menos lo que creo, el standalone lo que nos permite es tener los mismos importes como si fuera en un @ngModule o algo asi, ya se me olvido\n\n\n# Importacion De Componentes En Angular\n\nLa importacion de componentes en angular al menos en la ultima version permite importarlo en ponerlo en componentes padres, solo hace falta importar ese componente en los imports de la metadata del componente padre\n\n```ts\n@Component({\n    selector: \"app-padre\",\n    imports: [ ComponenteHijo ]\n    standalone: true\n})\n```\n\n\n# Routing Angular 19\n\nPara el routing se necesita el archivo app.route.ts, aqui se definiran las rutas, muy similar a react router doom para ser especificos tiene la misma sintaxis y se espera la ruta principal junto al componente o la ruta, el router de todas la paginas  `404`  se hacen con `**` para las paginas que no se encuentran\n\nDe lo demas la sintaxis de las rutas en angular 19 es practicamente igual a las rutas react router dom\n\n__Ejemplo__\n```ts\nimport HomeRoute from \"./routes/homeroute/home.component.ts\"\n\nexport const routes: Routes = [\n    {path: \"\", component HomeRoute}\n            |                 |  \n            |                 |\n          \"Path\"          \"Component\"  \n]\n```\n\n## ⚙ Propiedades de Routing\n\n`loadComponent`: Lazy load de el routing\n\n\n## @For y @Empty en Angular 19\n\nEn angular 19 la sintaxis es muy similiar a la del metodo `map` en React a diferencia que se ve un poco mas organizado y con un metodo bastante sencillo pero bastante util que es el `@empty`, el nombre ya describe como tal que es lo que tiene que hacer.\n\n__Ejemplo de uso__ \n\n```ts\n@for (item of items; track item.name ; let indice = $index){\n    \u003cli\u003e {{indice + 1}} {{item.name}}\u003c/li\u003e\n}@empty {\n    \u003cli\u003e{{\"Esto saldra cuando no haya nada para renderizar\"}}\u003c/li\u003e\n}\n```\n__✅ Output True | @for__\n\n```\n                        ┌─────────┬──────────┬─────────┐\n                        │ (index) │ Indice   │ Nombre  │\n                        ├─────────┼──────────┼─────────┤\n                        │    0    │    1     │ Manzana │\n                        │    1    │    2     │ Banana  │\n                        │    2    │    3     │ Cereza  │\n                        └─────────┴──────────┴─────────┘\n\n```\n__❌Output False  | @empty__\n\n```\n            ┌─────────────────────────────────────────────────────────┐\n            │            Esto saldrá cuando no haya data              │\n            └─────────────────────────────────────────────────────────┘\n```\n\n\u003e [!TIP]\n\u003e Se podria decir que es practicamente el key que se le dan en los mapeos a las grandes en los bucles o listas, mejora el rendimiento de la web considerable mente, dando _id_ unicos para que cuando se haga un cambio angular o el framework pueda encontrar facilmente que fue lo que cambio por medio de los __id__.\n\n## Entradas @Input - property Biding\n\nSe da por medio del decorador `@Input` que nos permite pasar comunicacion o relacion de un componente a otro componente, la sitanxis se crear dentro de la clase como si fuera una propiedad o `prop` y siempre esperara una entrada como tal. Es imporntante inicilizarla porq esto es TS y sobre todo tiparla.\n\n__Ejemplo de uso__\n\n__\u003cfont color=\"#3178c6\"\u003eson.component.ts\u003c/font\u003e__\n```ts\nexport default class SonComponent {\n    @Input() message : string = \"Hola si no me mandan parametros\"\n}\n```\n\n__\u003cfont color=\"#3178c6\"\u003efather.component.ts\u003c/font\u003e__\n\n```ts\nimport SonComponent from \"./sonComponent/son.component.ts\"\nimport {Component} from \"@angular/core\"\n\n@Component({\n    selector: \"father-component\",\n    imports: [ SonComponent ]\n})\n```\n__\u003cfont color=\"#e34f26\"\u003efather.component.html\u003c/font\u003e__\n```html\n\u003cmain\u003e\n    \u003c!-- Aqui va todo el html del componente padre --\u003e\n    \u003cson-component message=\"Hola este es el mensaje que se manda por props ☢\" \u003e\u003c/son-component\u003e\n    \u003c!-- Aqui va todo el html del componente padre --\u003e\n\u003c/main\u003e\n```\n## Uso de  @defer, @loading, @placeholder\n\nTengo idea de como funcionan, pero en la practica no me funcionan\n\n## Injectables\n\nLos injectables en angular son una de las cosas mas importantes de el framework para se espeficos, nos permite poner dependecias en tiempo de ejecucion, una dependecia pordria ser un servicio, por ejemplo un modulo de angular, o una peticion a una api\n\nEs recomendable poner los Injectables en lugares especificos, podrian ser tales como en el directorio servicio si queremos que ese injectable este en modo global si ese injectable solo se usara en un modulo, se puede poner alli mismo\n\n## Uso ⚙\n\nPara hacer uso de una inyeccion es algo similar a la sintaxis del `useContext()` en react a diferencia que aqui no es para estados __globales__, pero es bueno tener la referencia a que la sintaxis y creacion son similares, y para hacer uso de la inyeccion ya sea de un servicio hay dos maneras de hacerlo, sea con el metodo `inject()` o sea con la sintaxis clasica de angular\n\n\n`Ventajas del metodo inject`: Sintaxis mas limpia, actualizada y no necesita del metodo constructor\n\n__Ejemplo:__\n\n```ts\n\nimport GetCarsService from \"../../services/cars.services.ts\"\n\nclass CarsComponent {\n\n    // No hace falta la ejecucion desde el metodo constructor cuando se inicializa el componente, segun lo que entiendo entonces el metodo inject(), seria buena idea utilizarlo cuando no se necesita ejecutar cuando se inicializa el componente. 🐵\n\n    carsServices = inject(GetCarsService)\n\n\n    getCar(){\n        // Input de la interfaz para ver la salida por medio de ID.\n        const idInput = this.form.value.id\n        const rs = this.carsServices.getCar(idInput)\n        // Ver el resultado de la peticion en un alerta\n        window.alert(rs)\n    }\n\n}\n\n```\n\n\u003e [!IMPORTANT]  \n\u003e Es importante tener en cuenta si la peticion es un observable, y, que devuelve un observable se debe tipar ese observable y este observable dara el nuevo flujo con su subscribe que sera diferente como se muestra en el ejemplo anterior.\n\n\n\n\n`Ventajas de La Sintaxis Clasica ` : Sintaxis un poco mas verbosa pero mas utilizada en proyectos sea nuevo como anteriore|s , ademas que hace uso del metodo constructor.\n\n```ts\n// Here code ....\n```\n\n\u003c!-- ### FormBuilder, FormGroup --\u003e\n\n\n\n\n## Imagenes en angular\n\nLas imagenes en angular se cargan por lo general en el documento assets, o mejor dicho verificar las configuraciones de angular en __angular.json__ y verificar, En Angular 19 al menos las configuraciones de las imagenes se encuentran en la carpeta public y para acceder a alguna de las imagenes de esta carpeta se haria de la siguiente manera:\n\n\n```html\n\u003cimg src=\"/dog.png\" /\u003e\n            |\n        \u003c!-- Ruta absoluta de la imagen del perro desde ruta absoluta, angular la reconocera y la configurara enseguida para desarrollo y producccion --\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarmartinez7%2Flearning-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcesarmartinez7%2Flearning-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcesarmartinez7%2Flearning-angular/lists"}