Angular (framework)
| ||||||||||||||
Angular es un framework de Javascript. Es una evolución de AngularJS, aunque fue totalmente reescrito su código fuente. Utiliza TypeScript y HTML para crear aplicaciones. Ofrece a los desarrolladores la disponibilidad de todas las funciones que necesita para crear una aplicación web o móvil compleja y sofisticada.
Sumario
Características
Posee características como componentes, directivas, formularios, canalizaciones, servicios HTTP, inyección de dependencia, etc.
El componente es el bloque de construcción principal de una aplicación de Angular. Un componente contiene la definición de la vista y los datos que definen cómo se ve y se comporta la vista. Son clases simples de JavaScript y se definen usando el decorador @component. Este decorador proporciona al componente la vista para mostrar y los metadatos sobre la clase.
La directiva de Angular permite manipular el DOM. Puede cambiar la apariencia, el comportamiento o el diseño de un elemento DOM utilizando las directivas. Te ayudan a extender el HTML. Las directivas de Angular se clasifican en tres categorías según su comportamiento. Son directivas de componentes, estructurales y de atributos.
| Directiva | Categoría | Texto de cabecera |
|---|---|---|
| *ngIf | Directiva Estructural | Permite mostrar / ocultar elementos del DOM |
| *ngFor | Directiva Estructural | Permite ejecutar bucles sobre elementos del DOM |
| *ngSwitch | Directiva de atributo | Permite ejecutar casos condicionales sobre elementos del DOM. |
| *ngStyle | Directiva de atributo | Permite cambiar las propiedades del elemento HTML seleccionado. |
| *ngClass | Directiva de atributo | Permite agregar clases dinámicamente sobre el elemento HTML seleccionado. |
| *ng g directives, nameofdirective | Directivas customizadas | Creadas por los desarrolladores |
| @Component, @Module | Directivas de Angular | creadas por los desarrolladores mediante a la instrucción: |
Decorador @input. Le indica a un componente que puede recibir un valor desde el componente padre. Ejemplo:
home.components.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-cincocurso',
templateUrl: '
<p>
{{value}}
</p>',
styleUrls: ['./cincocurso.component.scss']
})
export class CincocursoComponent implements OnInit {
@input () value:string;
}
|
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-component',
templateUrl: '
<app-cincocurso [value]="Hello Cuba"></app-cincocurso>',
})
export class AppComponent implements OnInit {
}
|
Decorador @output.
Las Pipes de Angular se utilizan para transformar los datos. Por ejemplo, la Pipe de fecha formatea la fecha de acuerdo con las reglas de configuración regional. Se puede pasar argumentos a Pipes y cadenas. Angular también permite crear el Custom Pipe.
Modulos
Angular permite agrupar los componentes semejantes en modulos que después se pueden reutilizar en otra aplicación. Para crear un nuevo modulo se escribe en la consola:
ng generate module nombre
Instalación
Pasos para instalar Angular 12
- Instalar primero nodejs en su página oficial, nodejs.org.
- Una vez que se escoge la carpeta donde se instalará Angular 12 se instala Angular CLI con el siguiente código en la consola:
- npm install -g @angular/cli
Versiones
La primera versión de Angular se denominó Angular 2. Luego, más tarde, se le cambió el nombre a Angular. Con el paso de los años, Angular Team lanza nuevas versiones de Angular Regularmente y la última versión estable que está disponible en Angular 12.1.4 (28 de julio de 2021)
Todas las versiones de angular
- Angular 2 14.09.2016 versión inicial de Angular
- Angular 4 23.03.2017 versión 4
- Angular 5 11.11.2017 versión 5
- Angular 6 03-05-2018 versión 6
- Angular 7 18-10-2018 versión 7
- Angular 8 25-08-2019 versión 8
- Angular 9 06-02-2020 versión 9
- Angular 10 24-06-2020 versión 10
- Angular 11 11-11-2020 versión 11
- Angular 12 12-05-2021 versión 12
Diferencias entre Angular y AngularJs
La semejanza en los nombres puede traer confusión al lector que desconoce ambos lenguajes de programación. No obstante, son incompatibles entre si, y Angular contiene disímiles de características que lo convierten en superior al anterior.
- Angular no tiene un concepto de "scope" o controladores; en cambio, utiliza una jerarquía de componentes como su principal característica arquitectónica.
- Angular tiene una sintaxis de expresión diferente, centrándose en "[]" para el enlace de propiedades y "()" para el enlace de eventos
- Modularidad: gran parte de la funcionalidad principal se ha trasladado a los módulos
- Angular recomienda el uso del lenguaje TypeScript de Microsoft, que presenta las siguientes características:
- Escritura estática, incluidos genéricos
- Anotaciones
- TypeScript es un superconjunto de ECMAScript 6 (ES6) y es compatible con versiones anteriores de ECMAScript 5 (es decir, JavaScript).
- Carga dinámica
- Compilaciones de plantillas asincrónicas
- Devoluciones de llamada iterativas proporcionadas por RxJS.
- Soporte para Angular Universal, que ejecuta aplicaciones Angular en servidores.
