DIY 1 – Créer de A à Z un module Angular

C’est avec plaisir que je débute aujourd’hui une nouvelle série d’articles 😁. Dans notre live du lundi 24 septembre sur Twitch sur les petits trucs qu’on a pour être un bon programmeur, nous avons apporté l’idée de réinventer la roue. L’objectif n’est pas publier un nouveau framework ou librairie, mais bien d’explorer la mechanique derrière ceux-ci pour bien comprendre leur fonctionnement. DIY (Do It Yourself) présentera des prototypes de composants uniquement pour le plaisir de le faire. Aujourd’hui, on commence par le commencement. On parle d’un module Angular.

Objectif

Créer de A à Z un module Angular réutilisable par d’autres équipes en le publiant sur npm. Vous verrez comment le faire sur le registre public et sur une instance Verdaccio locale.

Plan

Créer une application test
Créer un projet « librairie » à l’intérieur de cette application
Tester la librairie
Publier sur npm
Publier sur Verdaccio local
Installation standard via npm

Prérequis

Une base en Angular
Angular CLI
NodeJS
Un environnement de développement

Étape 1 – Créer une application test

Créons une nouvelle application Angular. Cette dernière servira à essayer la librairie en cours de développement. Depuis un répertoire vide, ouvrez une invite de commande et tapez :

ng new todo-test

1	ng new todo-test

Étape 2 – Créer un projet « librairie » à l’intérieur de cette application

Supposons que nous voulons créer un module de tâches à faire.

Créer la librairie via Angular CLI :

ng g library todo

1	ng g library todo

Ceci crée un répertoire « projects » à la racine de l’application. Ce répertoire contient la librairie créée, qui elle-même contient un service, un composant et un module. Puis, un fichier public_api.ts devrait se trouver sous projects/todo/src. Ce fichier exporte les éléments de la librairie qui seront utilisables après avoir été installés via npm.

Remarquez aussi dans TodoComponent le préfix du sélecteur selector: 'lib-todo'. Par défaut, il est définit à lib, mais peut être modifié à la génération :

ng g library todo --prefix=ezo

1	ng g library todo --prefix=ezo

Ceci créerait le composant ezo-todo. Codons maintenant cette librairie :

todo.ts

export class ToDo {
  title: string;
  done: boolean;

  constructor() {
    this.done = false;
  }
}

export class ToDo {

title: string;

done: boolean;

constructor() {

this.done = false;

}

Notre modèle de données. Les tâches sont créées à « non-faites ».

todo.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [TodoComponent],
  exports: [TodoComponent]
})
export class TodoModule { }

