¿Qué hay dentro de 8?

Sep 12, 2025
Cómo
Angular 8
[dieciséis] (Crédito de la imagen: Futuro)

Angular 8 es la última versión de Google's Angular, uno de los Los mejores marcos de JavaScript alrededor. En este artículo, correremos a través de lo que es especial en Angular 8, y le mostraremos cómo comenzar. Primero, una breve mirada hacia atrás en lo que ha sucedido con el marco hasta ahora.

La introducción de Angular llevó a un cambio de paradigma en el desarrollo web: mientras la mayoría de las bibliotecas se limitaron a brindar apoyo a los desarrolladores con un impacto arquitectónico relativamente limitado, el equipo de desarrolladores de Angular fue en la otra dirección. Su producto lo obliga a usar una arquitectura específica, con desviaciones que van desde difíciles a inútiles. De hecho, la mayoría del código angular se extiende a través de un cuadro de herramientas de transpiración relativamente complejo antes de que alguna vez llegue al navegador.

Debido al inmenso éxito de angular, tanto dentro como fuera de Google Inc, el desarrollo ha sido, por y grande, estabilizado. Esto significa que los cambios de código de rotura son pocos, mientras que las actualizaciones semestrales se enfocan en adaptar el marco a los cambios en el paisaje de navegación web.

En el caso de la angular 8, por ejemplo, se implementa un nuevo compilador de JavaScript (aunque todavía experimentalmente). Optimiza el código de compatibilidad generado para ser significativamente más pequeño y más rápido a expensas de los navegadores mayores. Además, el soporte del trabajador web está integrado para aumentar la capacidad de procesamiento de Angular. En resumen, hay mucho que ver, así que déjanos sumergirnos justo.

Si prefiere diseñar un sitio sin código, intente uno de estos fáciles Constructores de sitios web . Y hacer que las cosas funcionen incluso más suaves, consiga su Alojamiento web Servicio a la derecha.

01. Ejecutar una versión de verificación

El pan de herramientas de Angular vive dentro del entorno Nodejs. A partir de este escrito, se necesita NODE.JS 10.9 o mejor, si se encuentra en una versión anterior, Visite el sitio web de nodo.js y obtener una actualización. El código a continuación muestra el estado de la versión en esta máquina. 

 Tamhan @ Tamhan18: ~ $ Nodo -V
v12.4.0
Tamhan @ Tamhan18: ~ $ NPM -V
6.9.0

02. Instale angular

El cuadro de herramientas de Angular reside en una utilidad de línea de comandos nombrada ng . Se puede instalar a través del conocido NPM. 

 Tamhan @ Tamhan18: ~ $ sudo npm install -g @ angular / cli
Tamhan @ Tamhan18: ~ $ ng versión

Tenga cuidado de responder a la pregunta que se muestra en la imagen de abajo.

Click the icon in the top right to enlarge

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar (Crédito de la imagen: Tam Hanna)

Obtener información de la versión Fuera de la herramienta es bastante difícil, no solo la sintaxis es única, sino que la salida también es verbosa (consulte la imagen a continuación).

Click the icon in the top right to enlarge

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar (Crédito de la imagen: Tam Hanna)

03. Crea un proyecto esqueleto.

ng Genera los andamios angulares para nosotros. En los siguientes pasos, queremos agregar enrutamiento, y use SASS para la transpiración CSS. Si el despliegue falla por alguna razón, vacíe el directorio de trabajo y reinicie ng Con derechos de superusuario. 

 Tamhan @ Tamhan18: ~ $ MKDIR angularSpace
Tamhan @ Tamhan18: ~ $ cd angularspace /
Tamhan @ Tamhan18: ~ / angularSpace $ ng Nuevo Workerest

04. Arnés de carga diferencial

La nueva versión de Angular optimiza el código compatible hacia atrás para un impacto reducido: un archivo llamado lista de navegadores Le permite decidir qué navegadores deben ser apoyados. Abierto lista de navegadores y quitar la palabra no delante de IE 9 a IE11. 

. . .
& gt; 0.5%
Últimas 2 versiones
Firefox ESR
no muerto
Es decir, 9-11 # para IE 9-11 Soporte, elimine 'No'.

05. ... y ver los resultados.

Ordene una compilación del proyecto, cambie a la carpeta de distribución y purgue los archivos de mapas innecesarios. 

 Tamhan @ Tamhan18: ~ / angularSpace / WorkerTest $
sudo ng construir
Tamhan @ Tamhan18: ~ / angularSpace / Workerest / Dist / WorkerTest $ LS

