IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

L'équipe Angular de Google annonce la version 14 d'Angular, le framework open source basé sur TypeScript,
Elle apporte un diagnostic étendu pour les développeurs

Le , par Bruno

14PARTAGES

4  0 
Emma Twersky Ingénieur en relations avec les développeurs chez Google, spécialisé dans Angular et l'open source a annoncé la version 14 d’Angular, le framework open source basé sur TypeScript, elle résout le problème le plus important d'Angular sur GitHub : la mise en œuvre d'un typage strict pour le package Angular Reactive Forms. « Nous sommes ravis d'annoncer la sortie de la version 14 d'Angular ! Des formulaires typés et des composants autonomes aux nouvelles primitives du CDK (component dev kit) d'Angular, nous sommes ravis de partager comment chaque fonctionnalité rend Angular plus puissant », a déclaré Emma.

Angular est un framework d'application web open source basé sur TypeScript, dirigé par l'équipe Angular de Google et par une communauté de particuliers et de sociétés. C’est une réécriture complète de la même équipe qui a construit AngularJS. Angular est utilisé comme frontal de la pile MEAN, composée de la base de données MongoDB, du framework de serveur d'applications Web Express.js, d'Angular lui-même (ou AngularJS) et de l'environnement d'exécution du serveur Node.js. Voici, ci-dessous, les nouveautés apportées par la version 14 d’Angular :

Simplifier Angular avec les composants autonomes

Les composants autonomes Angular visent à simplifier la création d'applications Angular en réduisant le besoin de NgModules. Dans la version 14, les composants autonomes sont en version préliminaire pour les développeurs. Ils sont prêts à être utilisés dans les applications à des fins d'exploration et de développement, mais ne constituent pas une API stable et seront potentiellement modifiés en dehors du modèle typique de rétrocompatibilité.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component } from '@angular/core'; 
import { CommonModule } from '@angular/common'; // includes NgIf and TitleCasePipe 
import { bootstrapApplication } from '@angular/platform-browser'; 
 
import { MatCardModule } from '@angular/material/card'; 
import { ImageComponent } from './app/image.component'; 
import { HighlightDirective } from './app/highlight.directive'; 
 
@Component({ 
  selector: 'app-root', 
  standalone: true, 
  imports: [ 
    ImageComponent, HighlightDirective, // import standalone Components, Directives and Pipes 
    CommonModule, MatCardModule // and NgModules 
  ], 
  template: ` 
    <mat-card *ngIf="url"> 
      <app-image-component [url]="url"></app-image-component> 
      <h2 app-highlight>{{name | titlecase}}</h2> 
    </mat-card> 
  ` 
}) 
export class ExampleStandaloneComponent { 
  name = "emma"; 
  url = "www.emma.org/image"; 
} 
 
// Bootstrap a new Angular application using our `ExampleStandaloneComponent` as a root component. 
bootstrapApplication(ExampleStandaloneComponent);

Avec les composants autonomes, les directives et les pipes, le tag standalone : true permet d'ajouter des importations directement dans @Component() sans @NgModule().

Dans la preview pour développeurs, l’équipe Angular utilise l'open source pour s’assurer que les composants autonomes sont entièrement prêts à être publiés en tant qu'API stable.

Formulaires Angular typés

La version 14 d’Angular résout le problème le plus important d'Angular sur GitHub : la mise en œuvre d'un typage strict pour le package Angular Reactive Forms.

Les formulaires typés garantissent que les valeurs contenues dans les contrôles de formulaires, les groupes et les tableaux sont sûres sur toute la surface de l'API. Cela permet d'obtenir des formulaires plus sûrs, notamment pour les cas complexes et profondément imbriqués.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const cat = new FormGroup({ 
   name: new FormGroup({ 
      first: new FormControl('Barb'), 
      last: new FormControl('Smith'), 
   }), 
   lives: new FormControl(9), 
}); 
 
// Type-checking for forms values! 
// TS Error: Property 'substring' does not exist on type 'number'. 
let remainingLives = cat.value.lives.substring(1); 
 
