La comparaison des champions : Angular vs Vue

Mise en place d'un projet

Le moyen le plus rapide de lancer une projet est d'utiliser le CLI fourni par les auteurs des frameworks. Les deux sont dotés d'un très bon service, mais il existe quelques différences, à savoir.., Vue offre davantage d'options, ce qui vous permet d'adapter un projet à vos besoins dès le départ. Vous pouvez choisir le Version VueSi vous avez besoin d'utiliser le routage, Typescript, les préprocesseurs CSS ou de mettre en place un linter, vous pouvez le faire. Typescript, les préprocesseurs CSS ou la mise en place d'un linter. Il vous permet également de décider si vous souhaitez mettre en place des tests (unitaires ou E2E).

Angular est livré avec un générateur qui vous permet de créer des composants, des services, des interfaces et des directives directement à partir de la console, ce qui, d'après mon expérience, est très pratique car il n'est pas nécessaire de configurer manuellement des dossiers, des fichiers et des code à la main, en particulier lorsque vous utilisez, par exemple, le modèle MVC. Typescript est livré avec Angular et vous incite à l'utiliser. Si vous ne l'avez pas encore fait, voici une présentation pratique des raisons pour lesquelles vous devriez l'essayer. ici.

Au départ, CLI de Angular ne vous demande que des informations sur le routage ou les préprocesseurs CSS préférés, ce qui, par rapport à VueLe CLI ne vous laisse pas beaucoup d'espace pour décider de la structure et du style de votre application. Mais si vous suivez la convention qu'elle vous demande d'utiliser, l'interface de programmation vous guidera tout au long du chemin.

Structure du projet

Vue utilise des SFC (Single File Components), ce qui permet à un nouveau développeur de commencer à utiliser un framework et de trouver ses marques dans le code.

Directives

Vue est également livré avec des directives telles que `v-if, v-for`, dont l'utilisation est très intuitive puisqu'il s'agit presque d'une copie de la directive Angular des... Vue utilise la même convention pour la liaison bidirectionnelle des données (en la préfixant avec, par exemple, v- dans `v-model`) et en ajoutant le @/v-on indiquant que nous réagissons à quelque chose. Angular sépare cela en indiquant dans quelle direction nous allons en utilisant des parenthèses pour la liaison d'événement et des crochets pour la liaison de propriété, c'est-à-dire : `(change), [ngStyle], [(ngModel)]`.

En VueLa structure elle-même étant simple, il n'est pas nécessaire de créer des fichiers distincts pour les feuilles de style et la logique, de sorte que tout est organisé et accessible. Bien entendu, Vue est accompagné d'un guide de style dans lequel vous trouverez des règles recommandées à suivre lors de la création d'un projet ; toutefois, seules quelques règles sont obligatoires. 

Evénements

En l'occurrence, Vue revient avec une solution plus pratique ; à savoir, pour émettre un événement du composant enfant vers son parent, tout ce que vous avez besoin de faire est (à l'aide de Vue 3 Composition API ) prend une méthode de l'objet contextuel dans la configuration et émet simplement ce dont vous avez besoin à ce moment-là :

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass) ; } }

Vous pouvez également le faire directement dans le modèle en réponse à un autre événement.

En Angularvous devez d'abord définir un émetteur d'événements (EventEmitter) comme suit :

@Output() customNameForYourEmitter = new EventEmitter() ;

Vous devez ensuite appeler une méthode d'émission sur l'émetteur d'événements (EventEmitter) :

this.customNameForYourEmitter.emit(this.theDataYouWantToPass) ;

Créneaux horaires/projection de contenu

Dans les deux cadres, vous pouvez facilement déplacer le contenu (simple ou multiple) du composant parent vers son enfant en ajoutant simplement du code html supplémentaire à l'intérieur des balises enfant, avec de légères différences :

Vue :

