Angular es uno de los marcos de JavaScript más populares en uso en la actualidad; si está desarrollando una aplicación, merece consideración. Echemos un vistazo rápido a sus características clave.
Angular en el mundo real
Angular es uno de los marcos de JavaScript más populares en uso hoy en día. Con el respaldo de una gran empresa (Google) y el uso generalizado en el mundo corporativo, sin duda merece consideración cuando planifique su próximo desarrollo de aplicaciones. En este blog, echaré un vistazo rápido a las funciones clave de Angular.
Angular fue creado por Google y se lanzó originalmente en 2010 como AngularJS, la versión 1.x. El lanzamiento inicial de la versión Angular 2.x fue el 14 de septiembre de 2016. Si bien el lanzamiento inicial de las versiones preliminares alfa y beta existió en 2015, en el otoño de 2016 es cuando comenzamos a ver una tracción real en el uso.
La segunda revisión principal se denominó inicialmente AngularJS 2 o 2.0, pero luego se le cambió el nombre a solo "Angular" para la versión 2.0 y posteriores. La versión 5.x en beta acababa de publicarse en el momento de escribir esto. Si siente que falta algo, es la versión 3, porque se omitió. Mientras Angular estaba en la versión 2.0, el enrutador Angular ya estaba en la versión 3, por lo que para sincronizar todo, saltaron de 2.x a 4.x.
Angular es una biblioteca gratuita y sin licencia, por lo que no hay estadísticas de uso perfectas, pero hay varios lugares en los que podemos buscar una buena idea. Angular tiene más de 32 000 estrellas en GitHub y más de 1 millón de descargas npm por mes al momento de escribir este artículo. Por supuesto, parte de este tráfico podría provenir de máquinas de desarrollo o espejos, pero estas son buenas estadísticas rápidas para tener una idea de cuán popular es la biblioteca.
Descargar estadísticas para el paquete “angular”2015-2017 – datos por npm-stat.com
Estadísticas de uso angular
32K+ estrellas en GitHub
Más de 1 millón de descargas de NPM al mes
Angular obviamente está teniendo mucho uso. Pero, ¿qué es Angular? Echemos un vistazo rápido a los conceptos básicos involucrados en Angular. Veremos 4 cosas principales:componentes, inyección de dependencia, enlaces de propiedad y TypeScript.
Conceptos centrales angulares
Componentes
Inyección de dependencia
Enlaces de propiedad
Mecanografiado
Componentes
Casi todo en Angular es un componente. Incluso la propia aplicación, en la raíz de la aplicación, es en realidad un componente. Ya sea un elemento personalizado o una aplicación general de una sola página, todo es un componente o un conjunto de componentes. Tienes un árbol de componentes que va desde la raíz hasta todo lo que tenemos que trabajar listo para usar desde Angular, o algo que creamos nosotros mismos. Hay otros aspectos de Angular que no son componentes, pero gran parte de lo que escribimos como desarrolladores trata específicamente con componentes:los datos fluyen a través de una propiedad de entrada y salen a través de una propiedad de salida.
En el siguiente ejemplo, vemos un componente que tiene algunos enlaces y tenemos un selector que se llama "mi aplicación". Se puede usar más tarde en otro componente con my-app como etiqueta. Esto nos da una forma de tomar una parte de la funcionalidad y aislarla y convertirla en su propio módulo. A partir de ahí, podemos reutilizarlo en otros módulos similares o solo en la aplicación general principal.
import { Component } from '@angular/core' ; @Component({ selector: 'my-app' , template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> ` }); export class AppComponent { title = 'Tour of Heroes' ; myHero = 'Windstorm' ; } que se puede utilizar como:
<my-app></my-app>
Cada componente tiene un ciclo de vida administrado por Angular. Si creamos un componente, automáticamente aprovechamos el ciclo de vida que proporciona Angular. De ese ciclo de vida, hay varios ganchos que podemos aprovechar y cada componente tiene este conjunto de ganchos. Son eventos a los que esencialmente podemos suscribirnos para poder hacer algo dentro de ese componente. Con solo declarar y crear un componente, automáticamente tenemos este ciclo de vida que aplica Angular, ya sea cuando inicializamos la aplicación, la vista y el componente, o cuando destruimos los componentes.
Enganches de componentes
ngOnChanges()
ngOnInit()
ngDoCheck()
ngAfterContentInit()
ngAfterContentChecked()
ngAfterViewInit()
ngAfterViewChecked()
ngOnDestroy()
Las propiedades de entrada son esencialmente la forma en que tratamos y permitimos la transferencia de datos entre un componente y el siguiente. Por ejemplo, a continuación podemos ver que tenemos una etiqueta de imagen que podemos vincular a la fuente de varias maneras diferentes.
El primer enfoque que utiliza la sintaxis de doble paréntesis aquí es la interpolación. Eso se puede usar si su propiedad es una cadena. En este caso, myProfilePic, por ejemplo, es una URL. Podemos muy fácilmente vincularlo a través de estos corchetes dobles aquí. El uso de corchetes en el atributo se puede usar en escenarios en los que no es una cadena simple. Si queremos tener un valor de retorno que salte de la función o lo que sea, podríamos usar algo así aquí.
<img src="{{ myProfilePic }}"> <img [src]="myProfilePic">
<img bind-src="myProfilePic">
El atributo de vinculación es en realidad el mismo enfoque que usar los corchetes, pero es posible que no se use, ya que puede ser un poco más fácil de leer con los corchetes cuando se trata de atributos a los que probablemente estamos bastante acostumbrados. .
En el siguiente ejemplo, estamos trabajando con el mismo componente que teníamos arriba. Esta es una etiqueta de imagen, pero será lo mismo que si pasara algunos datos particulares de un componente que está disponible.
@Component({ selector: 'my-app' , template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> ` }); export class AppComponent { title = 'Tour of Heroes' ; myHero = 'Windstorm' ; } Las propiedades de salida suelen ser eventos enviados por el componente. En el siguiente ejemplo, vemos que tenemos un botón donde tenemos la posibilidad de votar, y podemos votar verdadero o falso. Vemos que tenemos una etiqueta @output aquí en Votado, que es un nuevo emisor de eventos. Si estoy en un componente secundario y quiero poder impulsar que algo suceda dentro de ese componente secundario y quiero que el elemento principal pueda reaccionar, puedo pasar un evento y decir "bien". cuando ocurra este evento, emitamos este evento”, y luego enviará los datos nuevamente al padre.
import { Component, EventEmitter, Input, Output } from '@angular/core' ; @Component({ selector: 'my-voter' , template: ` <h4>{{name}}</h4> <button (click)= "vote(true)" [disabled]= "voted" >Agree</button> <button (click)= "vote(false)" [disabled]= "voted" >Disagree</button> ` }) export class VoterComponent { @Input() name: string; @Output() onVoted = new EventEmitter<boolean>(); voted = false ; vote(agreed: boolean) { this .onVoted.emit(agreed); this .voted = true ; } } En lugar de tener un enlace bidireccional entre un componente principal y un componente secundario, Angular y muchos otros marcos generalmente se ocupan del enlace unidireccional. La bidireccionalidad está reservada para los elementos de entrada, y luego también tendemos a trabajar con eventos para devolver algo, o tal vez incluso una capa de servicio para poder enviar datos y mantener el estado. En general, no hacemos muchos enlaces bidireccionales entre componentes.
Inyección de dependencia
Para comprender el concepto de inyección de dependencia, veamos un escenario de la documentación de Angular. En el siguiente ejemplo, tenemos una clase de automóvil que tiene un motor, llantas y una descripción. Luego, en el constructor, cuando esto se inicializa, tenemos this.engine es igual a un nuevo Engine, y this.tires es igual a new Tires. Cada vez que creamos un auto nuevo, estamos creando su propia copia de motor y neumático.
export class Car { public engine: Engine; public tires: Tires; public description = 'No DI' ; constructor() { this .engine = new Engine(); this .tires = new Tires(); } } Esto es un poco frágil, sin embargo. ¿Qué pasa si es necesario cambiar el motor o las llantas, y si queremos tener un juego diferente de llantas en el auto, o si queremos tener un motor ligeramente diferente en cada auto individual? Realmente no podemos hacer eso porque constantemente estamos creando una nueva versión de motor y una nueva versión de neumáticos aquí en este constructor sin poder cambiar eso. Más o menos tendríamos que crear un montón de diferentes clases de autos con estos diferentes motores. No hay flexibilidad en la personalización de un automóvil, un motor o un neumático en ningún momento a lo largo de este tipo de configuración.
Con la inyección de dependencia, podemos tomar el constructor y pasar un motor y pasar neumáticos.
export class Car { public description = 'No DI' ; constructor(public engine: Engine, public tires: Tires) { } } Ahora estamos consumiendo motores y neumáticos, no necesariamente creándolos. Esto nos permite pasar instancias.
let car = new Car(new Engine(), new Tires());
Podemos, por ejemplo, pasar un motor nuevo o un neumático nuevo, o si ya tenemos versiones existentes de motor y neumático, podemos pasarlos. Podemos crear una nueva clase de motor que nos permita pasar el número de cilindros que queremos poder tener para el motor, y ahora podemos crear un auto nuevo usando esa sintaxis.
class EngineNew { constructor(public cylinders: number) { } } let bigCylinders = 12; let car = new Car( new EngineNew(bigCylinders), new Tires()); La inyección de dependencia no es exclusiva de Angular, pero es algo que vemos constantemente en las aplicaciones de Angular y es un concepto que debemos comprender cuando comenzamos a aprender Angular.
Mecanografiado
TypeScript es un superconjunto escrito de JavaScript que se compila en JavaScript simple. Aporta escritura estática y estructuración a JavaScript. Su objetivo es ayudar a crear aplicaciones web grandes y complejas y, a menudo, los grupos empresariales lo eligen. Es muy familiar para la gente en un entorno de desarrollo, y a muchos desarrolladores de Java también les gusta la escritura estática y les gusta retomar esto en el lado del cliente.
Angular se ha estandarizado en TypeScript desde el principio. Puede trabajar con JavaScript simple si lo desea, pero TypeScript tiende a ser cada vez más popular. Verá muchas muestras ejecutándose en TypeScript. Gran parte de la comunidad está escribiendo blogs, artículos, recursos y aplicaciones de muestra en TypeScript y, con frecuencia, va de la mano con Angular.
Cómo empezar
La forma más fácil de comenzar es a través de Angular CLI. Angular puede ser complicado de configurar desde cero porque debe personalizarse un poco para poder generar la aplicación. Probablemente también necesite trabajar con algo como Webpack, Babel, etc. para poder pasar de TypeScript y compilar a JavaScript. Debido a esto, necesitamos tener un paso de compilación y poder liberarlo en el cliente. La CLI nos ayuda a crear nuevos proyectos, configura todo para nosotros, incluso con pruebas unitarias. Fuera de la caja, puede configurarlo con Webpack.
Todo lo que necesita hacer es usar NPM. Simplemente puede hacer "NPM install -g @AngularCLI". Luego, tiene acceso a la línea de comando de ng, por lo que "ng nueva aplicación", "cd mi aplicación" y "ng serve -open", que nos permite iniciar la aplicación en el navegador.
# Install the Angular CLI
$ npm install -g @angular/cli
# Create our new app
$ ng new my-app
# Start our app
$ cd my-app
$ ng serve --open
También puede usar "ng serve", pero --open lo trae al navegador actual.
ng-serve --open
¿Qué sigue?
Cubrimos una gran cantidad de contenido rápidamente para presentar un "sabor" de Angular, y no hemos hecho más que arañar la superficie. Sin embargo, esto debería ser suficiente para dar a todos una visión de alto nivel de lo que tenemos disponible en Angular.
Ahora que ha echado un vistazo rápido a Angular, ¿es Angular la opción correcta para usted? Hay otros marcos que son muy populares:React y Vue en particular. Angular es muy diferente a React o Vue, y si es o no la opción correcta para ti depende de varios factores.
Para obtener una visión más detallada de los diferentes marcos y para qué aplicaciones son más adecuados, consulte nuestro documento técnico "Elegir un marco de JavaScript".
Leer:Elegir un marco de JavaScript
Obtenga una interfaz de usuario increíble para su aplicación
Un último punto a destacar, porque trabajo en el equipo de interfaz de usuario de Kendo, es que no importa con qué marco de trabajo decida trabajar, o si decide que no necesita ningún marco de trabajo, tendrá que completar su aplicación. con componentes de interfaz de usuario que presentan datos e interactúan con el usuario. La mejor opción es, por supuesto, la interfaz de usuario de Progress Kendo. La biblioteca de interfaz de usuario de Kendo incluye todo, desde cuadrículas de datos y gráficos hasta botones e indicadores, y es compatible con todos los marcos populares. Los componentes de la interfaz de usuario de Kendo le permiten concentrarse en su diferenciación principal y, al mismo tiempo, brindar una experiencia de usuario enriquecida. Puede encontrar más información y descargar una versión de prueba gratuita de la biblioteca de interfaz de usuario de Kendo hoy.
Pruebe la interfaz de usuario de Kendo