Invoque el árbol para ver los resultados. ng Crea varias versiones de varios archivos de código (consulte la imagen a continuación).

Click the icon in the top right to enlarge

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar (Crédito de la imagen: Tam Hanna)

06. Slete un trabajador web

Los trabajadores web permiten a JavaScript entrar en la última frontera de aplicaciones nativas: procesamiento masivamente paralelo de tareas. Con angular 8, se puede crear un trabajador web desde la comodidad de la ng Utilidad de la línea de comandos. 

 Tamhan @ Tamhan18: ~ / angularSpace / WorkerTest $
sudo ng genera al trabajador web Myworker
Crea tsconfig.worker.json (212 bytes)
Crea SRC / APP / MYWorker.Worker.ts (157 bytes)
Actualizar tsconfig.app.json (236 bytes)
Actualizar angular.json (3640 bytes)

07. Explora el código

ng La producción es probable que se vea intimidante a primera vista. Abriendo el archivo src / app / myworker.worker.ts en un editor de código de la elección revela un código que debe saber bien de la Trabajador web especificación. En principio, el trabajador recibe mensajes y los procesa según sea necesario. 

 /// & lt; referencia lib = "webworker" / & gt;
AddEventListener ('Mensaje', ({Data}) = & gt; {
 Respuesta const = `Respuesta del trabajador a
$ {datos} `;
 Postmessage (respuesta);
});

08. Configurar andamios

Las aplicaciones angulares consisten en componentes. Disparando nuestro trabajador web se hace mejor dentro de la Componente , que se expande para incluir a un oyente para el Oninit evento. Por ahora, solo emitirá información de estado. 

 Importar {componente, Oninit} de '@ angular / núcleo';
@Componente({
. . .
})
Clase de exportación AppComponent implementa ONINIT {
 title = 'workerest';
 ngoninit () {
   console.log ("AppComponent: Oninit ()");
 }
}

09. No te preocupes por la falta de constructor.

Los desarrolladores de tiposcript experimentados se preguntan por qué nuestro código no usa el constructor proporcionado por el lenguaje de programación. La razón de eso es que ngoninit es un evento de ciclo de vida que se despidence cada vez que se realiza un evento de inicialización, esto no necesita estar correlacionado con la invocación de la clase.

10. Ejecutar una pequeña carrera de compilación

En este momento, el programa está listo para correr. Lo ejecutaremos desde el servidor dentro de ng , que se puede invocar a través del comando Servicio. Un aspecto aseado de este enfoque es que el programa detecta cambios y recompila el proyecto sobre la marcha. 

 Tamhan @ Tamhan18: ~ / angularSpace / WorkerTest $
sudo ng servir

Eche un vistazo a la figura para ver esto en acción en la imagen de abajo.

Hit the icon in the top right to enlarge the image

[dieciséis] Pulsa el icono en la parte superior derecha para ampliar la imagen. (Crédito de la imagen: Tam Hanna)

11. ... y encuentra la salida.

ng servir Putputs la dirección de su servidor web local, que suele ser http: // localhost: 4200 / . Abra la página web y abra las herramientas del desarrollador para ver la salida de estado. Manten eso en mente console.log Sale los datos a la consola del navegador y abandonan la consola de la instancia de NODEJS intacto.

12. Ponte al trabajo

En este momento, creamos una instancia del trabajador y le proporcionamos un mensaje. Sus resultados se muestran luego en la consola del navegador. 

 Si (TipoF obrero! == 'indefinido') {
 // Crear un nuevo
 const trabajador = nuevo trabajador ('./ MyWorker.Worker', {Type: 'Module'});
 trabajador.onMessage = ({Data}) = & gt; {
   console.log ('Página obtuve mensaje: $ \
{datos\}');
 };
 trabajador.postmessage ('hola');
} demás {
     console.log ("Sin soporte para trabajadores");
}

13. Explora Ivy

Las futuras versiones de angular utilizarán un compilador más avanzado, lo que llevó a vistas aún más pequeñas. Si bien el producto aún no está terminado, se puede generar un esqueleto habilitado para IVY a través de NG New Ivy-Project - Habilitar-Ivy . Alternativamente, cambie la configuración del compilador como se muestra en el fragmento. 

 "Compileropciones angulares ": {
       "Activo": cierto
}

Una palabra de advertencia: Ivy conduce a increíbles reducciones de tamaño, pero no es gratis. El producto aún no se ha estabilizado, por lo que no se recomienda usarlo en entornos productivos.

14. Intente el procesamiento de NG modificado.

