anchor.diff:  .l-main-section
   :marked
     ## What next?
  +  
  +  ## Et maintenant?
  +  
     Our first application doesn't do much. It's basically "Hello, World" for Angular 2.
  +  
  +  Notre première application ne fait pas grand chose. C'est basiquement un "Hello, World" pour Angular 2.
   
     We kept it simple in our first pass: we wrote a little Angular component,
     created a simple `index.html`, and launched with a
     static file server. That's about all we'd expect to do for a "Hello, World" app.
  +  
  +  Nous avons laissé les choses simples pour notre première passe: nous avons écrit un petit composant Angular,
  +  créé un simple fichier `index.html`, et lancé notre application avec un serveur de fichiers statique.
  +  C'est à peu près tout ce que nous pouvions espérer pour une application "Hello, World".
   
     **We have greater ambitions!**
  +  
  +  **Nous avons de plus grandes ambitions!**
   block what-next-ts-overhead
     :marked
       The good news is that the overhead of setup is (mostly) behind us.
       We'll probably only touch the `package.json` to update libraries.
       We'll likely open `index.html` only if we need to add a library or some css stylesheets.
  +  
  +    La bonne nouvelle, c'est que le gros de la mise en place est (en grande partie) derrière nous.
  +    Nous allons probablement seulement modifier le fichier `package.json` pour mettre à jour les librairies.
  +    Nous ouvrons le fichier `index.html` seulement si nous avons besoin d'ajouter une librairie ou des feuilles de styles.
   :marked
     We're about to take the next step and build a small application that
     demonstrates the great things we can build with Angular 2.
  +  
  +  Nous sommes sur le point d'avancer à l'étape suivante et de construire une petite application qui 
  +  présente toutes les choses géniales que nous pouvons réaliser avec Angular 2.
   
     Join us on the [Tour of Heroes Tutorial](./tutorial)!
  +  
  +  Rejoignez nous dans le [Tutoriel la tour des héros](./tutorial)!
  