@NgModule({

imports: [

CommonModule,

FormsModule

declarations: [TodoComponent],

exports: [TodoComponent]

})

export class TodoModule { }

Nous devons importer FormsModule pour faire le 2-way binding via ngModel et CommonModule pour utiliser ngFor.

todo.component.ts

@Component({
  selector: 'lib-todo',
  template: `
    <section class="add-form">
      <form (submit)="createToDo()">
        <input type="text" placeholder="Quoi faire?" name="whatToDo" [(ngModel)]="todoInCreation.title">
      </form>
    </section>
    <section class="listing">
      <ul>
        <li *ngFor="let curToDo of todos">
          <label>
            <input type="checkbox" name="isDone" [(ngModel)]="curToDo.done" required>
            {{ curToDo.title }}
          </label>
        </li>
      </ul>
    </section>
  `,
  styles: [
    `input {
      border: none;
      border-bottom: 2px solid #303030;
      color: #303030;
    }`,
    `ul {
      padding: 0;
    }`,
    `ul li {
      list-style: none;
    }`,
    `label {
      display: flex;
      align-items: center;
    }`,
    `ul li label input[type="checkbox"] {
      margin: 0;
      margin-right: 5px;
    }`
  ]
})
export class TodoComponent implements OnInit {
  todos: ToDo[] = [];
  todoInCreation: ToDo = new ToDo();

  constructor() { }

  ngOnInit() {
  }

  createToDo() {
    this.todos.push(this.todoInCreation);
    this.todoInCreation = new ToDo();
  }
}

@Component({

selector: 'lib-todo',

template: `

</form>

</section>

<ul>

<label>

</label>

</li>

</ul>

</section>

styles: [

`input {

border: none;

border-bottom: 2px solid #303030;

color: #303030;

}`,

`ul {

padding: 0;

}`,

`ul li {

list-style: none;

}`,

`label {

display: flex;

align-items: center;

}`,

`ul li label input[type="checkbox"] {

margin: 0;

margin-right: 5px;

]

})

export class TodoComponent implements OnInit {

todos: ToDo[] = [];

todoInCreation: ToDo = new ToDo();

constructor() { }

ngOnInit() {

}

createToDo() {

this.todos.push(this.todoInCreation);

this.todoInCreation = new ToDo();

}

Étape 3 – Tester la librairie

Pour compiler la librairie, utilisez Angular CLI depuis une invite de commande à la racine de l’application, comme ceci :

ng build todo

1	ng build todo

Ceci compilera la librairie dans le répertoire dist à la racine de l’application. Pour l’utiliser, importer le module comme s’il venait de npm dans le app.module.ts de l’application de test :

import {TodoModule} from 'todo';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TodoModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import {TodoModule} from 'todo';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

TodoModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Puis utilisez le composant comme normalement :

app.component.html

<lib-todo></lib-todo>

1	<lib-todo></lib-todo>

Étape 4 – Publier sur npm

Créer premièrement un compte sur npmjs.com. Puis, ouvrez une invite de commande dans le répertoire dist/todo. Il est important de mentionner ici que le nom de la librairie ( package.json) devrait être unique sur npm. Assurez-vous de nommer correctement votre librairie à la génération.

Puis, toujours dans dist/todo, exécutez :

npm login

npm login

Répondez aux questions… puis :

npm publish

1	npm publish

That’s it 😀

Étape 5 – Publier sur Verdaccio local

Verdaccio est une instance de npm qui roule en local. Ceci sert à émuler comment vous pourriez utiliser cet outil pour monter un registre privé afin d’y déposer vos librairies. Pour l’installation :

npm install -g verdaccio

1	npm install -g verdaccio

Une fois installé, roulez-le!

verdaccio

verdaccio

Sur mon poste, l’instance a été démarrée à l’adresse http://localhost:4873. Premièrement, il faut configurer npm pour qu’il se connecte sur cette instance au lieu du registre public de npm. Pour ce faire, exécutez :

npm set registry http://localhost:4873

1	npm set registry http://localhost:4873

Ceci configurera votre fichier .npmrc qui se trouve dans votre répertoire utilisateur afin qu’il pointe vers le registre local. Puis, vous pouvez vous créer un compte utilisateur et vous authentifier via :

npm adduser --registry http://localhost:4873

1	npm adduser --registry http://localhost:4873

Puis vous authentifier sur le registre via npm login. Finalement, publier avec npm publish!

Bonus : Accédez à l’URL http://localhost:4873 depuis un navigateur lorsque l’instance Verdaccio roule pour voir les packages disponibles 🙂

Étape 6 – Installation standard via npm

Depuis n’importe quel projet, exécutez npm install pour ajouter votre librairie, comme vous le faites déjà pour les autres!

Étape 7 – Publier un mise-à-jour

Puisque la librairie évolue dans le temps, vous aurez sûrement à effectuer des mises-à-jour. Pour y parvenir, vous devez simplement vous assurer que la propriété version du package.json est bien incrémentée, puis réexécutez simplement npm publish.

Conclusion

Aujourd’hui, vous avez appris à créer une librairie Angular de A (répertoire vide) à Z (publiée sur npm) dans le câdre du premier article de la série DIY. Si vous avez des commentaires, des suggestions de futurs articles dans cette série, n’hésitez surtout pas à communiquer directement avec sur les réseaux sociaux, ou utilisez simplement la zone de commentaires ci-dessous.

Si vous avez apprécié, vous pouvez nous supporter en nous offrant à boire! Sinon, je vous invite à lire ou relire cet article sur les principes SOLID et ces 10 secrets sur JS.

De plus, pour ne rien manquer, abonnez-vous à Twitch et à ce blogue! Tout le contenu est gratuit et sans publicité, donc n’ayez pas peur de recevoir des pourriels de notre part. Nous faisons ça pour vous 🙂

Partager sur Facebook

Partager sur Twitter

DIY 1 – Créer de A à Z un module Angular

Objectif

Plan

Prérequis

Étape 1 – Créer une application test

Étape 2 – Créer un projet « librairie » à l’intérieur de cette application

Étape 3 – Tester la librairie

Étape 4 – Publier sur npm

Étape 5 – Publier sur Verdaccio local

Étape 6 – Installation standard via npm

Étape 7 – Publier un mise-à-jour

Conclusion

60

SHARES

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

DIY 1 – Créer de A à Z un module Angular

Objectif

Plan

Prérequis

Étape 1 – Créer une application test

Étape 2 – Créer un projet « librairie » à l’intérieur de cette application

Étape 3 – Tester la librairie

Étape 4 – Publier sur npm

Étape 5 – Publier sur Verdaccio local

Étape 6 – Installation standard via npm

Étape 7 – Publier un mise-à-jour

Conclusion

60

SHARES

Articles qui pourraient vous intéresser :

Écrit par

Sylvain Cloutier

Tags

Commentaires

Laisser un commentaire

Annuler la réponse.

Catégories

Suivez-nous par courriel!

Publications récentes

Ce qu’on dit sur Twitter

Suivez-nous!