include ../../../../_includes/_util-fns

:markdown
  Let's start from zero and build a simple Angular 2 application in JavaScript.

.callout.is-helpful
  header Don't want JavaScript?
  :markdown
    Although we're getting started in JavaScript, you can also write Angular 2 apps
    in TypeScript and Dart by selecting either of those languages from the combo-box in the banner.

:markdown
  We'll do it in four short steps
  1. Create a new project folder and an *index.html*
  1. Write the root component for our application in *app.js*
  1. Bootstrap the app
  1. Run it

.l-main-section
  :markdown
    ## Create a project folder and an *index.html*

    Create a new folder to hold our application project, perhaps like this:

  pre.prettyprint.lang-bash
    code mkdir firstNgApp && cd firstNgApp

  :markdown
    Then add a new `index.html` file to the project folder and enter the following HTML

  +makeExample('gettingstarted/js/index.html', null, 'index.html')(format="")

  .l-sub-section
    :markdown
      Our app loads two script files in the `<head>` element:

      >***angular.js***, the Angular 2 library.

      >***app.js***, the application JavaScript which we're about to write.

      In the `<body>`, there's an element called `<my-app>`. This is a placeholder for the *root* of our
      application. Angular will display our application content here.


.l-main-section
  :markdown
    ## Write the *app* component

    Create an *app.js* file with the following content:

  +makeExample('gettingstarted/js/app.js', 'class-w-annotations')

  :markdown
    When we step back and squint, we see that
    we're creating a visual component named **`appComponent`** by chaining three methods
    originating in the global Angular namespace object called, **`ng`**.

    ```
    var appComponent = ng
        .Component({...})
        .View({...})
        .Class({...})
    ```
    The **`Component`** method tells Angular that this is a component
    controlling the element named "my-app".

  +makeExample('gettingstarted/js/app.js', 'component')

  :markdown
    You may remember we added such an element to our *index.html* above.

    The **`View`** method identifies the HTML template
    that defines the visual appearance of the component.

  +makeExample('gettingstarted/js/app.js', 'view')

  :markdown
    We're writing the HTML template inline
    in this example. Later we'll move the HTML to a view template file and
    assign the template's filename to the `templateUrl`.
    We'll prefer that practice for all but the most trivial templates.

    The **`Class`** method is where we implement the component itself,
    giving it properties and methods that bind to the view and whatever
    behavior is appropriate for this part of the UI.

  +makeExample('gettingstarted/js/app.js', 'class')

  :markdown
     This component has the minimum implementation:
     a *no-op* constructor function that does nothing because there is nothing to do.
     We'll see more interesting component classes in future examples.

.l-main-section
  :markdown
    ## Run it!

    We need a file server to serve the static assets of our application (*index.html* and *app.js*).

    If you have python on your machine, you're in luck: python ships with a basic static file server.
    Open a terminal window and enter:

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

  :markdown
    then point a browser to http://localhost:8000 which should display our simple text message:

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

  :markdown
    **If you don't have python**, you may have to install a server.
    You might prefer one of the many node-based static servers such as
      [http-server](https:/github.com/nodeapps/http-server "http-server"),
      [superstatic](https://www.npmjs.com/package/superstatic "superstatic"), or
      [live-server](https://www.npmjs.com/package/live-server "live-server").

  :markdown
    For this example we'll use **live-server** because it performs a live reload by default and it's
    fun to watch the browser update as we make changes.

    Open a terminal (or Windows/Linux command line) and enter:

  pre.prettyprint.lang-bash
    code npm install -g live-server

  .callout.is-helpful
    :markdown
      Install [**node** and **npm**](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
      first if you haven't already. They're indispensible front-end developer tools.

  :markdown
    After it finishes installing, start the server on port 8000

  pre.prettyprint.lang-bash
    code live-server --port=8000

  :markdown
      **live-server** loads the browser for us and refreshes the page as we make
      changes to the application.

.l-main-section
  :markdown
    ## Add TypeScript Type Definition Files (optional)

    "*Wait*", you say, "*we're writing in JavaScript, not TypeScript!*".
    Indeed we are. But code editors (such as [Visual Studio Code](https://code.visualstudio.com/) and
    [Web Storm](https://www.jetbrains.com/webstorm/features/))
    can improve the JavaScript development experience by providing type information and
    displaying API documentation ("intellisense") based on TypeScript type definition files.

    We can download type definitions files for third-party libraries such as Angular
    from the [DefinitelyTyped](http://definitelytyped.org/) repository using the
    [**tsd package manager**](https://www.npmjs.com/package/tsd "TSD Package Manager").

    If you haven't already installed the *tsd*, do it now
    with an npm command entered in a terminal or command window.

  pre.prettyprint.lang-bash
    code npm install -g tsd

  :markdown
    Now let's download and install the core set of type definitions files for Angular development
    in the root directory of our application.

  pre.prettyprint.lang-bash
    code tsd query angular2 es6-promise rx rx-lite jasmine --action install --save

  :markdown
    We'll find a ***typings*** folder in the root directory
    with subfolders for each of the five downloaded type definition files (angular, es6-promise, rx, rx-lite, jasmine).
    Type definition files have names ending in ***d.ts***.
    There's also a summary ***tsd.d.ts*** file containing references to each of them.

    Check your editor's documentation for instructions on using the *tsd.d.ts* file to
    light up type checking and intellisense for these libraries.

.l-main-section
  :markdown
    ## It's all a tree

    We can think of Angular apps as a tree of components.

    The `AppComponent` that we've been talking about acts as the top
    level container - the root of the tree - for the rest of our application.
    There's nothing special about the `AppComponent` name and we can use whatever makes sense to us.

    We've pinned the root component to an element in the `index.html` file where our application will
    render its view. The element is called `<my-app>` but there is nothing special about this
    name either.

    The *root component* loads the initial template for the application.
    That template could load other components such as menu bars, views, and forms
    that display information and respond to user gestures.

    And these components could load yet more components until the browser page became a deep tree
    of nested functionality.

    We'll walk through examples of these scenarios in the following pages.
