L'histoire d'un développement

Bien que ma dernière publication ait été remarquée par un certain nombre de personnes, elle a néanmoins reçu le nom de marque "Translation". Ce qui rend sans aucun doute toutes mes recommandations notées plagiées. Après tout, il n'y a pas de consensus sur la maintenance du code.

Par conséquent, cette fois, j'ai décidé de vous raconter mon histoire sur la façon dont j'ai exécuté une commande pour développer une page pour une boutique en ligne.

Peut-être que vous dites que c'est un sujet plutôt galvaudé. Cependant, tout n'est pas si simple. Si les clients eux-mêmes créent généralement des difficultés dans le travail, j'ai décidé de trouver les bosses pour moi. Le fait est que je me suis éloigné il y a assez longtemps du développement de sites simples, de pages et de toutes sortes de CMS en faveur de l'application de page unique. La proposition de finaliser un certain nombre d'éléments sur la page, qui faisait partie du site fini et avait un certain nombre de tabous dans l'approche de développement, ne m'a pas beaucoup intéressé. Je constate que la tâche elle-même n'est pas difficile. L'essentiel était d'afficher les marchandises sous une forme appropriée et avec leur propre logique interne. En outre, une condition importante était: l'édition facile du contenu par le client. Étant donné que le site lui-même n'est pas conçu comme un SPA, je ne peux pas le faire avec mon Angular préféré ... ou pas? Oui, je ne pouvais pas me connecter moi-même au site, mais je pouvais créer un fichier groupé avec toutes les conditions nécessaires pour que je puisse terminer la tâche.

Je dois dire tout de suite qu'il y a bien sûr des moyens beaucoup plus faciles et plus corrects, mais dans ce cas, je ne reprendrais pas ce travail. J'étais motivé par l'intérêt, en théorie je savais que ça marcherait. J'ai lu un certain CodeMix, un composant livré avec Angular version 6 et supérieure. Rencontrez les éléments angulaires. En un mot, ils convertissent les composants en éléments HTML (+ JavaScript), ce qui nous permet d'utiliser nos composants dans d'autres applications, différents fraemworks (les mêmes, React), ou même dans une simple page HTML + JavaScript!

Je ne décrirai pas la version personnalisée de l'ouvrage et à titre d'exemple, je donnerai un composant de panneau simple qui affichera le titre et le contenu en dessous. Nous placerons également, dans l'en-tête, une case à cocher pour contrôler l'affichage du contenu du message. Ensuite, nous continuerons à utiliser ce panneau dans une simple page HTML. Résoudre ainsi le problème.

Selon la prescription, nous avons besoin de:

• Node.js,
• Node Package Manager (npm),
• CLI angulaire (> 6.0.0),
• Codemix

Créer un nouveau projet dans Eclipse

Fichier> Créer> Projet> CodeMix> Projet angulaire

Plus loin dans le terminal du projet ( Ctrl + Maj + P )



Entrez: Terminal: Créer un nouveau terminal intégré

Le terminal s'ouvrira automatiquement dans le dossier du projet. Nous y entrons npm install , ng serve . Ensuite, allez tranquillement à la page: localhost: 4200. Ensuite, nous devons utiliser l'élément Angular et les modules poly-fills pour la compatibilité du navigateur, car ils ne sont pas pris en charge correctement dans les navigateurs Microsoft.

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

Créer un composant

En utilisant les fonctionnalités simples de la CLI angulaire, nous écrivons ce qui suit:

 ng gc codemix-example 

Notre composant est prêt, il reste à le mettre en ordre.

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; } } 

Je n'entrerai pas dans les détails CSS, pour cet exemple, je viens de définir les blocs principaux sur leur couleur d'arrière-plan.

Nous vérifions que notre composant fonctionne et continue.

//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) } } 

Dans le code ci-dessus, nous avons empêché Angular de charger automatiquement l'application. Nous y sommes parvenus en supprimant la propriété bootstrap dans l'objet de paramètre décorateur et en remplaçant la méthode ngDoBootstrap dans la classe AppModule. Nous ajoutons également le composant CodemixExampleComponent au tableau entryComponents pour demander à Angular de créer le composant, même s'il ne fait pas partie du modèle. Ensuite, dans ngDoBootstrap, le composant CodemixExampleComponent est analysé à l'aide de la fonction createCustomElement du module Angular Elements. Maintenant, nous pouvons utiliser l'élément du fichier HTML dans notre projet.

Par exemple, le fichier index.html peut être réécrit comme suit:

 <!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> ... 

Obtention du fichier de bundle

Maintenant que nous pouvons utiliser l'élément du document HTML dans notre projet, l'étape suivante consiste à créer un fichier de bundle à utiliser comme dépendance de page.

Pour ce faire, nous avons besoin du module concat:

 npm install concat --save-dev 

Il reste à créer un script d'assemblage à la racine du dossier du projet.

// 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); 

La touche finale, exécutez la commande ou ajoutez-la à package.json à l'objet scripts:

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

En conséquence, nous avons obtenu le très convoité bundle.js. Un fichier qui peut désormais être utilisé n'importe où. Copiez ce fichier vers un autre emplacement et créez un fichier HTML simple dans le même dossier.

Si quelqu'un est intéressé par la sortie, j'ai obtenu ce qui suit:



Et voici le plus simple index.html

 <!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> 

Conclusion

Comme vous pouvez le voir, nous venons d'utiliser le composant Angular dans un simple fichier HTML. Oui, c'est formidable que même dans de telles tâches, Angular puisse se déclarer. Nous pouvons utiliser notre composant développé sur Angular, dans React, Vue, etc., eh bien, n'est-ce pas cool? Mais, comme je l'ai dit au début, ce n'est pas la seule et certainement pas la meilleure option dans le problème que j'ai résolu. Je l'ai fait uniquement parce que cela m'intéressait. Il est important de savoir que cette méthode n'est pas entièrement prise en charge par la plupart des navigateurs. Cela nous oblige également à travailler avec un fichier assez volumineux pour travailler avec un seul élément. Par exemple, le mien s'est avéré être de 234 Ko.