angular-cn/public/docs/js/latest/guide/setup.jade

.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.
    If you don't already have an HTTP server,
    you can install one using <code>npm install -g http-server</code>.
    (If that results in an access error, then you might need to use
    <code><b>sudo</b> npm ...</code>.)

  p For example:

  code-example.
    # From the directory that contains index.html:
    npm install -g http-server  # Or sudo npm install -g http-server
    http-server                 # Creates a server at localhost:8080
    # In a browser, visit localhost:8080/index.html

.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;

    code-pane(language="html" name="ES5" format="linenums").
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;script src=&quot;https://code.angularjs.org/2.0.0-alpha.26/angular2.sfx.dev.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;my-app&gt;&lt;/my-app&gt;
        &lt;/body&gt;
      &lt;/html&gt;

.callout.is-helpful
  header Don't use code.angularjs.org in a live app
  p.
    This example serves the Angular library from <a href="http://code.angularjs.org">code.angularjs.org</a>. This is
    fine for examples, but you'd want to serve it yourself or use a CDN for real deployment.

.l-main-section
  h2#section-set-up-the-starting-component Set up the starting component

  p.
    In <code>main.ts</code>, create a class called <code>AppComponent</code>, configure it to bind to the
    <code>&lt;my-app&gt;</code> element in <code>index.html</code>, and call Angular's <code>bootstrap()</code> to kick
    it all off like this:

  code-tabs
    code-pane(language="javascript" name="TypeScript" format="linenums").
      import {Component, View, bootstrap} from 'angular2/angular2';

      @Component({
        selector: 'my-app'
      })
      @View({
        template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
      })
      class AppComponent {
      }

      bootstrap(AppComponent);
    code-pane(language="javascript" name="ES5" format="linenums").
        function AppComponent() {}

        AppComponent.annotations = [
          new angular.ComponentAnnotation({
            selector: 'my-app'
          }),
          new angular.ViewAnnotation({
            template: '&lt;h1&gt;My first Angular 2 App&lt;/h1&gt;'
          })
        ];

        document.addEventListener('DOMContentLoaded', function() {
          angular.bootstrap(AppComponent);
        });


  .callout.is-helpful
    header Annotations vs Decorators
    p.
      If you are transpiling using a tool that translates the <code>@</code> symbols to
      annotations (for example Traceur), you will need to import the annotation versions of
      Component and View. That can be easily achieved using
      <code>import {ComponentAnnotation as Component, ViewAnnotation as View}</code>.

.l-main-section
  h2#section-run-it Run it!

  p.
    Open <code>index.html</code> through your web server and you should see:

  figure.image-display
    img(src='/resources/images/examples/setup-example1.png' alt="Example of Todo App")

.l-main-section
  h2#section-explanations Explanations

  p This basic Angular app contains the structure for any app you'll build.

  .l-sub-section
    h3 It's all a tree
    p.
      You can think of Angular apps as a tree of components.  This root component we've been talking about acts as the top
      level container for the rest of your application.  You've named this one <code>AppComponent</code>, but there's
      nothing special about the name and you can use whatever makes sense to you.

    p.
      The root component's job is to give a location in the <code>index.html</code> file where your application will
      render through its element, in this case <code>&lt;my-app&gt;</code>.  There is also nothing special about this
      element name; you can pick it as you like.

    p.
      The root component loads the initial template for the application that will load other components to perform
      whatever functions your application needs - menu bars, views, forms, etc.  We'll walk through examples of all of
      these in the following pages.

  .l-sub-section
    h3 @Component and @View annotations

    p.
      A component annotation describes details about the component. An annotation can be identified by its at-sign (<code>@</code>).
    p.
      The <code>@Component</code> annotation defines the HTML tag for the component by specifying the component's CSS selector.
    p.
      The <code>@View</code> annotation defines the HTML that represents the component. The component you wrote uses an inline template, but you can also have an external template. To use an external template, specify a <code>templateUrl</code> property and give it the path to the HTML file.

  .l-sub-section
    h3 import vs. window.angular
    p.
      The main difference between the ES5 and TypeScript versions is the loading of modules.

    strong TypeScript
    p.
      TypeScript supports ES6 module loading syntax. ES6 modules allow for modular loading of JavaScript code. Using ES6 modules you can cherry-pick only what you need for your app.

    strong ES5
    p.
      In ES5 the script file creates an angular property on the window of the browser. This property contains every piece of Angular core, whether you need it or not.

    code-tabs
      code-pane(language="javascript" name="TypeScript" format="linenums" ).
        import {Component, View, bootstrap} from 'angular2/angular2';
        ...
        // bootstrap is available for use because it was imported from angular core
        bootstrap(AppComponent);
      code-pane(language="javascript" name="ES5" format="linenums").
        // window.angular is available because the script file attaches the angular property to the window
        document.addEventListener('DOMContentLoaded', function() {
          angular.bootstrap(AppComponent);
        });