// Optional and required controls are enforced! 
// TS Error: No overload matches this call. 
cat.removeControl('lives'); 
 
// FormGroups are aware of their child controls. 
// name.middle is never on cat 
let catMiddleName = cat.get('name.middle');

La mise à jour des schémas permet une migration incrémentielle vers les formulaires typés, de sorte qu’il est possible d’ajouter progressivement le typage aux formulaires existants avec une rétrocompatibilité totale. La mise à jour ng remplacera toutes les classes de formulaires par des versions non typées (par exemple, FormGroup -> UntypedFormGroup). Il est ensuite possible d’activer les types à votre propre rythme (par exemple, UntypedFormGroup -> FormGroup).

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// v13 untyped form 
const cat = new FormGroup({ 
   name: new FormGroup( 
      first: new FormControl('Barb'), 
      last: new FormControl('Smith'), 
   ), 
   lives: new FormControl(9) 
}); 
 
// v14 untyped form after running `ng update` 
const cat = new UntypedFormGroup({ 
   name: new UntypedFormGroup( 
      first: new UntypedFormControl('Barb'), 
      last: new UntypedFormControl('Smith'), 
   ), 
   lives: new UntypedFormControl(9) 
});

Afin de profiter de la nouvelle prise en charge de la typographie, il est recommandé de rechercher les instances des contrôles de formulaires Untyped et de migrer vers la nouvelle surface API des formulaires typés lorsque cela est possible.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
// v14 partial typed form, migrating `UntypedFormGroup` -> `FormGroup` 
const cat = new FormGroup({ 
   name: new FormGroup( 
      first: new UntypedFormControl('Barb'), 
      last: new UntypedFormControl('Smith'), 
   ), 
   lives: new UntypedFormControl(9) 
});

La version 14 d’Angular apporte des fonctionnalités intégrées qui permettent aux développeurs de créer des applications de haute qualité, du routage à l’éditeur de code, à commencer par les nouveaux guides de détection des modifications sur angular.io.

Accessibilité simplifiée des titres de page

Une autre bonne pratique consiste à s'assurer que les titres des pages de l’application communiquent de manière unique le contenu de la page. La version 13.2 simplifie cette tâche grâce à la nouvelle propriété Route.title du routeur Angular. L'ajout d'un titre ne nécessite désormais aucune importation supplémentaire et est fortement typé.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
const routes: Routes = [{ 
  path: 'home', 
  component: HomeComponent 
  title: 'My App - Home'  // <-- Page title 
}, { 
  path: 'about', 
  component: AboutComponent, 
  title: 'My App - About Me'  // <-- Page title 
}];

Vous pouvez configurer une logique de titre plus complexe en fournissant une TitleStrategy personnalisée.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const routes: Routes = [{ 
  path: 'home', 
  component: HomeComponent 
}, { 
  path: 'about', 
  component: AboutComponent, 
  title: 'About Me'  // <-- Page title 
}]; 
 
