<commit_before>include ../../../_includes/_util-fns

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

.callout.is-helpful
  header Don't want JavaScript?
  :marked
    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.

.l-main-section
:marked
  ## See It Run!

  Running the [live example](/resources/live-examples/quickstart/js/plnkr.html)
  is the quickest way to see an Angular 2 app come to life.
  
  Clicking that link fires up a browser, loads the sample in [plunker](http://plnkr.co/ "Plunker"),
  and displays a simple message:

figure.image-display
  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:marked
  Here is the file structure:

code-example(format="").
  angular2-quickstart
  ├─ app
  │   ├── app.component.js
  │   └── boot.js
  ├─ index.htm  
  └─ license.md
:marked
  Functionally, it's an `index.html` and two JavaScript files in an `app/` folder.
  We can handle that!
  
  Of course we won't build  many apps that only run in plunker. 
  Let's follow a process that's closer to what we'd do in real life.
  
  1. Set up our development environment
  1. Write the Angular root component for our app
  1. Bootstrap it to take control of the main web page
  1. Write the main page (`index.html`)
  
.l-sub-section
  :marked
    We really can build the QuickStart from scratch in five minutes 
    if we follow the instructions and ignore the commentary.
    
    Most of us will be interested in the "why" as well as the "how" and that will take longer.
:marked

.l-main-section
:marked
  ## Development Environment
  
  We'll need a place to stand (the application project folder), some libraries, 
  some TypeScript configuration and the TypeScript-aware editor of your choice.

  ### Create a new project folder
  
code-example(format="").
  mkdir angular2-quickstart
  cd    angular2-quickstart
:marked
  ### Add the libraries we need
  
  We recommend the **npm** package manager for acquiring and managing our development libraries.

.l-sub-section
  :marked
    Don't have npm?
    [Get it now](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
    because we're going to use it now and repeatedly throughout this documentation.
:marked
  Add a **package.json** file to the project folder and copy/paste the following:
+makeJson('quickstart/js/package.1.json', null, 'package.json')(format=".")  

.l-sub-section
  :marked
    Itching to know the details? We explain in the [appendix below](#package-json)  
:marked
  Install these packages by opening a terminal window (command window in Windows) and
  running this npm command.
code-example(format="").
  npm install
:marked
.l-sub-section
  :marked
    Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install. 
    Ignore them. The install will succeed. See the [appendix below](#npm-errors) for more information.

.l-main-section
:marked
  ## Our First Angular Component
  
  The *Component* is the most fundamental of Angular concepts. 
  A component manages a view - a piece of the web page where we display information
  to the user and respond to user feedback.
  
  Technically, a component is a class that controls a view template.
  We'll write a lot of them as we build Angular apps. This is our first attempt
  so we'll keep it ridiculously simple.
  
  ### Create an application source sub-folder
  
  We like to keep our application code in a sub-folder off the root called `app/`.
  Execute the following command in the console window.
code-example(format="").
  mkdir app
  cd    app
:marked
  ### Add the component file
  Now add a file named **app.component.js** and paste the following lines:
+makeExample('quickstart/js/app/app.component.js', null, 'app/app.component.js')(format=".")
:marked
  We're creating a visual component named **`AppComponent`** by chaining the
  `Component` and `Class` methods that belong to the **global Angular core namespace, `ng.core`**.
  
+makeExample('quickstart/js/app/app.component.js', 'ng-namespace-funcs', 'app/component.js (Angular 2 methods)')(format=".")
  
:marked
  The **`Component`** method takes a configuration object with two
  properties. 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.
  
  Let's review this file in detail.

  ### Modules
  Angular apps are modular. They consist of many files each dedicated to a purpose.
  ES5 JavaScript doesn't have modules, but we don't want to pollute the global namespace.
  
  So we'll surround the code in a simple IIFE ("Immediately Invoked Function Execution").
  It receives our `app` 'namespace' object as argument. 
  We call our IIFE with `window.app` if it exists - and if it doesn't we 
  initialize it as an empty object.
  
+makeExample('quickstart/js/app/app.component.js', 'iife', 'app/component.js (IIFE)')(format=".")
  
:marked
  Most application files *export* one thing into our faux-pas 'namespace', such as a component.
  Our `app.component.js` file exports the `AppComponent`.
  
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/component.js (export)')(format=".")
  
:marked
  A more sophisticated application would have child components that descended from
  `AppComponent` in a visual tree. 
  A more sophisticated app would have more files and modules, at least as many as it had components.
  
  Quickstart isn't sophisticated; one component is all we need.
  Yet modules play a fundamental organizational role in even this small app.
  
  Modules rely on other modules. In JavaScript Angular apps, when we need something
  provided by another module, we get it from the `app` object. 
  When another module needs to refer to `AppComponent`, it gets it from the `app.AppComponent` like this:
    
+makeExample('quickstart/js/app/boot.js', 'import','app/boot.js (import)')(format=".")

:marked
  Angular is also modular. It is a collection of library modules. 
  Each library is itself a module made up of several, related feature modules.
  
  When we need something from Angular, we use the `ng` object.
  
:marked
  ### The Class definition object
  At the bottom of the file is an empty, do-nothing class definition object for 
  our `AppComponent` class.
  When we're ready to build a substantive application, <commit_msg>chore(quickstart): correct IIFE definition and tab names for app.component.js<commit_after>include ../../../_includes/_util-fns

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

.callout.is-helpful
  header Don't want JavaScript?
  :marked
    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.

.l-main-section
:marked
  ## See It Run!

  Running the [live example](/resources/live-examples/quickstart/js/plnkr.html)
  is the quickest way to see an Angular 2 app come to life.
  
  Clicking that link fires up a browser, loads the sample in [plunker](http://plnkr.co/ "Plunker"),
  and displays a simple message:

figure.image-display
  img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of quickstart app")
:marked
  Here is the file structure:

.filetree
  .file angular2-quickstart
  .children
    .file app
    .children
      .file app.component.js
      .file boot.js
    .file index.htm
    .file license.md
:marked
  Functionally, it's an `index.html` and two JavaScript files in an `app/` folder.
  We can handle that!
  
  Of course we won't build  many apps that only run in plunker. 
  Let's follow a process that's closer to what we'd do in real life.
  
  1. Set up our development environment
  1. Write the Angular root component for our app
  1. Bootstrap it to take control of the main web page
  1. Write the main page (`index.html`)
  
.l-sub-section
  :marked
    We really can build the QuickStart from scratch in five minutes 
    if we follow the instructions and ignore the commentary.
    
    Most of us will be interested in the "why" as well as the "how" and that will take longer.
:marked

.l-main-section
:marked
  ## Development Environment
  
  We'll need a place to stand (the application project folder), some libraries, 
  some TypeScript configuration and the TypeScript-aware editor of your choice.

  ### Create a new project folder
  
code-example(format="").
  mkdir angular2-quickstart
  cd    angular2-quickstart
:marked
  ### Add the libraries we need
  
  We recommend the **npm** package manager for acquiring and managing our development libraries.

.l-sub-section
  :marked
    Don't have npm?
    [Get it now](https://docs.npmjs.com/getting-started/installing-node "Installing Node.js and updating npm")
    because we're going to use it now and repeatedly throughout this documentation.
:marked
  Add a **package.json** file to the project folder and copy/paste the following:
+makeJson('quickstart/js/package.1.json', null, 'package.json')(format=".")  

.l-sub-section
  :marked
    Itching to know the details? We explain in the [appendix below](#package-json)  
:marked
  Install these packages by opening a terminal window (command window in Windows) and
  running this npm command.
code-example(format="").
  npm install
:marked
.l-sub-section
  :marked
    Scary <span style="color:red; font-weight: bold">error messages in red</span> may appear **during** install. 
    Ignore them. The install will succeed. See the [appendix below](#npm-errors) for more information.

.l-main-section
:marked
  ## Our First Angular Component
  
  The *Component* is the most fundamental of Angular concepts. 
  A component manages a view - a piece of the web page where we display information
  to the user and respond to user feedback.
  
  Technically, a component is a class that controls a view template.
  We'll write a lot of them as we build Angular apps. This is our first attempt
  so we'll keep it ridiculously simple.
  
  ### Create an application source sub-folder
  
  We like to keep our application code in a sub-folder off the root called `app/`.
  Execute the following command in the console window.
code-example(format="").
  mkdir app
  cd    app
:marked
  ### Add the component file
  Now add a file named **app.component.js** and paste the following lines:
+makeExample('quickstart/js/app/app.component.js', null, 'app/app.component.js')(format=".")
:marked
  We're creating a visual component named **`AppComponent`** by chaining the
  `Component` and `Class` methods that belong to the **global Angular core namespace, `ng.core`**.
  
+makeExample('quickstart/js/app/app.component.js', 'ng-namespace-funcs', 'app/app.component.js ' +
'(Angular 2 methods)')(format=".")
  
:marked
  The **`Component`** method takes a configuration object with two
  properties. 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.
  
  Let's review this file in detail.

  ### Modules
  Angular apps are modular. They consist of many files each dedicated to a purpose.
  ES5 JavaScript doesn't have modules, but we don't want to pollute the global namespace.
  
  So we'll surround the code in a simple IIFE ("Immediately Invoked Function Expression").
  It receives our `app` 'namespace' object as argument. 
  We call our IIFE with `window.app` if it exists - and if it doesn't we 
  initialize it as an empty object.
  
+makeExample('quickstart/js/app/app.component.js', 'iife', 'app/app.component.js (IIFE)')(format=".")
  
:marked
  Most application files *export* one thing into our faux-pas 'namespace', such as a component.
  Our `app.component.js` file exports the `AppComponent`.
  
+makeExample('quickstart/js/app/app.component.js', 'export', 'app/app.component.js (export)')(format=".")
  
:marked
  A more sophisticated application would have child components that descended from
  `AppComponent` in a visual tree. 
  A more sophisticated app would have more files and modules, at least as many as it had components.
  
  Quickstart isn't sophisticated; one component is all we need.
  Yet modules play a fundamental organizational role in even this small app.
  
  Modules rely on other modules. In JavaScript Angular apps, when we need something
  provided by another module, we get it from the `app` object. 
  When another module needs to refer to `AppComponent`, it gets it from the `app.AppComponent` like this:
    
+makeExample('quickstart/js/app/boot.js', 'import','app/boot.js (import)')(format=".")

:marked
  Angular is also modular. It is a collection of library modules. 
  Each library is itself a module made up of several, related feature modules.
  
  When we need something from Angular, we use the `ng` object.
  
:marked
  ### The Class definition object
  At the bottom of the file is an empty, do-nothing class definition object for 
  our `AppComponent` class.
  When we're ready to build a substantive application, 
{'fraction_non_alphanumeric': 0.08656292084393237, 'fraction_numerical': 0.001945234176268143, 'mean_word_length': 3.690175438596491, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6020588', 'n_tokens_mistral': 3903, 'n_tokens_neox': 3681, 'n_words': 1723}