``` 

Angular :

Par défaut :
    

Emplacement nommé :

<p yourname>
   Il s'agit d'un créneau nommé
  </p>
  <p>Il s'agit d'un emplacement par défaut</p>

Cependant, si vous souhaitez effectuer un rendu conditionnel de certaines parties de votre application, Vue est plus intuitif que Angular et vous permet de le faire plus rapidement en ajoutant la fonction v-if à la directive <template> qui vous permet de ne rendre que les parties qui sont actuellement nécessaires.

Alors que la ng-content est toujours rendu, vous devez utiliser dans ce cas la fonction ng-templateet, plus tard, de créer votre propre directive personnalisée :

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  selector : '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef : TemplateRef) {}
}

et à cause du nom que vous donnez à votre ng-template Angular saura ce qui doit être rendu :

De plus, dans le composant, vous voulez projeter votre modèle qui sera utilisé dans l'élément @ContentChild pour obtenir le modèle approprié :

@ContentChild(CustomDirective) content! : CustomDirective ;

Service ou magasin

Angular vous encourage à utiliser le modèle de conception MVC où vous pouvez utiliser des services pour le modèle. Pour cette raison, vous devez apprendre le modèle d'injection de dépendances pour exploiter librement les données dans votre application. Il vous permet de séparer les effets secondaires de vos appels d'API et d'utiliser la même logique dans l'ensemble du projet en injectant les parties dont vous avez besoin à ce moment-là, ce qui en fait également une approche modulaire.

Angular est également livré avec le framework Ngrx/store basé sur le modèle Redux au cas où vous voudriez utiliser une approche plus réactive avec les observables RxJs. Il est livré avec des Actions qui sont utilisées pour envoyer des événements uniques à partir de composants et/ou de services, des Effets qui gèrent les effets secondaires ou les actions asynchrones que vous souhaitez effectuer et des Réducteurs qui mutent votre état.

En VueL'approche la plus répandue consiste à utiliser la bibliothèque Vuex pour la gestion des états, qui est également fournie avec des outils tels que Actions, Mutations et Getters, tout comme Ngrx/store, pour vous aider à gérer et à organiser l'état de votre application. Vous pouvez la modulariser en définissant différents magasins pour vos vues, par exemple un magasin d'utilisateur ou un magasin de panier, mais cela peut entraîner des problèmes d'espacement des noms, à moins que vous n'utilisiez la librairie namespaced : true dans votre déclaration de magasin.

Voici une comparaison entre l'approche basée sur les services et l'approche Vuex lorsqu'il s'agit d'aller chercher de l'eau. produit pour votre magasin :

@Injectable() // décorateur pour indiquer que nous voulons l'utiliser en DI plus tard
export class ProductsService {
  private products : Product[] = [] ;

  constructor(private backend : BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products : Product[]) => {
      //fait ce que vous voulez avec vos produits
    }) ;
    return this.products ;
  }
}

Ensuite, dans le composant, nous injectons notre service à utiliser :
constructor(private service : HeroService) { }

En Vuenous envoyons simplement une action qui effectue un appel au backend pour nous :

store.dispatch(getAllProducts)

et dans le actions.ts nous définissons une action :

actions : {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts() ;); // récupère les données et place les résultats dans le magasin
}}

Récupération de données

Avec VueVous pouvez utiliser Axios/Fetch ou toute autre bibliothèque que vous souhaitez utiliser, c'est très simple - il suffit de gérer les appels asynchrones avec des promesses ou toute autre approche qui vous convient le mieux.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    /gérer l'erreur
}

Angular est livré avec la bibliothèque HttpClient qui utilise des observables, ce qui vous amène à un autre avantage - pour l'utiliser correctement et/ou manipuler des données, vous devez apprendre RxJs. Encore une fois, il peut être difficile de se familiariser avec ce concept abstrait dès le début.

Vous pouvez utiliser Axios si c'est ce que vous voulez faire, mais comme le dit la page GitHub d'Axios : 'Axios est fortement inspiré par le service $http fourni en Angular'

private getAllItems() : void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('résultats'),
tap(console.log('do whatever side effect you want to use here')
catchError((error) => {
        /gérer l'erreur
})
)
.subscribe((result : ResultType[])
    //opération finale sur un résultat donné
)
}

En résumé

| Vue | Angular |
| ———– | ———– |
| Nécessite l'utilisation de Typescript, de composants/services basés sur des classes
| Les logiciels d'aide à l'apprentissage (Typescript, RxJs, Dependency Injection) sont des outils d'aide à l'apprentissage qui permettent de se familiariser avec la technologie.
| Il y a beaucoup de choses à configurer lors de la mise en place du projet| Il n'y a pas grand-chose à configurer en amont, mais il vous permet de générer la structure du projet via la console |
| Le cadre communautaire basé sur Angular et React est créé et entretenu par Google.
| Gestion de l'état, HttpClient inclus dans le framework.

En savoir plus :

JavaScript est totalement mort. Un type sur Internet

Déployer une API GraphQL/MongoDB à l'aide des fonctions Netlify

Comment tuer un projet avec de mauvaises pratiques de codage