Skip to content

Commit

Permalink
Update the external links when they have moved
Browse files Browse the repository at this point in the history
  • Loading branch information
Ocunidee committed Feb 13, 2025
1 parent 8f76027 commit b83ecde
Show file tree
Hide file tree
Showing 9 changed files with 49 additions and 57 deletions.
22 changes: 10 additions & 12 deletions docs/src/ecosystem/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,31 @@ Angular benefits from a fantastic ecosystem. I will provide here some great sour

## Official resources

- **[Angular.io](angular.io):** The official site for Angular. This site has TONS of guides, reference materials, and tutorials that you could spend weeks diving into.
- [Angular.dev](https://angular.dev): The official site for Angular. This site has TONS of guides, reference materials, and tutorials that you could spend weeks diving into.

- **[Tour of Heroes tutorial](angular.io/tutorial):** A theory/concept/feature-rich tutorial. I strongly advise you to try it out as it gives you the opportunity to review the concepts seen in this training from a different perspective.
- [Official tutorials](https://angular.dev/tutorials): Theory/concept/feature-rich tutorials. I strongly advise you to try them out as it gives you the opportunity to review the concepts seen in this training from a different perspective.

- **[Angular official blog](blog.angular.io):** News and Tips from the Angular Team.
- [Angular official blog](https://blog.angular.dev): News and Tips from the Angular Team.

- **[Angular Material](material.angular.io/components) and the [CDK](https://material.angular.io/cdk/categories):** Two UI/UX libraries developped and maintained by the Angular Components team that is part of the Angular team at Google. The team includes both Google employees and community contributors from around the globe. Material Angular contains high-quality UI components that can be dropped into existing applications. The CDK (Component Development Kit) helps you build your own custom components with common interaction patterns. Both library are maintained at the same pace as the Angular framework.
- [Angular Material](https://material.angular.io/) and the [CDK](https://material.angular.io/cdk/categories): Two UI/UX libraries developped and maintained by the Angular Components team that is part of the Angular team at Google. The team includes both Google employees and community contributors from around the globe. Material Angular contains high-quality UI components that can be dropped into existing applications. The CDK (Component Development Kit) helps you build your own custom components with common interaction patterns. Both library are maintained at the same pace as the Angular framework.


## Non Angular-specific resources

- **[RxJS](rxjs.dev):** Learn about the library's concepts in depth here. The site also provides a decision-tree to help you choose the right operator to solve the situtation at hand.
- [RxJS](https://rxjs.dev): Learn about the library's concepts in depth here. The site also provides a decision-tree to help you choose the right operator to solve the situtation at hand.

- **[MDN Web Docs](https://developer.mozilla.org/):** MDN Web Docs is an evolving learning platform for Web technologies and the software that powers the Web, including CSS, HTML, and JavaScript. It offers great resources, I can only recommand it.
- [MDN Web Docs](https://developer.mozilla.org/): MDN Web Docs is an evolving learning platform for Web technologies and the software that powers the Web, including CSS, HTML, and JavaScript. It offers great resources, I can only recommand it.

- **[Can I Use](https://caniuse.com/):** provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
- [Can I Use](https://caniuse.com/): provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

## Blogs

Here is a list of interesting blogs:
- [Anglar University](https://blog.angular-university.io/)
- [Netanel Basal's blog](https://netbasal.com/)
- [Anglar inDepth](https://indepth.dev/angular)
- [Netanel Basal's blog](https://medium.com/netanelbasal)
- [Angular Love](https://angular.love/)
- [Thoughtram](https://blog.thoughtram.io/categories/angular)

## Conferences

- **[NgConf](2021.ng-conf.org/):** happens every year around April-May in Salt Lake City. You can watch some of the previous sessions on their website.

- **[Angular Connect](angularconnect.com/):** happens in London around September, there hasn't been a session since 2019.
- [NgConf](https://2023.ng-conf.org/): happens every year around April-May in Salt Lake City. You can watch some of the previous sessions on their website.
6 changes: 3 additions & 3 deletions docs/src/forms/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ Please find below a complete example that uses the `FormBuilder` API.
<iframe height='500' width='100%' src="https://stackblitz.com/github/worldline/atpw-reactive-form/tree/form-builder?startScript=start&title=FormBuilder&ctl=1&embed=1&file=src/app/app.component.ts"></iframe>

### Reactive Form validation
The `ReactiveFormsModule` allows to define validators in the component code or using HTML5 validation attributes such as `required` and `minlength`. Angular provides built-in validators such as `Validators.required`, `Validators.min`, `Validators.pattern`, you can find a complete list [here](https://angular.dev/api/forms/Validators). You can also define custom validators ([tutorial](https://angular.dev/guide/form-validation#defining-custom-validators)).
The `ReactiveFormsModule` allows to define validators in the component code or using HTML5 validation attributes such as `required` and `minlength`. Angular provides built-in validators such as `Validators.required`, `Validators.min`, `Validators.pattern`, you can find a complete list [here](https://angular.dev/api/forms/Validators). You can also define custom validators ([tutorial](https://angular.dev/guide/forms/form-validation#defining-custom-validators)).

:::warning
When using HTML5 validators, Angular recommends to combine them with built-in `@angular/forms` validators.
Expand All @@ -133,7 +133,7 @@ The following component shows an example of how to take advantage of:

<iframe height='500' width='100%' src="https://stackblitz.com/github/worldline/atpw-reactive-form/tree/css-classes?startScript=start&title=Angular-managed CSS classes&ctl=1&embed=1&file=src/app/app.component.ts"></iframe>

You can find an updated list of classes [here](https://angular.dev/guide/form-validation#control-status-css-classes).
You can find an updated list of classes [here](https://angular.dev/guide/forms/form-validation#control-status-css-classes).

## Practical work: Login and registration with reactive forms
1. Implement the login / registration form using reactive forms and the form builder: replace the `[(ngModel)]` in the template and delete the `email` and `password` from the class of the `LoginFormComponent`, declare a `FormGroup` named `loginForm`.
Expand Down Expand Up @@ -214,4 +214,4 @@ export function password(): ValidatorFn {
Add an error text (`The password doesn't comply with the policy`) under the password field (use a `<small>` tag) that shows if the form is dirty and the field has the `password.pattern` error.

## Sources
- [Angular official forms documentation](https://angular.dev/guide/forms-overview)
- [Angular official forms documentation](https://angular.dev/guide/forms)
20 changes: 10 additions & 10 deletions docs/src/fr/ecosystem/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,31 +4,31 @@ Angular bénéficie d'un écosystème fantastique. Je vais fournir ici quelques

## Ressources officielles

- **[Angular.io](https://angular.io):** Le site officiel d'Angular. Ce site contient des TONNES de guides, références et de tutoriels dans lesquels vous pourriez passer des semaines à éplucher.
- [Angular.dev](https://angular.dev): Le site officiel d'Angular. Ce site contient des TONNES de guides, références et de tutoriels dans lesquels vous pourriez passer des semaines à éplucher.

- **[Tour of Heroes tutorial](https://angular.io/tutorial):** Un didacticiel riche en théorie/concept/fonctionnalité. Je vous conseille fortement de l'essayer car cela vous donne l'occasion de revoir les concepts vus dans cette formation sous un angle différent.
- [Tuto officiels](https://angular.dev/tutorials): Des tuto riches en théorie/concept/fonctionnalité. Je vous conseille fortement de les essayer car cela vous donne l'occasion de revoir les concepts vus dans cette formation sous un angle différent.

- **[Blof officiel d'Angular](https://blog.angular.io):** Nouvelles et conseils de l'équipe Angular.
- [Blof officiel d'Angular](https://blog.angular.dev): Nouvelles et conseils de l'équipe Angular.

- **[Angular Material](https://material.angular.io/components) et [CDK](https://material.angular.io/cdk/categories):** Deux librairies UI/UX développées et maintenues par l'équipe Angular Components qui fait partie de l'équipe Angular de Google. L'équipe comprend à la fois des employés de Google et des contributeurs de la communauté du monde entier. Angular Material contient des composants d'interface utilisateur de haute qualité qui peuvent être utilisés dans des applications existantes. Le CDK (Component Development Kit) vous aide à créer vos propres composants personnalisés avec des modèles d'interaction courants. Les deux librairies sont maintenues au même rythme que le framework Angular.
- [Angular Material](https://material.angular.io/) et [CDK](https://material.angular.io/cdk/categories): Deux librairies UI/UX développées et maintenues par l'équipe Angular Components qui fait partie de l'équipe Angular de Google. L'équipe comprend à la fois des employés de Google et des contributeurs de la communauté du monde entier. Angular Material contient des composants d'interface utilisateur de haute qualité qui peuvent être utilisés dans des applications existantes. Le CDK (Component Development Kit) vous aide à créer vos propres composants personnalisés avec des modèles d'interaction courants. Les deux librairies sont maintenues au même rythme que le framework Angular.


## Ressources non spécifiques à Angular

- **[RxJS](https://rxjs.dev):** Apprenez-en plus sur les concepts de la librairie ici. Le site fournit également un arbre de décision pour vous aider à choisir le bon opérateur pour résoudre la situation que vous rencontrez.
- [RxJS](https://rxjs.dev): Apprenez-en plus sur les concepts de la librairie ici. Le site fournit également un arbre de décision pour vous aider à choisir le bon opérateur pour résoudre la situation que vous rencontrez.

- **[MDN Web Docs](https://developer.mozilla.org/):** MDN Web Docs est une plate-forme d'apprentissage évolutive pour les technologies Web et les logiciels qui font marcher le Web, notamment CSS, HTML et JavaScript. Elle offre d'excellentes ressources, je ne peux que la recommander.
- [MDN Web Docs](https://developer.mozilla.org/): MDN Web Docs est une plate-forme d'apprentissage évolutive pour les technologies Web et les logiciels qui font marcher le Web, notamment CSS, HTML et JavaScript. Elle offre d'excellentes ressources, je ne peux que la recommander.

- **[Can I Use](https://caniuse.com/):** fournit des tableaux à jour de prise en charge des technologies Web par les navigateurs desktop et mobile.
- [Can I Use](https://caniuse.com/): fournit des tableaux à jour de prise en charge des technologies Web par les navigateurs desktop et mobile.

## Blogs

Voici une liste de blogs intéressants :
- [Anglar University](https://blog.angular-university.io/)
- [Netanel Basal's blog](https://netbasal.com/)
- [Anglar inDepth](https://indepth.dev/angular)
- [Netanel Basal's blog](https://medium.com/netanelbasal)
- [Angular Love](https://angular.love/)
- [Thoughtram](https://blog.thoughtram.io/categories/angular)

## Conférences

- **[NgConf](https://ng-conf.org/):** se produit chaque année vers avril-mai à Salt Lake City. Vous pouvez regarder certaines des sessions précédentes sur leur site Web.
- [NgConf](https://2023.ng-conf.org/): se produit chaque année vers avril-mai à Salt Lake City. Vous pouvez regarder certaines des sessions précédentes sur leur site Web.
6 changes: 3 additions & 3 deletions docs/src/fr/forms/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Veuillez trouver ci-dessous un exemple complet utilisant l'API `FormBuilder`.
<iframe height='500' width='100%' src="https://stackblitz.com/github/worldline/atpw-reactive-form/tree/form-builder?startScript=start&title=FormBuilder&ctl=1&embed=1&file=src/app/app.component.ts"></iframe>

### Validation de reactive form
Le `ReactiveFormsModule` permet de définir des validateurs dans le code du composant ou en utilisant des attributs de validation HTML5 tels que `required` et `minlength`. Angular fournit des validateurs intégrés tels que `Validators.required`, `Validators.min`, `Validators.pattern`, vous pouvez trouver une liste complète [ici] (https://angular.dev/api/forms/Validators). Vous pouvez également définir des validateurs personnalisés ([tutoriel](https://angular.dev/guide/form-validation#defining-custom-validators)).
Le `ReactiveFormsModule` permet de définir des validateurs dans le code du composant ou en utilisant des attributs de validation HTML5 tels que `required` et `minlength`. Angular fournit des validateurs intégrés tels que `Validators.required`, `Validators.min`, `Validators.pattern`, vous pouvez trouver une liste complète [ici] (https://angular.dev/api/forms/Validators). Vous pouvez également définir des validateurs personnalisés ([tutoriel](https://angular.dev/guide/forms/form-validation#defining-custom-validators)).

:::warning
Lorsque vous utilisez des validateurs HTML5, Angular recommande de les combiner avec les validateurs fournis par `@angular/forms`.
Expand All @@ -134,7 +134,7 @@ Le composant suivant montre comment tirer parti :

<iframe height='500' width='100%' src="https://stackblitz.com/github/worldline/atpw-reactive-form/tree/css-classes?startScript=start&title=Angular-managed CSS classes&ctl=1&embed=1&file=src/app/app.component.ts"></iframe>

Vous pouvez trouver une liste à jour des classes [ici](https://angular.dev/guide/form-validation#control-status-css-classes).
Vous pouvez trouver une liste à jour des classes [ici](https://angular.dev/guide/forms/form-validation#control-status-css-classes).

## TP : Connexion et inscription avec des reactive forms
1. Implémentez le formulaire de connexion / inscription à l'aide de reactive forms et du form builder : remplacez le `[(ngModel)]` dans le template et supprimez les propriétés `email` et `mot de passe` de la classe du `LoginFormComponent` et déclarez un `FormGroup` et nommez le `loginForm`.
Expand Down Expand Up @@ -215,4 +215,4 @@ export function password(): ValidatorFn {
Ajoutez un texte d'erreur (`Mot de passe invalide`) via la balise `<small>` en dessous de l'input du mot de passe qui s'affiche si le formulaire est invalide et que l'input a l'erreur `password.pattern`.

## Sources
- [Documentation officielle des formulaires Angular](https://angular.dev/guide/forms-overview)
- [Documentation officielle des formulaires Angular](https://angular.dev/guide/forms)
2 changes: 1 addition & 1 deletion docs/src/fr/html/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Angular apporte une syntaxe puissante aux templates. Dans le chapitre précéden

## Property binding

Pour lier un élément HTML à la propriété d'un composant, placez-le entre crochets `[]`. Les crochets, `[]`, obligent Angular à évaluer le côté droit de l'affectation en tant qu'expression dynamique. Sans les crochets, Angular traite le côté droit comme un littéral et donne pour valeur à la propriété cette valeur statique. `[]` est la syntaxe pour le one-way data binding avec les données circulant du composant vers le template.
Pour lier un élément HTML à la propriété d'un composant, placez-le entre crochets `[]`. Les crochets, `[]`, obligent Angular à évaluer le côté droit de l'affectation en tant qu'expression dynamique. Sans les crochets, Angular traite le côté droit comme un littéral et donne pour valeur à la propriété cette valeur statique. `[]` est la syntaxe pour le one-way data binding avec les données circulant du composant vers le template.

Voici un exemple où les propriétés du DOM *href* et *disabled* sont définies à partir de variable de la classe du composant.

Expand Down
Loading

0 comments on commit b83ecde

Please sign in to comment.