positive.code:   #[b Create the component file]
    #[code #[+adjExPath('app/app.component.ts')]] (in this newly created directory) with the following content:
  
  +makeExample('app/app.component.ts')
  
  .l-verbose-section
    :marked
      ### AppComponent is the root of the application
  
      Every Angular app has at least one **root component**, conventionally named `AppComponent`,
      that hosts the client user experience.
      Components are the basic building blocks of Angular applications.
      A component controls a portion of the screen &mdash; a *view* &mdash; through its associated template.
  
      This QuickStart has only one, extremely simple component.
      But it has the essential structure of every component we'll ever write:
  
      * One or more [import](#component-import)
      statements to reference the things we need.
      * A [@Component #{_decorator}](#component-decorator)
      that tells Angular what template to use and how to create the component.
      * A [component class](#component-class)
      that controls the appearance and behavior of a view through its template.
  
    a#component-import
    :marked
      ### Import
  
      Angular apps are modular. They consist of many files each dedicated to a purpose.
      Angular itself is modular. It is a collection of library modules
      each made up of several, related features that we'll use to build our application.
  
      When we need something from a module or library, we import it.
      Here we import the Angular 2 core so that our component code can have access to
      the `@Component` #{_decorator}.
  
    +makeExcerpt('app/app.component.ts', 'import')
  
  
negative.code:   </span>
    and displays the simple message:
  
    Essayez le <live-example></live-example> qui charge un exemple d'application
    <span if-docs="ts">
      dans un <a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>
    </span>
    et affiche le simple message:
  
  figure.image-display
    img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
  
  :marked
    # Build this app!
  
    # Construisez cette application !
  
    - [Prerequisite](#prereq): Install #{_prereq}
    - [Prérequis](#prereq): Installez #{_prereq}
    - [Step 1](#create-and-configure): Create the app’s project folder and
      define package dependencies and special project setup
    - [Étape 1](#create-and-configure): Créez le dossier de votre application,
      définissez les dépendances de votre paquet et son installation
    - [Step 2](#root-component): Create the app’s Angular root component
    - [Étape 2](#root-component): Créez le composant racine de votre application Angular
    - [Step 3](#main): Add <span ngio-ex>main.ts</span>, identifying the root component to Angular
    - [Étape 3](#main): Ajoutez <span ngio-ex>main.ts</span>, qui représente le composant racine pour Angular
    - [Step 4](#index): Add `index.html`, the web page that hosts the application
    - [Étape 4](#index): Ajoutez `index.html`, la page web qui embarque votre application
    - [Step 5](#build-and-run): Build and run the app
    - [Étape 5](#build-and-run): Compilez et lancez l'application
    - [Make some changes to the app](#make-some-changes)
    - [Faites quelques changements dans l'application](#make-some-changes)
    - [Wrap up](#wrap-up)
    - [Conclusion](#wrap-up)
  
  .l-main-section
  h2#prereq Prerequisite: #{_prereq}
  
  h2#prereq Prérequis: #{_prereq}
  
  block setup-tooling
    :marked
      Install **[Node.js® and npm](https://nodejs.org/en/download/)**
      if they are not already on your machine.
  
      Installez **[Node.js® et npm](https://nodejs.org/en/download/)**
      s'ils ne sont pas déjà présents sur votre machine.
    .l-sub-section
      :marked
        **Verify that you are running at least node `v4.x.x` and npm `3.x.x`**
        by running `node -v` and `npm -v` in a terminal/console window.
        Older versions produce errors.
  
        **Vérifiez que vous exécutez au moins node `v4.x.x` et npm `3.x.x`**
        en lançant les commandes `node -v` et `npm -v` dans votre terminal/invite de commandes.
        Les versions plus anciennes génèrent des erreurs.
  
  block download-source
    .l-main-section
    .callout.is-helpful
      header Download the source
  
      header Téléchargez les sources
      :marked
        Instead of following each step of these instructions, we can
        [download the QuickStart source](https://github.com/angular/quickstart/blob/master/README.md)
        from github and follow its brief instructions.
  
        Au lieu de suivre chaque étape de ces instructions, vous pouvez
        [télécharger les sources du démarrage rapide](https://github.com/angular/quickstart/blob/master/README.md)
        depuis github et suivre ses brèves indications.
  
  .l-main-section
  button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
    Hide explanations
  button(class="verbose off md-primary md-button md-ink-ripple", type="button", onclick="verbose(false)").
    Cacher les explications
  button(class="verbose on md-primary md-button md-ink-ripple", type="button", onclick="verbose(true)").
    View explanations
  button(class="verbose on md-primary md-button md-ink-ripple", type="button", onclick="verbose(true)").
    Afficher les explications
  .l-verbose-section
    :marked
      *Explanations* describe the concepts and reasons behind the instructions.
      Explanations have a thin border on the left like *this* block of text.
  
      *Les explications* décrivent les concepts et les raisons expliquant les instructions.
      Les explications ont une fine bordure sur la gauche comme *ce* bloc de texte.
  
      Click *Hide Explanations* to show only the instructions. Click *View Explanations* to see everything again.
  
      Cliquez sur *Cacher les explications* pour afficher uniquement les instructions. Cliquez sur *Afficher les explications* pour tout voir à nouveau.
  
  .l-sub-section
    :marked
      We'll see many code blocks as we build the QuickStart app. They're all easy to copy and paste:
  
      Nous allons voir de nombreux blocs de code au fur et à mesure de la construction de l'application du démarrage rapide. Ils peuvent tous être copiés collés simplement :
    code-example(format="nocode").
      Cliquez sur l'icône sur la droite pour copier les extraits de code dans le presse-papier ==>
  
  .l-main-section
  h2#create-and-configure Step 1: Create and configure the project
  
  h2#create-and-configure Étape 1: Créer et configurer le projet
  
  - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'package definition and configuration files'
  
  - var _package_and_config_files = _docsFor == 'dart' ? 'pubspec.yaml' : 'définition du paquet et configuration des fichiers'
  
  :marked
    In this step we:
    Dans cette étape, nous allons :
    * [(a) Create the project folder](#create-the-project-folder)
    * [(a) Créer le dossier du projet](#create-the-project-folder)
    * [(b) Add #{_package_and_config_files}](#add-config-files)
    * [(b) Ajouter #{_package_and_config_files}](#add-config-files)
    * [(c) #{_Install} packages](#install-packages)
    * [(c) #{_Install} les paquets](#install-packages)
  
  h3 (a) Create the project folder
  h3 (a) Créer le dossier du projet
  
  - var _ = _docsFor == 'dart' ? '_' : '-';
  code-example(language="sh").
  