La historia de un desarrollo.

Aunque mi última publicación fue notada por varias personas, recibió el nombre de marca "Traducción". Lo que sin duda hace que todas mis recomendaciones anotadas allí sean plagiadas. Después de todo, no hay consenso sobre el mantenimiento del código.

Por lo tanto, esta vez, decidí contarles mi historia sobre cómo realicé un pedido para desarrollar una página para una tienda en línea.

Tal vez diga que este es un tema bastante trillado. Sin embargo, no todo es tan simple. Si los propios clientes generalmente arrojan dificultades al trabajo, entonces decidí encontrar los obstáculos por mí mismo. El hecho es que hace bastante tiempo me alejé del desarrollo de sitios simples, páginas y todo tipo de CMS a favor de la Aplicación de Página Única. La propuesta de finalizar una serie de elementos en la página, que era parte del sitio terminado y tenía varios tabúes en el enfoque de desarrollo, no me despertó mucho interés. Observo que la tarea en sí no es difícil. La conclusión era mostrar los productos en una forma apropiada y con su propia lógica interna. Además, una condición importante era: fácil edición del contenido por parte del cliente. Dado que el sitio en sí no está diseñado como un SPA, entonces no puedo hacerlo por medio de mi Angular favorito ... ¿o no? Sí, no pude conectar el marco de trabajo yo mismo al sitio, pero pude hacer un archivo de paquete con todas las condiciones necesarias para completar la tarea.

Debo decir de inmediato que, por supuesto, hay formas mucho más fáciles y más correctas, pero en este caso, no asumiría este trabajo. Estaba motivado por el interés, en teoría sabía que funcionaría. Leí sobre cierto CodeMix, un componente que se entrega con Angular versión 6 y superior. Conoce a los elementos angulares. En pocas palabras, convierten los componentes en elementos HTML (+ JavaScript), lo que nos permite usar nuestros componentes en otras aplicaciones, diferentes fraemworks (lo mismo, React), ¡o incluso en una simple página HTML + JavaScript!

No describiré la versión personalizada del trabajo y, como ejemplo, daré un componente de panel simple que mostrará el título y el contenido debajo de él. También colocaremos, dentro del encabezado, una casilla de verificación para controlar la visualización del contenido del mensaje. Luego continuaremos usando este panel en una página HTML simple. Resolviendo así el problema.

De acuerdo con la receta, necesitamos:

• Node.js,
• Administrador de paquetes de nodos (npm),
• CLI angular (> 6.0.0),
• Codemix

Crea un nuevo proyecto en Eclipse

Archivo> Crear> Proyecto> CodeMix> Proyecto angular

Además en la terminal para el proyecto ( Ctrl + Shift + P )



Ingrese: Terminal: Crear nuevo terminal integrado

El terminal se abrirá automáticamente en la carpeta del proyecto. En él ingresamos npm install , ng serve . Después, vaya en silencio a la página: localhost: 4200. A continuación, necesitamos usar el elemento angular y los módulos de poli-rellenos para la compatibilidad del navegador, ya que no son compatibles con los navegadores de Microsoft.

npm install @angular/elements @webcomponents/custom-elements 

Crea un componente

Usando las funciones sencillas de la CLI angular, escribimos lo siguiente:

 ng gc codemix-example 

Nuestro componente está listo, queda por ponerlo en orden.

HTML :

 <div class="CodemixExampleComponentClass"> <div class="head"> <span>{{ title }}</span> <input type="checkbox" [checked]="isShow" (change)="changeShow()" /> </div> <div class="body" *ngIf="isShow">{{ content }}</div> </div> 

TypeScript :

 import { Component, Input, ViewEncapsulation } from '@angular/core'; @Component({ selector: 'codemix-example', templateUrl: './codemix-example.component.html', styleUrls: ['./codemix-example.component.css'], encapsulation: ViewEncapsulation.Native }) export class CodemixExampleComponent { public isShow: boolean; constructor() { } @Input() public content; @Input() public title; public changeShow(): void { this.isShow = !this.isShow; } } 

No entraré en los detalles de CSS, para este ejemplo simplemente configuré los bloques principales con su color de fondo.

Verificamos nuestro componente porque funciona y continuamos.

//app.module.ts.

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { CodemixExampleComponent } from './codemix-example/codemix-example.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, CodemixExampleComponent ], entryComponents: [CodemixExampleComponent], imports: [ BrowserModule ], providers: [] }) export class AppModule { constructor(private injector: Injector){ } ngDoBootstrap(){ const element = createCustomElement( CodemixExampleComponent, { injector: this.injector } ); customElements.define('codemix-example', element) } } 

En el código anterior, detuvimos a Angular de cargar automáticamente la aplicación. Logramos esto eliminando la propiedad bootstrap en el objeto de parámetro decorador y sobrescribiendo el método ngDoBootstrap en la clase AppModule. También agregamos el componente CodemixExampleComponent a la matriz entryComponents para indicar a Angular que cree el componente, incluso si no es parte de la plantilla. Luego, en ngDoBootstrap, el componente CodemixExampleComponent se analiza utilizando la función createCustomElement del módulo Angular Elements. Ahora podemos usar el elemento en el archivo HTML en nuestro proyecto.

Por ejemplo, el archivo index.html se puede reescribir de la siguiente manera:

 <!doctype html> ... <body> <div style="width: 50vw; margin: auto;"> <codemix-example title="Title text" content="Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text"> </codemix-example> </div> </body> ... 

Obteniendo archivo de paquete

Ahora que podemos usar el elemento en el documento HTML en nuestro proyecto, el siguiente paso es crear un archivo de paquete para usar como una dependencia de la página.

Para hacer esto, necesitamos el módulo concat:

 npm install concat --save-dev 

Queda por crear un script de ensamblaje en la raíz de la carpeta del proyecto.

// build.js:

 const concat = require('concat'); const files = [ 'node_modules/@webcomponents/custom-elements/src/native-shim.js', './dist/angulartest/runtime.js', './dist/angulartest/polyfills.js', './dist/angulartest/main.js' ]; const outputFile = './dist/bundle.js'; concat(files, outputFile); 

El toque final, ejecute el comando o agréguelo a package.json al objeto de scripts:

 ng build --prod --output-hashing = none && node build-script.js 

Como resultado, obtuvimos el codiciado bundle.js. Un archivo que ahora se puede usar en cualquier lugar. Copie este archivo a otra ubicación y cree un archivo HTML simple en la misma carpeta.

Si alguien está interesado en el resultado, obtuve lo siguiente:



Y aquí está el index.html más simple

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angulartest</title> </head> <body> <div style="width: 50vw; margin: auto;"> <codemix-example title="Title text" content="Content text Content text Content text Content text Content text Content text Content text Content text Content text Content text"> </codemix-example> </div> <script type="text/javascript" src="bundle.js"></script> </body> </html> 

Conclusión

Como puede ver, acabamos de utilizar el componente Angular en un archivo HTML simple. Sí, es genial que incluso en tales tareas, Angular pueda declararse a sí mismo. Podemos usar nuestro componente desarrollado en Angular, en React, Vue, etc., bueno, ¿no es genial? Pero, como dije al principio, esta no es la única y ciertamente no es la mejor opción en el problema que resolví. Lo hice solo porque estaba interesado en hacerlo. Es importante saber que este método no es totalmente compatible con la mayoría de los navegadores. También nos obliga a trabajar con un archivo que es bastante grande para trabajar con un solo elemento. Por ejemplo, el mío resultó ser 234 KB.