-
Angular es una plataforma front-end basada en TypeScript que facilita la creación de aplicaciónes web/mobile/desktop. Las características principales de este marco, como las plantillas declarativas, la inyección de dependencias, las herramientas de extremo a extremo y muchas otras características, se utilizan para facilitar el desarrollo.
-
Angular esta basado completamente en componentes en donde una aplicación es un árbol de componentes individuales
Algunas de las mayores diferencias son:
AngularJS Angular Esta basado en la arquitectura MVC Esta basado eb Service/Controller Usa JavaScript para construir la aplicación Usa TypeScript para construir la aplicación Basado en el concepto de controladores Tiene un enfoque de UI basado en componentes No es un framework compatible con dispositivos mobile Desarrollado considerando la plataforma mobile Dificultades para crear una aplicación compatible con SEO Es fácil crear una aplicación compatible con SEO -
TypeScript es un subconjunto de JavaScript creado por Microsoft que agregar optional types, classes, async/await, y muchas otras características, y compila JavaScript plano. Angular esta construido completamente en TypeScript y se usa como lenguaje primario. Se puede instalar globalmente
npm install -g typescript
Un simple ejemplo de como se usa TypeScript
function greeter(person: string) { return "Hello, " + person; } let user = "Sudheer"; document.body.innerHTML = greeter(user);
El método
greetersolo permite un argumento de tipo string -
- Component: Son los bloque de construcción básicos de una aplicación angular para controlar las vistas HTML.
- Modules: En angular un módulo es un conjunto de bloques de construcción básicos como components, directives, services, etc. Una aplicación esta dividida en piezas lógicas y cada pieza de código se denomina "module" que realiza una tarea
- Template: Representa una vista en una aplicación Angular
- Services: Se usa para crear componentes que pueden ser compartidos a través de toda la aplicación
- Metadata: Pueden ser usadas para agregar mas datos a una clase de Angular
-
Los directive añaden comportamiento un elementos existentes en el DOM o a una instancia de componente existente
import { Directive, ElementRef, Input } from '@angular/core'; @Directive({ selector: '[myHighlight]' }) export class HighlightDirective { constructor(el: ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }
Esta directive extiende el comportamiento del elemento HTML con un fondo amarillo
<p myHighlight>Highlight me!</p>
-
Los Components son los bloques de construcción de UI mas básicos en una aplicación Angular que formaba un árbol de componentes Angular. Estos componentes son un subconjunto de los directives. A diferencia de los directive, los componentes siempre tendrán una plantilla y solo se puede crear una instancia de un componente por elemento en un template. Aquí un simple ejemplo de un componente de Angular:
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ` <div> <h1>{{title}}</h1> <div>Learn Angular6 with examples</div> </div> `, }) export class AppComponent { title: string = 'Welcome to Angular world'; }
-
En resumen un componente (
@component) es un directive con un template.Alguna de las diferencias mas sustanciales son:
Component Directive Para registrar un component se usa el meta-data @ComponentPara registrar un directive se usa el meta-data @DirectiveLos components normalmente se usan para crear algún Widget en el UI Los Directive se usan para agregar comportamiento a elementos existentes en el DOM Los Components se usan para separar una aplicación en pequeños componentes Los Directive se usan para diseñar componentes reusables Solo puede haber un componente por elemento DOM Se pueden usar muchas directivas por elemento DOM El decorator @View o templateurl / template son obligatorios Los Directive no usan View -
Un template es una vista HTML donde se muestran los datos uniendo controles a propiedades de un componente Angular. Se pueden guardar las los template de los componentes en uno de dos lugares. Puedes declararlos en linea usando la propiedad template, o puede definirlo en un fichero HTML separado y vincularlo en el metadatade componente usando el decorador
@Componentcon la propiedadtemplateUrlUsando inline template:
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', template: ` <div> <h1>{{title}}</h1> <div>Learn Angular</div> </div> ` }) export class AppComponent { title: string = 'Hello World'; }
Usando un fichero separado:
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { title: string = 'Hello World'; }
-
Los módulos son las fronteras lógicas de la aplicación, y la aplicación esta dividida en módulos separados para separar la funcionalidad de la aplicación. Vamos a ver un ejemplo de la raíz app.module.ts
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule ({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [] }) export class AppModule { }
El decorator
NgModuletiene 5 opciones importantes (aparte de todo)- La opción
importses usado para importar otras módulos dependientes. ElBrowserModuleees requerido por defecto en cualquier aplicación basada en web. - La opción
declarationses para definir los componentes en el módulo respectivo - La opción
bootstraple dice a Angular, cuales son los componentes para arrancar la aplicación - La opción
providersconfigura el conjunto de injectable objects que estarán disponibles en el injector para este módulo - La opción
entryComponentses el conjunto de componentes que de cargaran dinámicamente en el view
- La opción
-
Las aplicaciónes de Angular van por un conjunto de procesos o tiene ciclos de vida desde inicialización hasta el final de la aplicación.
Los ciclos de angular son:
- ngOnChanges: Cuando un valor de una propiedad de entrada (input) vinculada cambia, se llama a este método.
- ngOnInit: Es llamado siempre que ocurra la inicialización de un directive/component después de que Angular muestra por primera vez las propiedades vinculada a los datos.
- ngDoCheck: Este es para la detección y para actuar sobre los cambios que Angular no puede o no detecta por si solo.
- ngAfterContentInit: Es llamado después de que el contenido (ng-content) es proyectado en la vista. Se define para manejar cualquiera tarea de inicialización adicional.
- ngAfterContentChecked: Se llama después de que la detección de cambios predeterminada haya completado la comprobación de todo el contenido (ng-content) de un directive.
- ngAfterViewInit: Se llama después de que Angular haya inicializado completamente la vista de un componente y las vistas secundarias. Se define para manejar cualquiera tarea de inicialización adicional
- ngAfterViewChecked: Se llama después de que la detección de cambios predeterminada haya completado la comprobación de cambios en la vista de un componente.
- ngOnDestroy: Esta es la fase de limpieza justo antes de que Angular destruya el directive/component.
-
Data bindinges un concepto fundamental en Angular y permite definir comunicación entre un componente y el DOM, haciendo fácil definir aplicaciónes interactivas sin preocupaciones sobre enviar y recuperar datos. Existen cuatro formas de data binding(dividido en 3 categorías):
-
Desde el Component a el DOM (Mostrando datos)
Interpolation: {{ value }}: Añade el valor de una propiedad desde el componente
<li>Name: {{ user.name }}</li> <li>Address: {{ user.address }}</li>
Property binding: [property]="value": El valor es pasado desde el componente hacia un propiedad especifica o un atributo de HTML
<input type="email" [value]="user.email">
-
Desde el DOM hacia el componente (Reaccionando a eventos)
Event binding: (event)="function": Cuando un evento especifico del DOM ocurre (ej.: click, change, keyup), se llama a el método especificado en el componente
<button (click)="logout()"></button>
-
Two-way binding (Combinacion de ambas)
Two-way data binding: [(ngModel)]="value": Te permite tener un flujo de datos en dos sentidos. Por ejemplo, en el siguiente código, ambos el email input del DOM y la propiedad email del componente están sincronizados
<input type="email" [(ngModel)]="user.email">
-
-
Son usados para decorar clases de modo que pueda configurar el comportamiento esperado de la clase. Los meta datos están representados por decoradores.
-
Decoradores de clases: (@Component y @NgModule)
import { NgModule, Component } from '@angular/core'; @Component({ selector: 'my-component', template: '<div>Class decorator</div>', }) export class MyComponent { constructor() { console.log('Hey I am a component!'); } } @NgModule({ imports: [], declarations: [], }) export class MyModule { constructor() { console.log('Hey I am a module!'); } }
-
Decoradores de propiedades: Usado para propiedades dentro de las clases (ej.: @Input y @Output)
import { Component, Input } from '@angular/core'; @Component({ selector: 'my-component', template: '<div>Property decorator</div>' }) export class MyComponent { @Input() title: string; }
-
Decoradores de métodos: Usado para métodos dentro de la clase (ej.: @HostListener)
import { Component, HostListener } from '@angular/core'; @Component({ selector: 'my-component', template: '<div>Method decorator</div>' }) export class MyComponent { @HostListener('click', ['$event']) onHostClick(event: Event) { // clicked, `event` available } }
-
Decoradores de parámetros: Usado para parámetros dentro del constructor de una clase (ej.: @Inject, Optional)
import { Component, Inject } from '@angular/core'; import { MyService } from './my-service'; @Component({ selector: 'my-component', template: '<div>Parameter decorator</div>' }) export class MyComponent { constructor(@Inject(MyService) myService) { console.log(myService); // MyService } }
-
-
Un services es usado cuando se necesita proporcionar una funcionalidad común a varios módulos. Los servicios permiten una mayor separacion de preocupación para la aplicación y una mejor modularidad al permitir extraer funcionalidades en comun de los componentes.
Creemos un repoService que puede ser usado en varios componentes
import { Injectable } from '@angular/core'; import { Http } from '@angular/http'; @Injectable({ // The Injectable decorator is required for dependency injection to work // providedIn option registers the service with a specific NgModule providedIn: 'root', // This declares the service with the root app (AppModule) }) export class RepoService{ constructor(private http: Http){ } fetchAll(){ return this.http.get('https://api.github.com/repositories'); } }
El servicio anterior utiliza el servicio
Httpcomo dependencia. -
Las clases de TypeScript tiene por defecto un método llamado
constructorel cual es usado para propósitos de inicialización. A diferencia dengOnInitque es un método especifico de Angular, usado específicamente para definir Angular Bindings. Aunque elconstructores el primero en ser llamado, es preferible dejar los Angular binding en el métodongOnInit. Para usarngOnInitdebemos implementarOnInit.export class App implements OnInit{ constructor(){ //called first time before the ngOnInit() } ngOnInit(){ //called after the constructor and called after the first ngOnChanges() } }
-
Dependency Injection (DI), es un muy importante patrón de diseño de aplicaciónes en el que una clase pide dependencias de una fuente externas en vez de crear por si misma. Angular viene como su propio framework DI, para solucionar dependencias (servicios u objetos que una clase necesita para realizar su función). Se puede tener servicios que dependen de otros servicios atrevés de toda la aplicación.
-
Existen tres tipos de Directives
- Components: Directive con templates
- Structural directive: Cambian la diagramación del DOM agregando un quitando elementos del DOM
- Attribute directives: Cambian la apariencia o comportamiento de un componente, elemento, u otro directive.
En la siguiente tabla hay una diferencia entre Structural directive y Attribute directives
Structural Directives Attribute Directives Luce como un atributo HTML normal pero con un *adelanteLucen como un atributo HTML normal (posiblemente con un databinding o event binding) Afecta un area completa del DOM (elementos son agregados o quitados) Solo afectan/cambian el elemento en donde son agregados -
El AsyncPipe se suscribe a un observable o promesa y retorna el ultimo valor ha emitido. Cuando un nuevo valor es emitido, el pipe marca el componente para detectar cambios.
Tomemos como ejemplo un time observable que se actualiza constantemente (cada dos segundos)
@Component({ selector: 'async-observable-pipe', template: `<div><code>observable|async</code>: Time: {{ time | async }}</div>` }) export class AsyncObservablePipeComponent { time = new Observable(observer => setInterval(() => observer.next(new Date().toString()), 2000) ); }
-
En Angular se usa ngFor en un template para mostrar cada item de una lista. Por ejemplo, si se quiere iterar en la lista de usuarios
<li *ngFor="let user of users"> {{ user }} </li>
-
En ocaciones la aplicación necesita msotrar una vista o una parte de la vista solo si ocurre una circunstancia especifica. En Angular ngIf inserta o quita un elemento basandose en una condicion verdadera/falsa. Por ejemplo, si queremos mostrar un mensaje cuando la edad del usuario es mayor a 18.
<p *ngIf="user.age > 18">You are not eligible for student pass!</p>
Nota: Angualr no esta mostrando y escondiendo el mensaje. Esta agregando y quitando el elemento
<p>del DOM. Esto mejora rendimiento, en especial con grandes proyectos con muchos data binding. -
Es una sintaxis especial que Angular convierte en property binding. Esta una alternativa conveniente a property binding. Esta representado por doble llaves
{{ }}. El texto entre las llaves normalmente es el nombre de una propiedad de componente. Angular reemplaza ese nombre con la string del valor que la propiedad del componente correspondiente.Por ejemplo:
<h3> {{title}} <img src="{{url}}" style="height:30px"> </h3>
Angular evalúa las propiedades
titleyurly llena los espacios en blanco, primero mostrando el title y luego el URL. -
Un template expression produce un valor similar a cualquier JavaScript expression. Angular ejecuta la expresión y le asigna a una propiedad de un binding target. El target podría ser un elemento HTML, un componente, o un directive. En el property binding, un template expression aparece del lado derecho del símbolo
=en comillas de las siguiente manera[property]="expression". En interpolation syntax, el template expression es envuelta en doble llaves. Por ejemplo, en la siguiente interpolación, el template expression es {{username}}<h3>{{username}}, welcome to Angular</h3>
Las siguientes JavaScript expression están prohibidas en template expressions:
- Asignaciones (
=,+=,-=,...) new- Chaining expressions con
;o, - Incremento o decremento (
++y--)
- Asignaciones (
-
Un template statement responde a un event provocado por binding target, como un elemento, componente o directive. Los template statements aparecen entre comillas al lado derecho del símbolo
=como(event)="statement".Por ejemplo, un click event en un botón
<button (click)="editProfile()">Edit Profile</button>
La siguientes JavaScript expressions no son permitidas:
new- Incremento o decremento (
++y--) - Operaciones de asignación (
=,+=,-=) - Operadores bitwise (
|y&) - Los operadores de template expressions
-
Los binding types puede agruparse ene 3 categorías distinguido por la dirección en que los datos fluyen.
- source-to-view
- view-to-source
- view-to-source-to-view
Data direction Syntax Type From the source-to-view (One-way) 1. {{expression}}
2. [target]="expression"
3. bind-target="expression"Interpolation, Property, Attribute, Class, Style From view-to-source (One-way) 1. (target)="statement"
2. on-target="statement"Event View-to-source-to-view (Two-way) 1. [(target)]="expression"
2. bindon-target="expression"Two-way -
Un pipe acepta datos como entrada y la transforma al diseño que deseamos. Por ejemplo, vamos a tomar un pipe para transformar la propiedad
birthdayde un componente en una dato mas human-friendlyimport { Component } from '@angular/core'; @Component({ selector: 'app-birthday', template: `<p>Birthday is {{ birthday | date }}</p>` }) export class BirthdayComponent { birthday = new Date(1987, 6, 18); // June 18, 1987 }
-
Un pipe puede aceptar cualquier numero parámetros opciones para afinar el output. El parametrized pipe puede ser crear declarando el nombre del pipe seguido de dos puntos (
:) y luego el valor del parámetro. Si el pipe acepta varios parámetros, se separan con dos puntos (:)import { Component } from '@angular/core'; @Component({ selector: 'app-birthday', template: `<p>Birthday is {{ birthday | date:'dd/MM/yyyy'}}</p>` // 18/06/1987 }) export class BirthdayComponent { birthday = new Date(1987, 6, 18); }
Nota: El valor de parámetro puede ser cualquier template expression valido, tales como un string literal o una propiedad de componente.
-
Se pueden encadenar varios pipes en combinaciones potencialmente útiles. Si usamos el ejemplo anterior sobre birthday
import { Component } from '@angular/core'; @Component({ selector: 'app-birthday', template: ` <p>Birthday is {{ birthday | date:'fullDate' | uppercase}} </p>` // THURSDAY, JUNE 18, 1987 }) export class BirthdayComponent { birthday = new Date(1987, 6, 18); }
-
Aparte de los que vienen con Angular, podemos escribir nuestros propios pipes con las siguientes características
-
Un pipe es una clase decorada con un pipe metadata
@Pipe, la cual se importa desde el core de la librería de angular.@Pipe({name: 'myCustomPipe'})
-
La clase pipe implementa un interface PipeTransform --- que acepta un valor input seguido de parámetros opcionales y retorna el valor transformado. La estructura de PipeTransform seria la siguiente
interface PipeTransform { transform(value: any, ...args: any[]): any }
-
El decorador
@Pipete permite definir el nombre del pipe que se usara dentro de las template expressions. Debe ser un JavaScript identifier valido.template: `{{someInputValue | myCustomPipe: someOtherValue}}`
-
-
Se puede crear un pipe personalizado y reusable para transforma valores existentes. Por ejemplo, el siguiente custom pipe entrar el tamaño del archivo en función de una extension
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'customFileSizePipe'}) export class FileSizePipe implements PipeTransform { transform(size: number, extension: string = 'MB'): string { return (size / (1024 * 1024)).toFixed(2) + extension; } }
Ahora se puede usar este pipe en el siguiente template expression
template: ` <h2>Find the size of a file</h2> <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p> `
-
Notifications
You must be signed in to change notification settings - Fork 1
AGutierrezR/angular-preguntas-entrevista
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published