<commit_before>.l-main-section

  h2#section-install-or-plunker Install Angular
  p There are four steps to create any Angular app:
  ol
    li Create an entry point HTML file where users will start
    li Load the Angular library at the top of the file
    li Make a root component for your application
    li Bootstrap Angular

  p.
    You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.

  p.
    When you're serving local files, edit and save them and start a web server that serves files in that directory.  If you have Python installed, you can run a basic HTTP server from the root of your code directory with:

  pre.prettyprint.lang-bash
    code python -m SimpleHTTPServer 8000

.callout.is-helpful
  header Typescript vs ES5
  p.
    Although we work through the examples in TypeScript, you can also use
    regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
    version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
    <code>.ts</code>.


.l-main-section
  h2#section-create-an-entry-point Create an entry point
  p.
    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
    you'll build your first component.

  p.
    In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
    application.

  p.
    The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.

  code-tabs
    code-pane(language="html" name="TypeScript" format="linenums").
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js&quot;&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;my-app&gt;&lt;/my-app&gt;
          &lt;script&gt;
            System.import(&#39;main&#39;);
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
<commit_msg>Added traceur runtime script to the TS code in the step-by-step guide<commit_after>.l-main-section

  h2#section-install-or-plunker Install Angular
  p There are four steps to create any Angular app:
  ol
    li Create an entry point HTML file where users will start
    li Load the Angular library at the top of the file
    li Make a root component for your application
    li Bootstrap Angular

  p.
    You can edit and test out your apps by serving local files with a web server. Follow the steps in the <a href="../quickstart.html">quickstart</a> to get Typescript setup.

  p.
    When you're serving local files, edit and save them and start a web server that serves files in that directory.  If you have Python installed, you can run a basic HTTP server from the root of your code directory with:

  pre.prettyprint.lang-bash
    code python -m SimpleHTTPServer 8000

.callout.is-helpful
  header Typescript vs ES5
  p.
    Although we work through the examples in TypeScript, you can also use
    regular ES5. Click the ES5 link in any code box to see the ES5 JavaScript
    version. Note that in ES5, you'd want to name your files <code>.js</code> rather than
    <code>.ts</code>.


.l-main-section
  h2#section-create-an-entry-point Create an entry point
  p.
    Create an <code>index.html</code> file and add the Angular library tags and a <code>main.ts</code> file where
    you'll build your first component.

  p.
    In the <code>&lt;body&gt;</code>, add an element called <code>&lt;my-app&gt;</code> that will be the root of your
    application.

  p.
    The TypeScript setup includes System.js, a third-party open-source library that adds ES6 module loading functionality to browsers. This step isn't needed for the ES5 version.

  code-tabs
    code-pane(language="html" name="TypeScript" format="linenums").
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;script src=&quot;https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://jspm.io/system@0.16.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js&quot;&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;my-app&gt;&lt;/my-app&gt;
          &lt;script&gt;
            System.import(&#39;main&#39;);
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;

{'fraction_non_alphanumeric': 0.10650010586491637, 'fraction_numerical': 0.011856870633072199, 'mean_word_length': 3.0445205479452055, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 31, 'https://': 5, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7376512', 'n_tokens_mistral': 1518, 'n_tokens_neox': 1449, 'n_words': 535}