From 11620973d27f33c8c80fcc8be196ea1b8a85d269 Mon Sep 17 00:00:00 2001
From: Patrice de Saint Steban <patrice@desaintsteban.fr>
Date: Thu, 18 Aug 2016 11:49:15 +0200
Subject: [PATCH] docs(guide/template-syntax) : french translation of the
 typescript of template syntax

---
 .../docs/ts/latest/guide/template-syntax.jade | 202 +++++++++++++++++-
 1 file changed, 195 insertions(+), 7 deletions(-)

diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index 3e0fb06c..17ff4106 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -2,122 +2,218 @@ block includes
   include ../_util-fns
   - var _JavaScript = 'JavaScript';
   //- Double underscore means don't escape var, use !{__var}.
-  - var __chaining_op = '<code>;</code> or <code>,</code>';
+  - var __chaining_op = '<code>;</code> ou <code>,</code>';
   - var __new_op = '<code>new</code>';
   - var __objectAsMap = 'object';
 
 :marked
   Our Angular application manages what the user sees and can do, achieving this through the interaction of a Component class instance (the *component*) and its user-facing template.
 
+  Notre application Angular gère ce que l'utilisateur voit et peut voir, elle y parvient grâce à l'interaction entre l'instance de la classe d'un composant (le *composant*) et son template utilisateur.
+
   Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular,  the component plays the part of the controller/viewmodel, and the template represents the view.
 
+  Beaucoup d'entre nous sont familier avec la dualité composant/template de notre expérience avec le patron de conception Modèle-Vue-Contrôleur (MVC) ou Modèle-Vue-Modèle de Vue (MVVM).
+  Dans angular, le composant joue le rôle du contrôleur/Modèle de vue, et le template représente la vue.
+
   Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:
 