@Injectable() 
export class TemplatePageTitleStrategy extends TitleStrategy { 
  override updateTitle(routerState: RouterStateSnapshot) { 
    const title = this.buildTitle(routerState); 
    if (title !== undefined) { 
      document.title = `My App - ${title}`; 
    } else { 
      document.title = `My App - Home`; 
  }; 
}; 
 
@NgModule({ 
  … 
  providers: [{provide: TitleStrategy,  useClass: TemplatePageTitleStrategy}] 
}) 
class MainModule {}

Diagnostics étendus pour les développeurs

Les nouveaux diagnostics étendus offrent un framework extensible qui permet de mieux comprendre les modèles et la façon dont il est possible d'améliorer. Les diagnostics donnent des avertissements au moment de la compilation, accompagnés de suggestions précises et exploitables pour les modèles, ce qui permet de détecter les bogues avant l'exécution.

Des diagnostics étendus permettent de détecter les erreurs courantes d'Angular avant l'exécution


Dans la version 13.2, l'équipe a inclus des diagnostics étendus intégrés pour aider les développeurs à détecter deux des erreurs de modélisation les plus courantes.

Détection de l'erreur "Banane dans une boîte" invalide sur vos liaisons de données bidirectionnelles
Une erreur de syntaxe courante chez les développeurs consiste à inverser les crochets et les parenthèses dans les liaisons bidirectionnelles, en écrivant ([]) au lieu de [()]. Étant donné que () ressemble à une banane et que [] ressemble à une boîte, l'équipe Angular a surnommé cette erreur « banane dans une boîte », puisque la banane devrait aller dans la boîte.

Bien que cette erreur soit techniquement une syntaxe valide, le CLI peut reconnaître que c'est rarement l'intention des développeurs. Dans la version 13.2, l'équipe Angular a introduit un message détaillé sur cette erreur et des conseils sur la façon de la résoudre, le tout dans le CLI et l'éditeur de code.

Code : Sélectionner tout
1
2
3
4
Warning: src/app/app.component.ts:7:25 - warning NG8101: In the two-way binding syntax the parentheses should be inside the brackets, ex. '[(fruit)]="favoriteFruit"'. 
        Find more at https://angular.io/guide/two-way-binding 
7     <app-favorite-fruit ([fruit])="favoriteFruit"></app-favorite-fruit> 
                          ~~~~~~~~~~~~~~~~~~~~~~~~~

La version 14 d'Angular prend en charge la dernière version de TypeScript 4.7 et cible désormais ES2020 par défaut, ce qui permet au CLI de transmettre du code plus petit sans dégradation. En outre, voici, ci-dessous, trois autres fonctionnalités :

Lier les membres protégés des composants

Dans la version 14, il est désormais possible de lier des membres de composants protégés directement à partir de des modèles.

Code : Sélectionner tout
1
2
3
4
5
6
7
@Component({ 
  selector: 'my-component', 
  template: '{{ message }}',  // Now compiles! 
}) 
export class MyComponent { 
  protected message: string = 'Hello world'; 
}

Cela permet de mieux contrôler la surface de l'API publique des composants réutilisables.


Injecteurs optionnels dans les vues embarquées

La version 14 ajoute la prise en charge du passage d'un injecteur facultatif lors de la création d'une vue intégrée par ViewContainerRef.createEmbeddedView et TemplateRef.createEmbeddedView. L'injecteur permet de personnaliser le comportement d'injection de dépendances dans le modèle spécifique. Cela permet des API plus propres pour la création de composants réutilisables et pour les primitives de composants dans Angular CDK.

Code : Sélectionner tout
1
2
3
viewContainer.createEmbeddedView(templateRef, context, { 
  injector: injector, 
})

NgModel OnPush

Enfin, une contribution communautaire résout un problème majeur et garantit que les modifications apportées au NgModel se reflètent dans l'interface utilisateur des composants OnPush.

Code : Sélectionner tout
1
2
3
4
5
6
7
8
@Component({ 
  selector: 'my-component', 
  template: ` 
    <child [ngModel]="value"></child> 
  `, 
  changeDetection: ChangeDetectionStrategy.OnPush 
}) 
class MyComponent {}

Source : Angular

Et vous ?

Avez-vous une expérience avec Angular ?

Que pensez-vous de Angular ?

Quelle amélioration vous intéresse le plus sur cette version ?

Voir aussi :

Angular 10 est disponible, plus léger et n'inclut plus les bundles ESM5 ou FESM5, une version majeure qui couvre toute la plateforme, y compris le framework, Angular Material et CLI

Angular 10, la prochaine version majeure du framework TypeScript : correction de bogues, amélioration de performances et autres

Angular 9.0 est disponible. Par défaut, toutes les applications vont utiliser le compilateur et le runtime Ivy. L'équipe explique les avantages apportés par ce moteur de rendu

L'équipe Angular de Google annonce la version 12 d'Angular, le framework open source basé sur TypeScript, elle améliore le service de langue basé sur Ivy et apporte de nouvelles fonctionnalités

Une erreur dans cette actualité ? Signalez-nous-la !

Avatar de grunk
Modérateur https://www.developpez.com
Le 03/06/2022 à 11:56
Citation Envoyé par poma88 Voir le message
Ha super merci de l'info
J'ai tout faux avec VueJS
Non pas forcément , c'est juste une approche différente.

Je trouve Angular parfait pour les grosses applications. La rigidité qu'il apporte permet de garder un projet propre et maintenable.
Par contre quand il sagit de faire 3 composants c'est clairement trop compliqué/lourd.

Perso j'adhère pas trop à la façon de faire de vue et react. Ecrire du balisage dans le js je trouve ca pas terrible. C'est l'avantage d'angular pour moi , c'est cette séparation claire dès le début de la vue, du code typescript et du style
2  0 
Avatar de grunk
Modérateur https://www.developpez.com
Le 03/06/2022 à 13:30
Citation Envoyé par Zefling Voir le message
Je dirais ça dépends. Avec Angular CLI t'as une appli prêt à l'emploie en quelques minutes.

J'ai fait des lib, et pour moi c'était ce qu'il y a de plus rapide pour mettre en place des petites démos rapidement :
- https://test.ikilote.net/coloration-demo/
- https://test.ikilote.net/json2html-demo/
C'est surtout la lourdeur du framework qui est discutable pour de petites application , pas la rapidité de mise en oeuvre.
Mes applis font plusieurs centaines de composants , donc le framework devient presque négligeable
1  0 
Avatar de zabibof
Membre averti https://www.developpez.com
Le 09/06/2022 à 9:50
Citation Envoyé par marc.collin Voir le message
une centaine de composant pour les deux applications de tes deux liens?

pour avoir faire un peu de react, angular, je trouve que c'est assez lourd.
c'est incroyable le nombre d'élément à mettre en place pour démarrer un projet.
beaucoup de fichier, beaucoup de dépendance

le développement front end s'est vraiment complexifier avec très peu de gain je trouve.
A mes débuts sur Angular, c'était exactement mon impression, je détestais ce truc mais au fur et à mesure des expériences et des versions, je ne m'imagine pas faire autre chose en front-end (même pour de petites applications).

Le problème avec Angular (et rxjs), c'est la courbe d'apprentissage, c'est accessible mais on peut faire du très moche tout comme du très beau, comme pour beaucoup de techno en fait, mais avec Angular, quand on débute, c'est qu'on fait vraiment du très très moche, donc les lourdeurs et tout et tout, et c'est malheureusement là que beaucoup de monde passent à autre chose et que leur impression s'arrête, on ne peut pas non plus leur en vouloir, c'est pas les choix qui manquent.

Par contre, avec l'expérience (et les versions aussi, il font des efforts de ce côté), c'est vraiment du solide, et plus encore quand on commence à "fine-tuner".
1  0 
Avatar de
https://www.developpez.com
Le 03/06/2022 à 11:03
Je n'ai plus utilisé Angular depuis le passage de Angular 1 à AngularJS.

D'apres vous, est-ce que Angular est fort utilisé ? Dans le monde des entreprises et des dev en général ? Je ne vois pas beaucoup d'offres d'emploi à ce sujet.
0  0 
Avatar de Gugelhupf
Modérateur https://www.developpez.com
Le 03/06/2022 à 11:28
De ce que j'ai pu voir, Angular 2+ et ReactJS sont les frameworks front les plus utilisés dans les entreprises en France
0  0 
Avatar de
https://www.developpez.com
Le 03/06/2022 à 11:39
Ha super merci de l'info
J'ai tout faux avec VueJS
0  0 
Avatar de Zefling
Expert confirmé https://www.developpez.com
Le 03/06/2022 à 12:35
Citation Envoyé par grunk Voir le message
Non pas forcément , c'est juste une approche différente.

Je trouve Angular parfait pour les grosses applications. La rigidité qu'il apporte permet de garder un projet propre et maintenable.
Par contre quand il sagit de faire 3 composants c'est clairement trop compliqué/lourd.
Je dirais ça dépends. Avec Angular CLI t'as une appli prêt à l'emploie en quelques minutes.

J'ai fait des lib, et pour moi c'était ce qu'il y a de plus rapide pour mettre en place des petites démos rapidement :
- https://test.ikilote.net/coloration-demo/
- https://test.ikilote.net/json2html-demo/

Citation Envoyé par grunk Voir le message
Perso j'adhère pas trop à la façon de faire de vue et react. Ecrire du balisage dans le js je trouve ca pas terrible. C'est l'avantage d'angular pour moi , c'est cette séparation claire dès le début de la vue, du code typescript et du style
Moi aussi, j'ai un peu regardé Vue en aidant des projets, et franchement je suis pas fan de tout mettre au même endroit. Après C'est probablement une habitude.

J'ai une appli web en Anglar que je viens de passer sur la version 14 :
- https://classement.ikilote.net/

Le passage a été très simple depuis la 13 :
https://git.ikilote.net/classement/c...1876b77632994c
0  0 
Avatar de marc.collin
Membre émérite https://www.developpez.com
Le 03/06/2022 à 15:15
Citation Envoyé par grunk Voir le message
C'est surtout la lourdeur du framework qui est discutable pour de petites application , pas la rapidité de mise en oeuvre.
Mes applis font plusieurs centaines de composants , donc le framework devient presque négligeable
une centaine de composant pour les deux applications de tes deux liens?

pour avoir faire un peu de react, angular, je trouve que c'est assez lourd.
c'est incroyable le nombre d'élément à mettre en place pour démarrer un projet.
beaucoup de fichier, beaucoup de dépendance

le développement front end s'est vraiment complexifier avec très peu de gain je trouve.
0  0 
Avatar de grunk
Modérateur https://www.developpez.com
Le 03/06/2022 à 15:42
Les liens ne sont pas de moi , mes applis ne sont pas publiques
Et oui c'est une grosses centaines de composants par applis.

Les frameworks actuels ont quand même drôlement simplifié le développement frontend surtout avec tout ce qui touche au two way binding. C'était une perte de temps phénoménale avant.
Sans parle de l'industrialisation , plus besoin de galérer à choisir les outils de lint , d'empaquetage , etc ... tout est inclus (en tout cas avec angular) et en une commande on build pour la prod sans se prendre la tête.
0  0 
Avatar de Zefling
Expert confirmé https://www.developpez.com
Le 03/06/2022 à 19:21
Citation Envoyé par marc.collin Voir le message
une centaine de composant pour les deux applications de tes deux liens?

pour avoir faire un peu de react, angular, je trouve que c'est assez lourd.
c'est incroyable le nombre d'élément à mettre en place pour démarrer un projet.
beaucoup de fichier, beaucoup de dépendance

le développement front end s'est vraiment complexifier avec très peu de gain je trouve.
Une centaine de composants ? Y'a le minimum. 1 seul composant.

J'ai mis en place un projet vue, c'est aussi lourd à mettre en place si on passe pas par un générateur projet.

Mais tu parles des nodes modules, j'ai l'impression que c'est un peu pareil pour les 3 aujourd'hui, il y en a des centaines :


En effet, React est le moins lourd en dépendance sur un projet vide, Angular le plus lourd de pas beaucoup derrière Vue 3.
Après j'ai jamais utilisé React, je ne sais pas ce qu'on peut faire avec contrairement aux 2 autres.

Après, j'avoue 200Ko de Js pour juste une page c'est un peu lourd. (Y'a des modules que je pourrais viré d'ailleurs)
Je pourrais faire bien moins lourd, je l'ai fais dans d'autres appli, mais ça m'aurait pis tellement plus de temps.

Mais quand on fait un graphique, c'est pareil... J'ai essayé de partir de zéro, je ne suis pas aller loin.
0  0