a1-a2-quick-reference.jade

include ../_util-fns
a(id="top")
:marked
  There are many conceptual and syntactical differences between Angular 1 and Angular 2.
  This page provides a quick guide to some common Angular 1
  syntax and its equivalent in Angular 2.

:marked
  **See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**.

  ## Contents
  This page covers:
  * [Template basics](#template-basics) - binding and local variables.

  * [Template directives](#template-directives) - built-in directives `ngIf` and `ngClass`.

  * [Filters/pipes](#filters-pipes) - built-in *filters*, known as *pipes* in Angular&nbsp;2.

  * [Modules/controllers/components](#controllers-components) - *modules* in Angular&nbsp;2 are slightly different from *modules* in Angular&nbsp;1, and *controllers* are *components* in Angular&nbsp;2.

  * [Style sheets](#style-sheets) - more options for CSS than in Angular&nbsp;1.

.l-main-section
:marked
  ## Template basics
  Templates are the user-facing part of an Angular application and are written in HTML.
  The following table lists some of the key Angular&nbsp;1 template features with their equivalent Angular&nbsp;2 template syntax.

- var top="vertical-align:top"
table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th Angular&nbsp;1
    th Angular&nbsp;2
  tr(style=top)
    td
      :marked
        ### Bindings/interpolation
      code-example.
         Your favorite hero is: {{vm.favoriteHero}}
      :marked
        In Angular&nbsp;1, an expression in curly braces denotes one-way binding.
        This binds the value of the element to a property in the controller
        associated with this template.

        When using the `controller as` syntax,
        the binding is prefixed with the controller alias (`vm` or `$ctrl`) because you
        have to be specific about the source of the binding.
    td
      :marked
        ### Bindings/interpolation
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'interpolation')(format="." )
      :marked
        In Angular&nbsp;2, a template expression in curly braces still denotes one-way binding.
        This binds the value of the element to a property of the component.
        The context of the binding is implied and is always the
        associated component, so it needs no reference variable.

        For more information, see the [Interpolation](../guide/template-syntax.html#interpolation) section of the Template Syntax page.
  tr(style=top)
    td
      :marked
        ### Filters
      code-example.
         &lt;td>{{movie.title | uppercase}}&lt;/td>
      :marked
        To filter output in Angular&nbsp;1 templates, use the pipe character (|) and one or more filters.

        This example filters the `title` property to uppercase.
    td
      :marked
        ### Pipes
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'uppercase')(format="." )
      :marked
        In Angular&nbsp;2 you use similar syntax with the pipe (|) character to filter output, but now you call them **pipes**.
        Many (but not all) of the built-in filters from Angular&nbsp;1 are
        built-in pipes in Angular&nbsp;2.

        For more information, see the heading [Filters/pipes](#filters-pipes) below.
  tr(style=top)
    td
      :marked
        ### Local variables
      code-example(format="").
        &lt;tr ng-repeat="movie in vm.movies">
          &lt;td>{{movie.title}}&lt;/td>
        &lt;/tr>
      :marked
        Here, `movie` is a user-defined local variable.
    td
      :marked
        ### Input variables
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'local')(format="." )
      :marked
        Angular&nbsp;2 has true template input variables that are explicitly defined using the `let` keyword.

        For more information, see the [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax) section of the Template Syntax page.
:marked
  [Back to top](#top)

.l-main-section
:marked
  ## Template directives
  Angular&nbsp;1 provides more than seventy built-in directives for templates.
  Many of them aren't needed in Angular&nbsp;2 because of its more capable and expressive binding system.
  The following are some of the key Angular&nbsp;1 built-in directives and their equivalents in Angular&nbsp;2.

table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th Angular&nbsp;1
    th Angular&nbsp;2
  tr(style=top)
    td
      :marked
        ### ng-app
      code-example.
        &lt;body ng-app="movieHunter">
      :marked
        The application startup process is called **bootstrapping**.

        Although you can bootstrap an Angular&nbsp;1 app in code,
        many applications bootstrap declaratively with the `ng-app` directive,
        giving it the name of the application's module (`movieHunter`).
    td
      :marked
        ### Bootstrapping
      +makeExample('cb-a1-a2-quick-reference/ts/app/main.ts','','main.ts')(format="." )
      <br>
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts','','app.module.ts')(format="." )

      :marked
        Angular&nbsp;2 doesn't have a bootstrap directive.
        To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
        in `main.ts`
        and the application's root component (`AppComponent`) in `app.module.ts`.

        For more information see the [Setup](../guide/setup.html) page.
  tr(style=top)
    td
      :marked
        ### ng-class
      code-example(format="").
        &lt;div ng-class="{active: isActive}">
        &lt;div ng-class="{active: isActive,
                           shazam: isImportant}">
      :marked
        In Angular&nbsp;1, the `ng-class` directive includes/excludes CSS classes
        based on an expression. That expression is often a key-value control object with each
        key of the object defined as a CSS class name, and each value defined as a template expression
        that evaluates to a Boolean value.

        In the first example, the `active` class is applied to the element if `isActive` is true.

        You can specify multiple classes, as shown in the second example.
    td
      :marked
        ### ngClass
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngClass')(format="." )
      :marked
        In Angular&nbsp;2, the `ngClass` directive works similarly.
        It includes/excludes CSS classes based on an expression.

        In the first example, the `active` class is applied to the element if `isActive` is true.

        You can specify multiple classes, as shown in the second example.

        Angular&nbsp;2 also has **class binding**, which is a good way to add or remove a single class,
        as shown in the third example.

        For more information see the [Attribute, Class, and Style Bindings](../guide/template-syntax.html#other-bindings) section of the Template Syntax page.

  tr(style=top)
    td
      :marked
        ### ng-click
      code-example(format="").
        &lt;button ng-click="vm.toggleImage()">
        &lt;button ng-click="vm.toggleImage($event)">
      :marked
        In Angular&nbsp;1, the `ng-click` directive allows you to specify custom behavior when an element is clicked.

        In the first example, when the user clicks the button, the `toggleImage()` method in the controller referenced by the `vm` `controller as` alias is executed.

        The second example demonstrates passing in the `$event` object, which provides details about the event
        to the controller.
    td
      :marked
        ### bind to the `click` event
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'event-binding')(format="." )
      :marked
        Angular&nbsp;1 event-based directives do not exist in Angular&nbsp;2.
        Rather, define one-way binding from the template view to the component using **event binding**.

        For event binding, define the name of the target event within parenthesis and
        specify a template statement, in quotes, to the right of the equals. Angular&nbsp;2 then
        sets up an event handler for the target event. When the event is raised, the handler
        executes the template statement.

        In the first example, when a user clicks the button, the `toggleImage()` method in the associated component is executed.

        The second example demonstrates passing in the `$event` object, which provides details about the event
        to the component.

        For a list of DOM events, see: https://developer.mozilla.org/en-US/docs/Web/Events.

        For more information, see the [Event Binding](../guide/template-syntax.html#event-binding) section of the Template Syntax page.

  tr(style=top)
    td
      :marked
        ### ng-controller
      code-example(format="").
        &lt;div ng-controller="MovieListCtrl as vm">
      :marked
        In Angular&nbsp;1, the `ng-controller` directive attaches a controller to the view.
        Using the `ng-controller` (or defining the controller as part of the routing) ties the
        view to the controller code associated with that view.
    td
      :marked
        ### Component decorator
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format="." )
      :marked
        In Angular&nbsp;2, the template no longer specifies its associated controller.
        Rather, the component specifies its associated template as part of the component class decorator.

        For more information, see [Architecture Overview](../guide/architecture.html#component).

  tr(style=top)
    td
      :marked
        ### ng-hide
        In Angular&nbsp;1, the `ng-hide` directive shows or hides the associated HTML element based on
        an expression. For more information, see [ng-show](#ng-show).
    td
      :marked
        ### bind to the `hidden` property
        In Angular&nbsp;2, you use property binding; there is no built-in *hide* directive.
        For more information, see [ng-show](#ng-show).
  tr(style=top)
    td
      :marked
        ### ng-href
      code-example(format="").
        &lt;a ng-href="angularDocsUrl">Angular Docs&lt;/a>
      :marked
        The `ng-href` directive allows Angular&nbsp;1 to preprocess the `href` property so that it
        can replace the binding expression with the appropriate URL before the browser
        fetches from that URL.

        In Angular&nbsp;1, the `ng-href` is often used to activate a route as part of navigation.
      code-example(format="").
        &lt;a ng-href="#movies">Movies&lt;/a>
      :marked
        Routing is handled differently in Angular&nbsp;2.
    td
      :marked
        ### bind to the `href` property
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'href')(format="." )
      :marked
        Angular&nbsp;2, uses property binding; there is no built-in *href* directive.
        Place the element's `href` property in square brackets and set it to a quoted template expression.

        For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).

        In Angular&nbsp;2, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example.
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'router-link')(format="." )
      :marked
        For more information on routing, see [Routing & Navigation](../guide/router.html#router-link).

  tr(style=top)
    td
      :marked
        ### ng-if
      code-example(format="").
        &lt;table ng-if="movies.length">
      :marked
        In Angular&nbsp;1, the `ng-if` directive removes or recreates a portion of the DOM,
        based on an expression. If the expression is false, the element is removed from the DOM.

        In this example, the `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
    td
      :marked
        ### *ngIf
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngIf')(format="." )
      :marked
        The `*ngIf` directive in Angular&nbsp;2 works the same as the `ng-if` directive in Angular&nbsp;1. It removes or recreates a portion of the DOM based on an expression.

        In this example, the `table` element is removed from the DOM unless the `movies` array has a length.

        The (*) before `ngIf` is required in this example.
        For more information, see [Structural Directives](../guide/structural-directives.html).
  tr(style=top)
    td
      :marked
        ### ng-model
      code-example(format="").
        &lt;input ng-model="vm.favoriteHero"/>
      :marked
        In Angular&nbsp;1, the `ng-model` directive binds a form control to a property in the controller associated with the template.
        This provides **two-way binding**, whereby any change made to the value in the view is synchronized with the model, and any change to the model is synchronized with the value in the view.
    td
      :marked
        ### ngModel
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngModel')(format="." )
      :marked
        In Angular&nbsp;2, **two-way binding** is denoted by `[()]`, descriptively referred to as a "banana in a box". This syntax is a shortcut for defining both property binding (from the component to the view)
        and event binding (from the view to the component), thereby providing two-way binding.

        For more information on two-way binding with ngModel, see [Template Syntax](../guide/template-syntax.html#ngModel).
  tr(style=top)
    td
      :marked
        ### ng-repeat
      code-example(format="").
        &lt;tr ng-repeat="movie in vm.movies">
      :marked
        In Angular&nbsp;1, the `ng-repeat` directive repeats the associated DOM element
        for each item in the specified collection.

        In this example, the table row (`tr`) element repeats for each movie object in the collection of movies.
    td
      :marked
        ### *ngFor
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngFor')(format="." )
      :marked
        The `*ngFor` directive in Angular&nbsp;2 is similar to the `ng-repeat` directive in Angular&nbsp;1. It repeats the associated DOM element for each item in the specified collection.
        More accurately, it turns the defined element (`tr` in this example) and its contents into a template and
        uses that template to instantiate a view for each item in the list.

        Notice the other syntax differences:
        The (*) before `ngFor` is required;
        the `let` keyword identifies `movie` as an input variable;
        the list preposition is `of`, not `in`.

        For more information, see [Structural Directives](../guide/structural-directives.html).
  tr(style=top)
    td
      :marked
        ### ng-show
      code-example(format="").
        &lt;h3 ng-show="vm.favoriteHero">
          Your favorite hero is: {{vm.favoriteHero}}
        &lt;/h3>
      :marked
        In Angular&nbsp;1, the `ng-show` directive shows or hides the associated DOM element, based on
        an expression.

        In this example, the `div` element is shown if the `favoriteHero` variable is truthy.
    td
      :marked
        ### bind to the `hidden` property
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'hidden')(format="." )
      :marked
        Angular&nbsp;2, uses property binding; there is no built-in *show* directive.
        For hiding and showing elements, bind to the HTML `hidden` property.

        To conditionally display an element, place the element's `hidden` property in square brackets and
        set it to a quoted template expression that evaluates to the *opposite* of *show*.

        In this example, the `div` element is hidden if the `favoriteHero` variable is not truthy.

        For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
  tr(style=top)
    td
      :marked
        ### ng-src
      code-example(format="").
        &lt;img ng-src="{{movie.imageurl}}">
      :marked
        The `ng-src` directive allows Angular&nbsp;1 to preprocess the `src` property so that it
        can replace the binding expression with the appropriate URL before the browser
        fetches from that URL.
    td
      :marked
        ### bind to the `src` property
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'src')(format="." )
      :marked
        Angular&nbsp;2, uses property binding; there is no built-in *src* directive.
        Place the `src` property in square brackets and set it to a quoted template expression.

        For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
  tr(style=top)
    td
      :marked
        ### ng-style
      code-example(format="").
        &lt;div ng-style="{color: colorPreference}">
      :marked
        In Angular&nbsp;1, the `ng-style` directive sets a CSS style on an HTML element
        based on an expression. That expression is often a key-value control object with each
        key of the object defined as a CSS style name, and each value defined as an expression
        that evaluates to a value appropriate for the style.

        In the example, the `color` style is set to the current value of the `colorPreference` variable.
    td
      :marked
        ### ngStyle
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'ngStyle')(format="." )
      :marked
        In Angular&nbsp;2, the `ngStyle` directive works similarly. It sets a CSS style on an HTML element based on an expression.

        In the first example, the `color` style is set to the current value of the `colorPreference` variable.

        Angular&nbsp;2 also has **style binding**, which is good way to set a single style. This is shown in the second example.

        For more information on style binding, see [Template Syntax](../guide/template-syntax.html#style-binding).

        For more information on the ngStyle directive, see [Template Syntax](../guide/template-syntax.html#ngStyle).
  tr(style=top)
    td
      :marked
        ### ng-switch
      code-example(format="").
        &lt;div ng-switch="vm.favoriteHero &&
                        vm.checkMovieHero(vm.favoriteHero)">
            &lt;div ng-switch-when="true">
              Excellent choice!
            &lt;/div>
            &lt;div ng-switch-when="false">
              No movie, sorry!
            &lt;/div>
            &lt;div ng-switch-default>
              Please enter your favorite hero.
            &lt;/div>
        &lt;/div>
      :marked
        In Angular&nbsp;1, the `ng-switch` directive swaps the contents of
        an element by selecting one of the templates based on the current value of an expression.

        In this example, if `favoriteHero` is not set, the template displays "Please enter ...".
        If `favoriteHero` is set, it checks the movie hero by calling a controller method.
        If that method returns `true`, the template displays "Excellent choice!".
        If that methods returns `false`, the template displays "No movie, sorry!".
    td
      :marked
        ### ngSwitch
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.html', 'ngSwitch')(format="." )
      :marked
        In Angular&nbsp;2, the `ngSwitch` directive works similarly.
        It displays an element whose `*ngSwitchCase` matches the current `ngSwitch` expression value.

        In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
        and `*ngSwitchDefault` displays, "Please enter ...".
        If `favoriteHero` is set, the app checks the movie hero by calling a component method.
        If that method returns `true`, the app selects `*ngSwitchCase="true"` and displays: "Excellent choice!"
        If that methods returns `false`, the app selects `*ngSwitchCase="false"` and displays: "No movie, sorry!"

        The (*) before `ngSwitchCase` and `ngSwitchDefault` is required in this example.

        For more information on the ngSwitch directive, see [Template Syntax](../guide/template-syntax.html#ngSwitch).
:marked
  [Back to top](#top)

a(id="filters-pipes")
.l-main-section
:marked
  ## Filters/pipes
  Angular&nbsp;2 **pipes** provide formatting and transformation for data in our template, similar to Angular&nbsp;1 **filters**.
  Many of the built-in filters in Angular&nbsp;1 have corresponding pipes in Angular&nbsp;2.
  For more information on pipes, see [Pipes](../guide/pipes.html).

table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th Angular&nbsp;1
    th Angular&nbsp;2
  tr(style=top)
    td
      :marked
        ### currency
      code-example.
        &lt;td>{{movie.price | currency}}&lt;/td>
      :marked
        Formats a number as a currency.
    td
      :marked
        ### currency
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'currency')(format="." )
      :marked
        The Angular&nbsp;2 `currency` pipe is similar although some of the parameters have changed.
  tr(style=top)
    td
      :marked
        ### date
      code-example.
        &lt;td>{{movie.releaseDate  | date}}&lt;/td>
      :marked
        Formats a date to a string based on the requested format.
    td
      :marked
        ### date
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'date')(format=".")
      :marked
        The Angular&nbsp;2 `date` pipe is similar.

  tr(style=top)
    td
      :marked
        ### filter
      code-example.
        &lt;tr ng-repeat="movie in movieList | filter: {title:listFilter}">
      :marked
        Selects a subset of items from the defined collection, based on the filter criteria.
    td
      :marked
        ### none
        For performance reasons, no comparable pipe exists in Angular&nbsp;2. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.

  tr(style=top)
    td
      :marked
        ### json
      code-example.
        &lt;pre>{{movie | json}}&lt;/pre>
      :marked
        Converts a JavaScript object into a JSON string. This is useful for debugging.
    td
      :marked
        ### json
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'json')(format=".")
      :marked
        The Angular&nbsp;2 `json` pipe does the same thing.
  tr(style=top)
    td
      :marked
        ### limitTo
      code-example.
        &lt;tr ng-repeat="movie in movieList | limitTo:2:0">
      :marked
        Selects up to the first parameter (2) number of items from the collection
        starting (optionally) at the beginning index (0).
    td
      :marked
        ### slice
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'slice')(format=".")
      :marked
        The `SlicePipe` does the same thing but the *order of the parameters is reversed*, in keeping
        with the JavaScript `Slice` method.
        The first parameter is the starting index; the second is the limit.
        As in Angular 1, coding this operation within the component instead could improve performance.
  tr(style=top)
    td
      :marked
        ### lowercase
      code-example.
        &lt;div>{{movie.title | lowercase}}&lt;/div>
      :marked
        Converts the string to lowercase.
    td
      :marked
        ### lowercase
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'lowercase')(format=".")
      :marked
        The Angular&nbsp;2 `lowercase` pipe does the same thing.
  tr(style=top)
    td
      :marked
        ### number
      code-example.
        &lt;td>{{movie.starRating  | number}}&lt;/td>
      :marked
        Formats a number as text.
    td
      :marked
        ### number
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'number')(format=".")
      :marked
        The Angular&nbsp;2 `number` pipe is similar.
        It provides more functionality when defining
        the decimal places, as shown in the second example above.

        Angular 2 also has a `percent` pipe, which formats a number as a local percentage
        as shown in the third example.
  tr(style=top)
    td
      :marked
        ### orderBy
      code-example.
        &lt;tr ng-repeat="movie in movieList | orderBy : 'title'">
      :marked
        Displays the collection in the order specified by the expression.
        In this example, the movie title orders the movieList.
    td
      :marked
        ### none
        For performance reasons, no comparable pipe exists in Angular&nbsp;2.
        Instead, use component code to order or sort results. If you need the same ordering or sorting code in several templates, consider building a custom pipe.

:marked
  [Back to top](#top)

a(id="controllers-components")
.l-main-section
:marked
  ## Modules/controllers/components
  In both Angular&nbsp;1 and Angular&nbsp;2, Angular modules help you organize your application into cohesive blocks of functionality.

  In Angular&nbsp;1, you write the code that provides the model and the methods for the view in a **controller**.
  In Angular&nbsp;2, you build a **component**.

  Because much Angular&nbsp;1 code is in JavaScript, JavaScript code is shown in the Angular&nbsp;1 column.
  The Angular&nbsp;2 code is shown using TypeScript.

table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th Angular&nbsp;1
    th Angular&nbsp;2
  tr(style=top)
    td
      :marked
        ### IIFE
      code-example.
        (function () {
          ...
        }());
      :marked
        In Angular&nbsp;1, you often defined an immediately invoked function expression (or IIFE) around your controller code.
        This kept your controller code out of the global namespace.
    td
      :marked
        ### none
        You don't need to worry about this in Angular&nbsp;2 because you use ES 2015 modules
        and modules handle the namespacing for you.

        For more information on modules, see [Architecture Overview](../guide/architecture.html#module).
  tr(style=top)
    td
      :marked
        ### Angular modules
      code-example.
        angular.module("movieHunter", ["ngRoute"]);
      :marked
        In Angular&nbsp;1, an Angular module keeps track of controllers, services, and other code. The second argument defines the list of other modules that this module depends upon.
    td
      :marked
        ### Angular modules
      +makeExample('cb-a1-a2-quick-reference/ts/app/app.module.1.ts')(format=".")
      :marked
        Angular&nbsp;2 modules, defined with the `NgModule` decorator, serve the same purpose:
        - `imports`: specifies the list of other modules that this module depends upon
        - `declaration`: keeps track of your components, pipes, and directives.

        For more information on modules, see [Angular Modules](../guide/ngmodule.html).
  tr(style=top)
    td
      :marked
        ### Controller registration
      code-example.
        angular
          .module("movieHunter")
          .controller("MovieListCtrl",
                      ["movieService",
                       MovieListCtrl]);
      :marked
        Angular&nbsp;1, has code in each controller that looks up an appropriate Angular module
        and registers the controller with that module.

        The first argument is the controller name. The second argument defines the string names of
        all dependencies injected into this controller, and a reference to the controller function.
    td
      :marked
        ### Component Decorator
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'component')(format=".")
      :marked
        Angular&nbsp;2, adds a decorator to the component class to provide any required metadata.
        The Component decorator declares that the class is a component and provides metadata about
        that component such as its selector (or tag) and its template.

        This is how you associate a template with code, which is defined in the component class.

        For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
  tr(style=top)
    td
      :marked
        ### Controller function
      code-example.
        function MovieListCtrl(movieService) {
        }
      :marked
        In Angular&nbsp;1, you write the code for the model and methods in a controller function.
    td
      :marked
        ### Component class
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'class')(format=".")
      :marked
        In Angular&nbsp;2, you create a component class.

        NOTE: If you are using TypeScript with Angular&nbsp;1, you must use the `export` keyword to export the component class.

        For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
  tr(style=top)
    td
      :marked
        ### Dependency injection
      code-example.
        MovieListCtrl.$inject = ['MovieService'];
        function MovieListCtrl(movieService) {
        }
      :marked
        In Angular&nbsp;1, you pass in any dependencies as controller function arguments.
        This example injects a `MovieService`.

        To guard against minification problems, tell Angular explicitly
        that it should inject an instance of the `MovieService` in the first parameter.
    td
      :marked
        ### Dependency injection
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'di')(format=".")
      :marked
        In Angular&nbsp;2, you pass in dependencies as arguments to the component class constructor.
        This example injects a `MovieService`.
        The first parameter's TypeScript type tells Angular what to inject, even after minification.

        For more information, see the [Dependency Injection](../guide/architecture.html#dependency-injection) section of the Architecture Overview.
:marked
  [Back to top](#top)

a(id="style-sheets")
.l-main-section
:marked
  ## Style sheets
  Style sheets give your application a nice look.
  In Angular&nbsp;1, you specify the style sheets for your entire application.
  As the application grows over time, the styles for the many parts of the application
  merge, which can cause unexpected results.
  In Angular&nbsp;2, you can still define style sheets for your entire application. But now you can
  also encapsulate a style sheet within a specific component.
table(width="100%")
  col(width="50%")
  col(width="50%")
  tr
    th Angular&nbsp;1
    th Angular&nbsp;2
  tr(style=top)
    td
      :marked
        ### Link tag
      code-example.
        &lt;link href="styles.css" rel="stylesheet" />
      :marked
        Angular&nbsp;1, uses a `link` tag in the head section of the `index.html` file
        to define the styles for the application.
    td
      :marked
        ### Link tag
      +makeExample('cb-a1-a2-quick-reference/ts/index.html', 'style')(format=".")
      :marked
        In Angular&nbsp;2, you can continue to use the link tag to define the styles for your application in the `index.html` file.
        But now you can also encapsulate styles for your components.
      :marked
        ### StyleUrls
        In Angular&nbsp;2, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
        a style sheet for a particular component.
      +makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'style-url')(format=".")
      :marked
        This allows you to set appropriate styles for individual components that won’t leak into
        other parts of the application.
:marked
  [Back to top](#top)