Loading repository data…
Loading repository data…
silnose / repository
Conceptos fundamentales de Angular 8. Bases sobre la arquitectura de este Framework para programar aplicaciones web con sus mejores prácticas. Conexion de aplicaciones con una API para obtener datos de un sistema de Backend. Distribución con Firebase
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Conceptos fundamentales de Angular 8. Bases sobre la arquitectura de este Framework para programar aplicaciones web con sus mejores prácticas. Conexion de aplicaciones con una API para obtener datos de un sistema de Backend. Distribución con Firebase
https://ngchallenges.gitbook.io/project/angular
Es un Framework o plataforma que te permite crear aplicaciones Web o SPA (Single Page Applications). Creado por Google.
https://angular.io/cli/generate
npm install -g @angular/cli
ng version
ng new project
ng test
ng serve --port 4200 --open
ng build --prod
npm cache clean -f
npm cache verify
ng --version
ng generate component nombreComponente --module app.module
ng generate component nombre-del-component
ng g c nombre-del-component
ng g i interfaz
ng generate pipe new_pipe
ng generate directive <name>
ng g directive <name>
ng generate service <name>
ng g s <name>
ng generate module <name>
ng g m <name>
ng generate guard <name>
ng g g <name>
https://angular.io/guide/file-structure
├── .editorconfig # Configuración para editores de código
├── .gitignore # Lista de archivos no rastreados por git
├── angular.json # Archivo de configuraciones de construcción, compilacion y testing.
├── browserslist # Configuración compartidas para los navegadores
├── e2e/ # Carpeta para los test end to end
├── karma.conf.js # Configuraciones de Karma (Unit test)
├── node_modules/ # Carpeta de las librerías y paquetes instalados por npm
├── package-lock.json # Provee información sobre las versiones de las paquetes de npm
├── package.json # Configuración de las paquetes de npm
├── README.md # Introducción a la documentación de la app
├── src/ # Carpeta de la aplicación raíz (assets, componentes etc..)
├── tsconfig.app.json # Configuraciones de Typescript especificas de la app
├── tsconfig.json # Configuraciones de Typescript
├── tsconfig.spec.json # Configuraciones de Typescript para los test
└── tslint.json # Configuraciones TsLint
https://angular.io/guide/binding-syntax
FUENTE: https://gustavodohara.com/blogangular/banana-in-box-banana-la-caja/
¿Qué es «Banana In a Box»?, es una terminología de Angular que se refiere a ésta notación [()] que básicamente hace referencia a el famoso two-ways biding, o sea, al mecanismo de actualizar la vista y el modelo al mismo tiempo.
Angular está pensado para actualizar datos en la pantalla dinámicamente, me refiero a que en la pantalla en la que estamos, los datos van cambiando automáticamente sin referescar el browser.
Pero ésto no se hace mágicamente, los datos viajan del controlador a la vista (la pantalla que estás viendo) y también se puede dar el caso los datos viajan de vista al controlador. Y por último, se puede dar el caso de que ambas acciones puedan pasar al mismo tiempo. Estos tres casos se pueden ver gráficamente de la siguiente forma y para cada uno de esos casos, Angular tiene diferentes mecanismos para actualizar la pantalla
Forma de mostrar variables en tu template
Los templates de Angular utilizan html como lenguaje de maquetación donde se puede ejecutar interpolación de strings mediante una implementación de moustache donde dentro de los corchetes puedes hacer una sentencia que se resolverá como un string para ser renderizado en el DOM.
Nuestros templates tienen acceso a las variables exportadas en el archivo .ts con el mismo nombre (componente).
En el ejemplo vemos que hay una variable llamada «título» que tiene el valor «hola mundo», y ésta variable se quiere mostrar en la pantalla. Lo que Angular hace cuando encuentra los doble brackets ({{}}) es procesar el contenido de esa variable y devolverlo en forma de string.
Valido en los siguientes contextos
{{ 1 + 1}}: la cual devuelve 2
{{ miVariable }}: donde miVariable es una variable definida en el Component (como vimos en el ejemplo anterior)
{{ miMetodo() }} : donde miMetodo() es un método definido en el Component
¡Ojo!
No sólo hace eso una vez, sino que, si en el medio cambiamos el valor de esa variable «título», el valor se va a actualizar en la pantalla sin que nosotros hagamos nada.
Al igual que la Interpolación, Property Binding se usa para pasar datos del Controler al DOM, y los datos van en una única dirección
Fijaté que la propiedad a modificar se encierra entre «[]», si no lo encerrás de esa forma esa propiedad no se va a modificar y sera como un simple string.
Esta forma puede aplicarse tanto a un elemento, como a un componente, como a una directiva, o sea, se le pueden pasar datos a cualquiera de esos tres:
elemento: <img [src]=”vehicle.imageUrl”>
componente: <vehicle-detail [vehicle]=”currenVehicle”>
directiva: <div [ngClass] = “{selected: isSelected}”> X-Wig
¡Ojo!
Ésta es la forma de enviar «algo» del elemento al componente. Cualquier acción que haga el usuario (click, mouseover etc..) es una acción que se puede capturar. Cualquiera de esas acciones puede disparar una acción desde el elemento DOM hacia el Controlador. La forma de capturar cualquiera de esas acciones es quedarse escuchando un evento en particular y en el momento en que ocurran, ejecutar una acción.
Por ejemplo, en el Tag HTML «input» que captura datos del teclado del usuario, si uno quisiera capturar qué tecleó el usuario, se podría acceder de la siguiente forma: $event.target.value. El $event cambiará dependiendo del evento que se capture.
Es la forma de two-way bidning o su forma común «banana in a box«, es la combinación de Property binding con Event binding, o sea, mezclamos [] con () y tenemos [()].
¿Para qué se usa el two-way bindings?, para enviar datos del DOM al Componente y del Componente al DOM, por eso se llama two-way binding
Si el usuario teclea algo, el Controlador será notificado y podrá efectuar una acción con eso. Y por otro lado, si el Controlador modifica la variable nombre (por ejemplo borrando los datos) el DOM se actualizará automáticamente. ¡Y nosotros no vamos a hacer nada!
Ojo!
para que funcione la directiva NgModule hay que importar el módulo FormsModule.
Conclusiones: Restringir el acceso del DOM al Controlador y viceversa, hace nuestro código mucho más legible, más controlado y menos propenso a errores.
Cuando decidas si usar () ó [], o ambos, antes tomáte dos segundos para pensar que querés hacer: pasar datos del DOM al Controlador, del Controlador al DOM o ambos. Si tenés eso en mente, ¡tu código será mucho mejor!
https://angular.io/api/common#directives https://vanessamarely.medium.com/directivas-en-angular-efb8a8cf78e0
Las Directivas extienden la funcionalidad del HTML usando para ello una nueva sintaxis. Con ella podemos usar lógica que será ejecutada en el DOM (Document Object Model).
Cada Directiva que usamos tiene un nombre, y determina donde puede ser usada, sea en un elemento, atributo, componente o clase.
Se dividen en tres tipos diferentes:
https://angular.io/api/common/NgIf Directiva de angular para realizar condicionales dentro de un template.
<div *ngIf="name === 'Christian' && lastname === 'Sanchez'">
<p>Mi nombre es: {{name}} {{lastname}} </p>
</div>
<div *ngIf="condition">Content to render when condition is true.</div>
<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>
<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
Para iterar amigo/a!
array = ['🍎', '🍏', '🍇', '🍌', '🍑'];
addItem() {
this.array.push(this.title)
}
deleteItem(index:number) {
this.array.splice(index,1)
}
<button (click)="addItem()">Add item</button>
<ul>
<li *ngIf="array.length===0">La lista está vacía</li>
<li *ngFor="let item of array;index as i">
{{item}} ({{i}})
<button (click)="deleteItem(i)">Delete</button>
</li>
</ul>
<div [ngSwitch]="product.price">
<p *ngSwitchCase="200.0">$20.00 de descuento en tu siguiente compra</p>
<p *ngSwitchCase="500.0">Envío gratuito a toda la República Mexicana</p>
<p *ngSwitchCase="80000.0">
Envío gratuito a toda la República Mexicana + 5% de descuento extra
</p>
<p *ngSwitchDefault>Comprame!</p>
</div>
Los componentes son el bloque de construcción de UI más básico de una aplicación Angular. Una aplicación Angular contiene un árbol de componentes .
Gracias al parámetro @ podemos reconocer fácilmente que estamos hablando de un decorador. Generalmente usamos los decoradores para extender servicios de terceros, de esta manera evitamos modificar el código original del módulo y en tiempo de ejecución agregamos el funcionamiento que necesitamos.
Abierto para extension cerrado para modificacion.
Para comunicar de un componente padre a un componente hijo usamos Input y para Para pasar argumentos, desde el template padre podemos utilizar los corchetes cuadrados con el Input para pasar el argumento
Para comunicar de un componente hijo a un componente padre usamos Output.
Los Output son eventos que podemos cachar desde nuestro componente hijo por parte del padre. Para declararlos en nuestro componente tenemos que usar el decorador @Output sobre