Angular ng Herramienta de línea de comandos usó scripts infantiles internamente durante algún tiempo. Angular 8 UPS La ANTE que puede ahora, también use esta instalación para ejecutar sus propias tareas, ya que su aplicación está ensamblada y compilada. 

 "Arquitecto": {
       "construir": {
         "Constructor": "@ angular-devkit /
Build-angular: navegador ",

Una aplicación ordenada de ng Los scripts implican cargar directamente aplicaciones a los servicios en la nube. los Repositorio de git Proporciona un script útil que cargue su trabajo en una cuenta de Firebase.

15. Disfruta de la migración mejorada.

Los desarrolladores que emigran alejados de Angular 1.x, también conocidos como AngularJS, han tenido una parte justa de los problemas que llevan a cabo el navegador en las aplicaciones "combinadas". El nuevo servicio de ubicación unificada tiene como objetivo hacer que este proceso sea más suave.

16. Explore el control del área de trabajo.

Los grandes proyectos se benefician de la capacidad de cambiar la estructura del espacio de trabajo dinámicamente. Esto se hace a través de la nueva API de espacio de trabajo introducido en Angular 8.0: el fragmento que acompaña a este paso proporciona una visión general rápida del comportamiento. 

 Función de Async Demuestra () {
   Const Host = espacios de trabajo.
createworkspacehost (nuevo nodejssynchost ());
   Const Workspace = Await espacios de trabajo.
ReadWorkspace ('Ruta / a / Espacio de trabajo / directorio /',
anfitrión);
   Const Project = Workspace.Projects.
Obtener ('My-App');
   Const BuildTarget = Project.Targets.
obtener ('construir');
   buildTarget.options.optimization = verdadero;
   Awit Workspaces.WriteWorkspace (espacio de trabajo,
anfitrión);
}

17. Acelerar el proceso.

Construyendo grandes bases de código JavaScript se pone tedioso. Las versiones futuras de AngularJs usarán el sistema BAZEL BAZEL de Google para acelerar el proceso, con tristeza, al momento de escribirlo, no estaba listo para la primaime.

18. Evita el caminar muerto.

Aunque Google tiene mucho cuidado de no romper el código, algunas características simplemente deben ser eliminadas, ya que ya no son necesarias. Controlar Esta lista de depreciaciones Para obtener más información sobre las características que deben evitarse.

19. Mira el registro de cambios.

Como siempre, un artículo nunca puede hacer justicia a una versión completa. Por suerte, Este registro de cambio Proporciona una lista detallada de todos los cambios, por si acaso, en caso de que alguna vez tenga como que verifique el pulso de una característica, especialmente querida para usted.

¿Tienes muchos archivos listos para cargar en su sitio? Retrocederlos en el más confiable. almacenamiento en la nube .

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web .

Leer más:

  • Añadir soporte multi-idioma a angular
  • Las mejores API de JavaScript
  • Cómo codificar más rápido, encendedor JavaScript

Cómo - Artículos más populares

Cómo usar el bosquejo de la gravedad

Cómo Sep 12, 2025

[dieciséis] (Crédito de la imagen: Boceto de gravedad) Sketch de gravedad, la herramienta de diseño y modelado para creativ..

Cómo dibujar un gato

Cómo Sep 12, 2025

[dieciséis] ¿Quieres saber cómo dibujar un gato? Has venido al lugar correcto. Dibujar animales puede ser complicado, pero también ..

Cómo pintar una Maiden de Elfo

Cómo Sep 12, 2025

[dieciséis] En este tutorial, lo guiaré a través de mi proceso para crear un retrato de fantasía cautivador de una doncella Elfa. S..

Cómo usar fuentes web

Cómo Sep 12, 2025

[dieciséis] El siguiente es un extracto tomado del manual de Webfont de Bram Stein. Cómpralo aquí . ..

Cómo ilustrar para un evento

Cómo Sep 12, 2025

[dieciséis] Crear ilustraciones para un evento es un fantástico desafío creativo que implica decir historias con sus dibujos que se ..

Cómo trabajar con video HTML

Cómo Sep 12, 2025

[dieciséis] Moverse sobre youtube ... con el & lt; video & gt; elemento y un poco Javascript , puede comenzar a cre..

Construye un sitio de comercio electrónico desde cero

Cómo Sep 12, 2025

[dieciséis] El comercio electrónico se ha vuelto tan popular en los últimos años, ahora es difícil imaginar un futuro sin él. El ..

Cómo hacer letras 3D en Illustrator

Cómo Sep 12, 2025

La semana pasada Adobe lanzó algunos videos más a su útil lista de reproducción, dando a los creativos la oportunidad de recoger una gama de habilidades prácticas en solo 60 segundos o m..

Categorías