+  Voyons ce qu'il faut pour écrire un template pour notre vue. Nous allons couvrir ces éléments de base de la syntaxe des templates.
+
   * [HTML](#html)
+  * [le HTML](#html)
   * [Interpolation](#interpolation)
+  * [l'Interpolation](#interpolation)
   * [Template expressions](#template-expressions)
+  * [Expressions de template](#template-expressions)
   * [Template statements](#template-statements)
+  * [Instructions de template](#template-statements)
   * [Binding syntax](#binding-syntax)
+  * [Syntaxe de liaison](#binding-syntax)
   * [Property binding](#property-binding)
+  * [Liaison de propriétés](#property-binding)
   * [Attribute, class, and style bindings](#other-bindings)
+  * [Liaison d'attributs, de class CSS et style](#other-bindings)
   * [Event binding](#event-binding)
+  * [Liaison d'évènements](#event-binding)
   * [Two-way data binding with `NgModel`](#ngModel)
+  * [Laison bi-directionnel avec  `NgModel`](#ngModel)
   * [Built-in directives](#directives)
+  * [Directives intégrés](#directives)
     * [NgClass](#ngClass)
+    * [Directive NgClass](#ngClass)
     * [NgStyle](#ngStyle)
+    * [Directive NgStyle](#ngStyle)
     * [NgIf](#ngIf)
+    * [Directive NgIf](#ngIf)
     * [NgSwitch](#ngSwitch)
+    * [Directive NgSwitch](#ngSwitch)
     * [NgFor](#ngFor)
+    * [Directive NgFor](#ngFor)
   * [* and &lt;template>](#star-template)
+  * [* et &lt;template>](#star-template)
   * [Template reference variables](#ref-vars)
+  * [Références de variables dans les Templates](#ref-vars)
   * [Input and output properties](#inputs-outputs)
+  * [Propriétés d'entrées et sorties](#inputs-outputs)
   * [Template expression operators](#expression-operators)
+  * [Opérateurs d'expressions de template](#expression-operators)
     * [pipe](#pipe)
+    * [les pipes](#pipe)
+    * [Opérateur de sécurité de référence (?.)](#safe-navigation-operator)
     * [safe navigation operator (?.)](#safe-navigation-operator)
-
   The <live-example></live-example>
   demonstrates all of the syntax and code snippets described in this chapter.
 
+  la <live-example>démo</live-example>
+  présente toutes la syntaxe et les exemples de code décrit dans ce chapitre.
+
 .l-main-section
 :marked
   ## HTML
+  ## Le HTML
+
   HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
+  HTML est le language des templates Angular. Notre application [démarrage rapide](../quickstart.html) a un template en pure HTML:
+
 code-example(language="html" escape="html").
   <h1>My First Angular 2 App</h1>
 
 :marked
   Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)
 
+  Quasiment toute la syntaxe HTML est valide pour les templates Angular. L'élement `<script>` est une exception notable;
+  qui est interdit, éliminant le risque d'attaque par injection de script. (En pratique, `<script>` est simplement ignoré.)
+
   Some legal HTML doesn’t make much sense in a template. The `<html>`, `<body>`, and `<base>` elements have no useful role in our repertoire. Pretty much everything else is fair game.
 
+  Quelques balises html valides n'ont pas de sens dans un template.
+  Les balises `<html>`, `<body>`, et `<base>` ne jouent aucun rôle utile dans un template.
+  À peu près tout le reste fonctionne de la même façon.
+
   We can extend the HTML vocabulary of our templates with components and directives that appear as new elements and attributes. In the following sections we are going to learn how to get and set DOM (Document Object Model) values dynamically through data binding.
 
+  Nous pouvons étendre le vocabulaire HTML de nos templates avec les composants et les directives qui apparaissent comme des nouveaux éléments et attibuts.
+  Dans les sections suivantes, nous allons apprendre comment nous définissons et optenons les valeurs du DOM (Document Object Model : Modèle Object du Document) dynamiquement via la liaison de données.
+
   Let’s turn to the first form of data binding &mdash; interpolation &mdash; to see how much richer template HTML can be.
 
+  Passons maintenant à notre premier formulaire utilisant le type de liaison de donnée &mdash; interpolation &mdash; pour découvrir comment les templates peuvent être puissant.
+
 .l-main-section
 :marked
   ## Interpolation
+  ## l'Interpolation
+
   We met the double-curly braces of interpolation, `{{` and `}}`, early in our Angular education.
+
+  Nous avons rencontré l'interpolation via les accolades double, au début de notre apprentissage Angular.
 +makeExample('template-syntax/ts/app/app.component.html', 'first-interpolation')(format=".")
 :marked
   We use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
 
+  Nous utilisons l'interpolation pour incorposer des chaines de caractères caculé à l'intérieur du texte entre deux balises html et dans l'affectation des attributs.
+
 +makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".")
 :marked
   The material between the braces is often the name of a component property. Angular replaces that name with the
   string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties
   and "fills in the blanks", first displaying a bold application title and then a heroic image.
 
+  Le contenu entre les accolades est souvent le nom d'une propriété du composant.
+  Angular remplace ce nom avec la valeur en chaine de caractère de la propriété du composant correspondante.
+  Dans l'exemple au dessus, Angular évalue les propriétés `title` et `heroImageUrl` et "remplit les blancs",
+  affichant d'abord un titre d'application en gras et ensuite l'image d'un héro.
+
   More generally, the material between the braces is a **template expression** that Angular first **evaluates**
   and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers within braces:
+
+  Plus généralement, le contenu entre les accolades est une **expression de template** que Angular **évalue** au préalable
+  et ensuite **convertis en chaine de caractère**. L'interpolation suivante illustre ce faît en additionnant les deux nombres à l'intérieur des accollades&nbsp;:
 +makeExample('template-syntax/ts/app/app.component.html', 'sum-1')(format=".")
 :marked
   The expression can invoke methods of the host component, as we do here with `getVal()`:
+
+  L'expression peut invoquer une méthode du composant hôte, comme nous le montrons ici avec `getVal()`&nbsp;:
 +makeExample('template-syntax/ts/app/app.component.html', 'sum-2')(format=".")
 :marked
   Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally,
   it assigns this composite interpolated result to an **element or directive property**.
 
+  Angular évalue toute les expressions dans les doubles accollades, et convertis le résultat de l'expression en chaine de caractères,
+  le concatène avec le texte voisin. Finalement, assigne le résultat final de l'interpolation à **l'élément ou la propriété de la directive**.
+
   We appear to be inserting the result between element tags and assigning it to attributes.
   It's convenient to think so, and we rarely suffer for this mistake.
   Though this is not exactly true. Interpolation is a special syntax that Angular converts into a
   [property binding](#property-binding), and is explained below.
 
+  Nous croyons souvent qu'il s'agit d'une insertion du résultat entre l'élément et l'assignation à un attribut.
+  Il est commode de penser ainsi, et nous souffrons rarement de cette erreur.
+  Bien que ce soit pas exactement vrai. L'interpolation est une syntaxe spéciale que Angular convertis
+  en une liaison de donnée sur propriété, et cela sera expliqué plus tard.
+
   But first, let's take a closer look at template expressions and statements.
 
+  Mais d'abord, regardons de plus près les expressions et instructions de template.
+
 <a id="template-expressions"></a>
 .l-main-section
 :marked
   ## Template expressions
+
+  ## Expressions de template
+
   A template **expression** produces a value.
   Angular executes the expression and assigns it to a property of a binding target;
   the target might be an HTML element, a component, or a directive.
 
+  Une **expression** de template produit une valeur. Angular execute l'expression et l'assigne ensuite à une propriété de la cible lié;
+  la cible peut être un élément HTML, un composant, ou une directive.
+
   We put a template expression within the interpolation braces when we wrote `{{1 + 1}}`.
   We’ll see template expressions again in the [property binding](#property-binding) section,
   appearing in quotes to the right of the `=` symbol as in `[property]="expression"`.
 
+  Nous mettons une expression de template entre les accollades d'interpolation quand nous écrivons `{{1 + 1}}`.
+  Nous verrons de nouveau les expression de template dans la section sur la liaison de propriétés,
+  apparaissant entre les guillements double à droite du symbole `=` comme dans `[property]="expression"`.
+
   We write template expressions in a language that looks like #{_JavaScript}.
   Many #{_JavaScript} expressions are legal template expressions, but not all.
 
+  Nous écrivons les expressions de template dans un language qui ressemble à #{_JavaScript}.
+  La plupart des expressions #{_JavaScript} sont valide dans les expressions de template, mais pas toutes.
+
   #{_JavaScript} expressions that have or promote side effects are prohibited,
   including:
 
+  Les expressions #{_JavaScript} qui ont ou provoquent des effets de bords sont interdit, incluant&nbsp;:
+
   * assignments (`=`, `+=`, `-=`, ...)
+  * les affectations (`=`, `+=`, `-=`, ...)
   * !{__new_op}
+  * l'opérateur !{__new_op}
   * chaining expressions with !{__chaining_op}
+  * L'enchainement d'expressions avec !{__chaining_op}
   * increment and decrement operators (`++` and `--`)
+  * Les opérateurs d'incrementation et de décrementation (`++` and `--`)
 
 :marked
   Other notable differences from #{_JavaScript} syntax include:
 
+  D'autres différences notables avec la syntaxe #{_JavaScript} comprennent:
+
 block notable-differences
   :marked
     * no support for the bitwise operators `|` and `&`
+    * pas de support pour les opérateurs binaires `|` and `&`
     * new [template expression operators](#expression-operators), such as `|` and `?.`
+    * les nouveaux [opérateurs d'expressions de template](#expression-operators), comme `|` et `?.`
 
 h3#expression-context Expression context
+h3#expression-context Contexte d'expression
 
 block template-expressions-cannot
   :marked
@@ -126,100 +222,192 @@ block template-expressions-cannot
     can’t call `console.log` or `Math.max`. They are restricted to referencing
     members of the expression context.
 
+    Plus surprenant, les expressions de templates ne peuvent pas accèder au namespace globale.
+    Il n'est pas possible d'accèder à `window` ou `document`, ni appeler `console.log` ou `Math.max`.
+    Elles sont restreint aux seules membres référencé par le contexte de l'expression.
+
 :marked
   The *expression context* is typically the **component instance**, which is
   the source of binding values.
 
+  Le *contexte de l'expression* est typiquement l'**instance du composant**, qui est la source des valeurs liés.
+
   When we see *title* wrapped in double-curly braces, `{{title}}`,
   we know that `title` is a property of the data-bound component.
   When we see *isUnchanged* in `[disabled]="isUnchanged"`,
   we know we are referring to that component's `isUnchanged` property.
 
+  Quand nous voyons *title* entouré dans des double accollades, `{{title}}`,
+  nous savons que `title` est une propriété du composant lié.
+  Quand nous voyons *isUnchanged* dans `[disabled]="isUnchanged"`,
+  Nous savons que nous faisons référence à la propriété `isUnchanged` du composant
+
   The component itself is usually the expression *context*, in which case
   the template expression usually references that component.
 
+  Le composant lui-même est habituellement le *contexte* des expressions, dans ce cas
+  l'expression de template habituellement référence ce composant.
+
   The expression context can include objects other than the component.
   A [template reference variable](#ref-vars) is one such alternative context object.
 
+  Le contexte d'une expression peut inclure d'autres objets que ceux du composant.
+  Une [variable référence de template](#ref-vars) est un objet alternatif utilisable dans le context d'une expression.
+
 :marked
   <a id="no-side-effects"></a>
   ### Expression guidelines
+
+  ### Recommandations pour les expressions
+
   Template expressions can make or break an application.
   Please follow these guidelines:
 
+  Les expressions de Templace peuvent faire fonctionner ou empêcher de fonctionner une application.
+  Merci de suivre ces recommandations&nbsp;:
+
   * [No visible side effects](#no-visible-side-effects)
+  * [Pas d'effets secondaires visibles](#no-visible-side-effects)
   * [Quick execution](#quick-execution)
+  * [Execution rapide](#quick-execution)
   * [Simplicity](#simplicity)
+  * [Simple](#simplicity)
   * [Idempotence](#idempotence)
+  * [Idempotent](#idempotence)
 
   The only exceptions to these guidelines should be in specific circumstances that you thoroughly understand.
 
+  La seule exception à ces recommandations doivent être dans des circonstances exceptionnels que vous comprenez parfaitement.
+
   #### No visible side effects
 
+  #### Pas d'effets seconfaires visibles
+
   A template expression should not change any application state other than the value of the
   target property.
 
+  Une expression de template ne doit changer aucun état de l'application autre que la valeur de la propriété cible
+
   This rule is essential to Angular's "unidirectional data flow" policy.
   We should never worry that reading a component value might change some other displayed value.
   The view should be stable throughout a single rendering pass.
 
+  Cette règles est essentiel pour la politique d'angular de "flux de données unidirectionnel".
+  Nous ne devrions jamais considérer que lire une valeur d'un composante peut changer une autre valeur affiché.
+  La vue doit être stable tout au long de la phase de rendu unique de la vue.
+
   #### Quick execution
+
+  #### Execution rapide
   Angular executes template expressions more often than we think.
   They can be called after every keypress or mouse move.
   Expressions should finish quickly or the user experience may drag, especially on slower devices.
   Consider caching values computed from other values when the computation is expensive.
 
+  Angular exécute les templates d'expression plus souvent que nous l'imaginons.
+  Ils peut être exécuté après chaque appuie sur une touche ou déplacement de la souris.
+  Les expressions doivent finir rapidement ou l'expérience utilisateur peut ralentir, spécialement sur les appareils lents.
+  Envisager la mise en cache des veleurs calculés sur d'autres veleurs quand le calcul est coûteux
+
   #### Simplicity
+
+  #### Simple
   Although it's possible to write quite complex template expressions, we really shouldn't.
 
+  Bien qu'il soit possible d'écrire des expressions de template complexe, vous devez éviter.
+
   A property name or method call should be the norm.
   An occasional Boolean negation (`!`) is OK.
   Otherwise, confine application and business logic to the component itself,
   where it will be easier to develop and test.
 
+  Un nom de propriété ou un appel de méthode doit être la norme.
+  Une expression booléenne de négation (`!`) occationnellement est acceptatable.
+  Autrement, confinez la logique métier et de l'application dans le composant lui même,
+  où cela est plus simple de développer et tester.
+
   #### Idempotence
+
+  #### Idempotent
   An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is ideal because
   it is free of side effects and improves Angular's change detection performance.
 
+  Une expression [idempotent](https://fr.wikipedia.org/wiki/Idempotence) est idéale
+  parce qu'il est exempt d'effets secondaires et améliore la performance de détection des changements par Angular.
+
   In Angular terms, an idempotent expression always returns *exactly the same thing* until
   one of its dependent values changes.
+
+  Dans les conditions d'Angular, une expressions idempotent retourne toujours *exactement la même valeur*
+  jusqu'à ce qu'une valeur dépendante change.
 :marked
   Dependent values should not change during a single turn of the event loop.
   If an idempotent expression returns a string or a number, it returns the same string or number
   when called twice in a row. If the expression returns an object (including #{_an} `#{_Array}`),
   it returns the same object *reference* when called twice in a row.
 
+  La valeur dépendante ne doit pas changer durant un simple tour de la boucle d'évènement.
+  Si une expression idempotent retourne une chaine de caractère ou un nombre, il retourne toujour la même chaine ou nombre
+  quand il est appelé deux fois dans une ligne. Si l'expression retourne un objet (incluant un `#{_Array}`),
+  Il retourne la même instance de l'objet quand il est appelé deux fois dans une ligne.
+
 .l-main-section#template-statements
 :marked
   ## Template statements
 
+  ## Instructions de template
+
   A template **statement** responds to an **event** raised by a binding target
   such as an element, component, or directive.
 
+  Un **instruction** de template répond à un **évènement* levé par une cible lié comme
+  un élément, un composant, ou une directive.
+
   We’ll see template statements in the [event binding](#event-binding) section,
   appearing in quotes to the right of the `=` symbol as in `(event)="statement"`.
 
+  Nous verrons des instructions de template dans la section [liaison d'évènement](#event-binding),
+  apparaissant entre des guillemets double à drtoite du symbole `=` comme dans `(event)="instruction"`.
+
   A template statement *has a side effect*.
   It's how we update application state from user input.
   There would be no point to responding to an event otherwise.
 
+  Une instruction de template *a un effet de bord*,
+  C'est la façon pour mettre à jour l'état d'une application à partir d'entrés de l'utilisateur.
+  Si ce n'est pas le cas, cela n'as pas d'interêt de répondre à un évènement.
+
 .l-sub-section
   :marked
     Responding to events is the other side of Angular's "unidirectional data flow".
     We're free to change anything, anywhere, during this turn of the event loop.
 
+    Réagir à un évènement est l'autre aspect du "flux de données unidirectionnel" d'Angular.
+    Nous sommes libre de changer tout, n'importe où durant l'exécution de la boucle d'évènement.
+
 :marked
   Like template expressions, template *statements* use a language that looks like #{_JavaScript}.
   The template statement parser is different than the template expression parser and
-  specifically supports both basic assignment (`=`) and chaining expressions 
+  specifically supports both basic assignment (`=`) and chaining expressions
   (with !{__chaining_op}).
 
+  Comme les expressions de template, les *instructions* de template utilise un language qui resemble à #{_JavaScript}.
+  Le parseur d'instructions de template est différent que le parseur d'expression avec entre autre le support
+  des assignement basic (`=`) et les suites d'expressions (avec !{__chaining_op}).
+
   However, certain #{_JavaScript} syntax is not allowed:
+
+  Toutefois, certaines syntaxe de #{_JavaScript} ne sont pas autorisé&nbsp;:
   * !{__new_op}
+  * l'opérateur !{__new_op}
   * increment and decrement operators, `++` and `--`
+  * l'opérateur d'incrément ou décrément, `++` et `--`
   * operator assignment, such as `+=` and `-=`
+  * L'opérateur d'assignement, comme `+=` et `-=`
   * the bitwise operators `|` and `&`
+  * Les opérateurs binaires `|` et `&`
   * the [template expression operators](#expression-operators)
+  * Les [opérateurs d'expression de template](#expression-operators)
 
 :marked
   ### Statement context
@@ -567,7 +755,7 @@ a(id="one-time-initialization")
   The `[hero]` binding, on the other hand, remains a live binding to the component's `currentHero` property.
 
   ### Property binding or interpolation?
-  We often have a choice between interpolation and property binding. 
+  We often have a choice between interpolation and property binding.
   The following binding pairs do the same thing:
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation')(format=".")
 :marked
@@ -584,13 +772,13 @@ a(id="one-time-initialization")
 :marked
   #### Content Security
   Imagine the following *malicious content*.
-+makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")    
++makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")
 :marked
   Fortunately, Angular data binding is on alert for dangerous HTML.
   It *sanitizes* the values before displaying them.
   It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
   nor property binding.
-+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation-sanitization')(format=".")    
++makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation-sanitization')(format=".")
 :marked
   Interpolation handles the script tags differently than property binding but both approaches render the
   content harmlessly.
@@ -1438,7 +1626,7 @@ block json-pipe
 
 block dart-safe-nav-op
   //- N/A
-  
+
 :marked
   Let’s elaborate on the problem and this particular solution.