Introducción a Angular 2 Cheat Sheet
Angular 2 es un marco de código abierto que se ha creado sobre JavaScript. Se ha utilizado principalmente para desarrollar aplicaciones web front-end. Es el sucesor de AngularJS. Está escrito en TypeScript. Está desarrollado por Google. Angular 2 se basa en JavaScript moderno que usa ES6. Angular 2 tiene mejores capacidades de manejo de eventos, plantillas potentes, mejor soporte para dispositivos móviles y aplicaciones web de escritorio también. También es compatible con dispositivos móviles y en todas las plataformas como Windows, Mac y Linux.
Angular 2 tiene características clave para desarrollar aplicaciones que son componentes, mecanografiados y servicios. Angular 2 tiene diferentes componentes que son módulos, componentes, plantillas, metadatos y servicio. Los componentes ayudan a crear aplicaciones en muchos módulos y ayudan a mantener la aplicación durante más tiempo. El diferente conjunto de código ha sido mantenido y utilizado por diferentes módulos de aplicación atendidos por la función de servicio. Los módulos ayudan a dividir la aplicación en una pieza lógica que se codificó para realizar una tarea en particular.
Comandos y contenido en Angular 2 Cheat Sheet
La hoja de trucos de Angular 2 tiene una biblioteca extensa, escalable, extensible, interactiva y contiene muchos métodos integrados para calcular operaciones comunes. Hay diferentes sintaxis para plantillas, NgModules, directivas integradas, formularios y otras configuraciones disponibles a continuación:
| Sintaxis de plantilla | DESCRIPCIÓN |
| Vincula la propiedad 'valor' al resultado de expresión 'nombre' | |
| Vincula el atributo 'rol' al resultado de expresión 'mi rol' | |
| Llamará al método read Text, cuando se active el evento click. | |
| Vincula la propiedad a una cadena interpolada | |
|
Hola mi nombre)) | Vincula el contexto a una cadena interpolada |
| Configura el enlace bidireccional. | |
|
… | * El símbolo convierte el elemento actual en una temperatura incrustada. |
|
Estudiante: ((estudiante? .Sname)) | ? Este operador de navegación le dice al alumno que el campo es opcional |
| Vincula el ancho de la propiedad de estilo para expresar el resultado mysize. | |
| Se utiliza para el enlace de datos y la expresión de enlace de eventos en la plantilla. | |
|
Número de automóvil: ((número de vehículo | myCarNuFormat)) | Transforma el valor actual del número de vehículo a través de la tubería mycarNuformat. |
| Desambigua el elemento de un componente HTML | |
| Se une la presencia de clase en la expresión de la verdad. |
NgModules: - Las diferentes directivas de Ngmodule son:
| Directivas | DESCRIPCIÓN |
| @NgModule ((declaraciones ..)) | Define un módulo que contiene directivas, etc. |
| declaraciones: (MyRedComponent, MyBlueComponent, MyDatePipe) | Le indicará la lista de componentes, directivas y tuberías que pertenecen a este módulo. |
| exportaciones: (MyRedComponent, MyDatePipe) | Enumerará los componentes y tuberías visibles para importar este módulo. |
| importaciones: (BrowserModule, SomeOtherModule) | Enumerará los módulos para importar a este módulo. |
| proveedores: (MyService, (proporcionar: …)) | Proporciona la lista de proveedores de inyección de dependencias visibles tanto para el contenido del módulo. |
| entryComponents: (SomeComponent, OtherComponent) | Proporcionará la lista de componentes a los que no se hace referencia en una plantilla accesible. |
Hay otras directivas y detección de cambios de componentes y ganchos de ciclo de vida disponibles que se pueden implementar como métodos de clase a continuación:
| Directivas | Descripción |
| constructor (myService: MyService, …) (…) | Se usa para inyectar dependencias. |
| ngOnChanges (changeRecord) (…) | Se llama después de cada cambio a las propiedades de entrada y antes de procesar contenido o vistas secundarias |
| ngOnInit () (…) | Se llama después del constructor y de las propiedades de inicialización. |
| ngDoCheck () (…) | Se llama cada vez que se verifican las propiedades de componentes o directivas. Se utiliza para extender para realizar un control de aduanas. |
| ngAfterContentInit () (…) | Se llama después de ngOninit cuando se ha inicializado el contenido de componentes o directivas. |
| ngAfterContentChecked () (…) | Se llama después de cada verificación del contenido del componente o la directiva. |
| ngAfterViewInit () (…) | Se llama después de ngaftercontentint cuando las directivas vistas de componentes y vistas secundarias se han inicializado. |
| ngAfterViewChecked () (…) | Se llama después de cada comprobación de vistas de componentes y vistas secundarias en las que ya se encuentra la directiva. |
| ngOnDestroy () (…) | Se llama una vez, antes de destruir la instancia. |
Consejos y trucos gratuitos sobre el uso de comandos de Cheat Sheet de Angular 2: -
- En la hoja de trucos Angular2, platformBrowserDynamic (). BootstrapModule (AppModule); ayuda en el arranque de la aplicación, utilizando el componente de lata raíz del especificado.
- En Angular2, bootstrap: (MyAppComponent) enumerará los componentes a bootstrap cuando este módulo se inicie.
- Esto está integrado en la directiva en angualr2 para eliminar o recrear una parte del árbol Dom en función de la expresión.
- convierte el elemento de la lista y su contenido en plantilla y se está utilizando para crear una vista de cada elemento de la lista.
- "ConditionExpres sion"> esta directiva se está utilizando para seleccionar las plantillas en función del valor de la expresión o en palabras simples como cambiar mayúsculas y minúsculas.
- , estas directivas le permiten asignar estilos a un elemento HTML utilizando CSS y se puede acceder directamente a este CSS.
- Esta directiva vincula las clases CSS en el elemento a valores de mapa confiables.
- Esta directiva proporciona el enlace bidireccional, el análisis y la validación de los controles de formulario.
- selector: '.cool-button: not (a)' esta es la configuración de la directiva que especifica el selector CSS que identifica esta directiva en la plantilla. No es compatible con el selector padre-hijo.
- proveedores de video: (MyService, (proporcionar: …)) proporciona la lista de proveedores de inyección de dependencia para directivas y niños.
- (proporcionar: MyService, useClass: MyMockService) establecerá o anulará el proveedor para el servicio a la clase.
- (proporcionar: Mi valor, usar Valor: 4) establecerá o anulará el valor del proveedor a 4
Conclusión - Angular 2 Cheat Sheet
La hoja de trucos de Angular 2 tiene muchas características y diferentes directivas, hay módulos disponibles para el desarrollo que ayudan a hacer que la aplicación sea más interactiva para que el usuario y los desarrolladores puedan rastrear problemas y funcionalidades. Es extenso y reutilizable para otras aplicaciones. Angular2 está utilizando el mecanografiado que es completamente diferente de la versión anterior de AngularJS.
La hoja de trucos angular 2 es más fácil de aprender ya que su curva de aprendizaje es simple y directa para principiantes y también para estudiantes. El conocimiento de JavaScript sería una ventaja al usar angular para el desarrollo. Siempre es bueno volver a capacitarnos.
Artículos recomendados
Esta ha sido una guía para la Hoja de trucos de Angular 2. Aquí hemos discutido el contenido y el comando, así como consejos y trucos gratuitos de la Hoja de trucos de Angular 2. También puede consultar el siguiente artículo para obtener más información:
- La hoja de trucos de UNIX
- Hoja de trucos HTML
- Hoja de trucos CCNA
- Hoja de trucos JQuery