796 lines
32 KiB
Plaintext
796 lines
32 KiB
Plaintext
include ../_util-fns
|
||
a(id="top")
|
||
:marked
|
||
There are many conceptual and syntactical differences between Angular 1 and Angular 2.
|
||
This chapter provides a quick reference guide to some of the common Angular 1
|
||
syntax and its equivalent in Angular 2.
|
||
|
||
:marked
|
||
**See the Angular 2 syntax in this [live example](/resources/live-examples/cb-a1-a2-quick-reference/ts/plnkr.html)**.
|
||
|
||
## Contents
|
||
This chapter 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 2
|
||
|
||
* [Controllers/Components](#controllers-components) - *controllers* are *components* in Angular 2.
|
||
Also covers modules.
|
||
|
||
* [Style Sheets](#style-sheets) - more options for CSS in Angular 2.
|
||
|
||
* [String date pipe](#string-dates) - a tip for displaying string date values.
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Template Basics
|
||
Templates are the user-facing part of an Angular application and are written in HTML.
|
||
The following are some of the key Angular 1 template features with the equivalent
|
||
template syntax in Angular 2.
|
||
|
||
- var top="vertical-align:top"
|
||
table(width="100%")
|
||
col(width="50%")
|
||
col(width="50%")
|
||
tr
|
||
th Angular 1
|
||
th Angular 2
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Bindings/Interpolation
|
||
code-example.
|
||
Your favorite hero is: {{vm.favoriteHero}}
|
||
:marked
|
||
In Angular 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`) because we
|
||
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 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 [Template Syntax](../guide/template-syntax.html#interpolation).
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Filters
|
||
code-example.
|
||
<td>{{movie.title | uppercase}}</td>
|
||
:marked
|
||
To filter output in our templates in Angular 1, we use the pipe character (|) and one or more filters.
|
||
|
||
In this example, we filter the `title` property to uppercase.
|
||
td
|
||
:marked
|
||
### Pipes
|
||
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'uppercase')(format="." )
|
||
:marked
|
||
In Angular 2, we use similar syntax with the pipe (|) character to filter output, but now we call them **pipes**.
|
||
Many (but not all) of the built-in filters from Angular 1 are
|
||
built-in pipes in Angular 2.
|
||
|
||
See the heading [Filters / Pipes](#Pipes) below for more information.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Local variables
|
||
code-example(format="").
|
||
<tr ng-repeat="movie in vm.movies">
|
||
<td>{{movie.title}}</td>
|
||
</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
|
||
In Angular 2, we have true template input variables that are explicitly defined using the `let` keyword.
|
||
|
||
For more information see [ngFor micro-syntax](../guide/template-syntax.html#ngForMicrosyntax).
|
||
:marked
|
||
[Back to top](#top)
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Template Directives
|
||
Angular 1 provides over seventy built-in directives for use in our templates.
|
||
Many of them are no longer needed in Angular 2 because of its more capable and expressive binding system.
|
||
The following are some of the key Angular 1 built-in directives and the equivalent feature in Angular 2.
|
||
|
||
table(width="100%")
|
||
col(width="50%")
|
||
col(width="50%")
|
||
tr
|
||
th Angular 1
|
||
th Angular 2
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### ng-app
|
||
code-example.
|
||
<body ng-app="movieHunter">
|
||
:marked
|
||
The application startup process is called **bootstrapping**.
|
||
|
||
Although we can bootstrap an Angular 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')(format="." )
|
||
:marked
|
||
Angular 2 does not have a bootstrap directive.
|
||
We always launch the app in code by explicitly calling a bootstrap function
|
||
and passing it the name of the application's module (`AppComponent`).
|
||
|
||
For more information see [Quick Start](../quickstart.html).
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### ng-class
|
||
code-example(format="").
|
||
<div ng-class="{active: isActive}">
|
||
<div ng-class="{active: isActive,
|
||
shazam: isImportant}">
|
||
:marked
|
||
In Angular 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.
|
||
|
||
We 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 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.
|
||
|
||
We can specify multiple classes as shown in the second example.
|
||
|
||
Angular 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 [Template Syntax](../guide/template-syntax.html#other-bindings).
|
||
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### ng-click
|
||
code-example(format="").
|
||
<button ng-click="vm.toggleImage()">
|
||
<button ng-click="vm.toggleImage($event)">
|
||
:marked
|
||
In Angular 1, the `ng-click` directive allows us to specify custom behavior when an element is clicked.
|
||
|
||
In the first example, when the button is clicked, 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
|
||
The Angular 1 event-based directives do not exist in Angular 2.
|
||
Rather, we define one-way binding from the template view to the component using **event binding**.
|
||
|
||
For event binding, we define the name of the target event within parenthesis and
|
||
specify a template statement in quotes to the right of the equals. Angular 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 the button is clicked, 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 [Template Syntax](../guide/template-syntax.html#event-binding).
|
||
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### ng-controller
|
||
code-example(format="").
|
||
<div ng-controller="MovieListCtrl as vm">
|
||
:marked
|
||
In Angular 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 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 1, the `ng-hide` directive shows or hides the associated HTML element based on
|
||
an expression. See [ng-show](#ng-show) for more information.
|
||
td
|
||
:marked
|
||
### bind to the `hidden` property
|
||
In Angular 2, we use property binding; there is no built-in *hide* directive.
|
||
See [ng-show](#ng-show) for more information.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### ng-href
|
||
code-example(format="").
|
||
<a ng-href="angularDocsUrl">Angular Docs</a>
|
||
:marked
|
||
The `ng-href` directive allows Angular 1 to preprocess the `href` property so it
|
||
can replace the binding expression with the appropriate URL before the browser
|
||
fetches from that URL.
|
||
|
||
In Angular 1, the `ng-href` is often used to activate a route as part of navigation.
|
||
code-example(format="").
|
||
<a ng-href="#movies">Movies</a>
|
||
:marked
|
||
Routing is handled differently in Angular 2.
|
||
td
|
||
:marked
|
||
### bind to the `href` property
|
||
+makeExample('cb-a1-a2-quick-reference/ts/app/app.component.html', 'href')(format="." )
|
||
:marked
|
||
In Angular 2, we use property binding; there is no built-in *href* directive.
|
||
We 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 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="").
|
||
<table ng-if="movies.length">
|
||
:marked
|
||
In Angular 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 2 works the same as the `ng-if` directive in Angular 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="").
|
||
<input ng-model="vm.favoriteHero"/>
|
||
:marked
|
||
In Angular 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 changes made to the value in the view is synchronized with the model and
|
||
any changes to the model are 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 2, **two-way binding** is denoted with [()], descriptively referred to as a "banana in a box".
|
||
This syntax is a short-cut for defining both property binding (from the component to the view)
|
||
and event binding (from the view to the component), thereby giving us 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="").
|
||
<tr ng-repeat="movie in vm.movies">
|
||
:marked
|
||
In Angular 1, the `ng-repeat` directive repeats the associated DOM element
|
||
for each item from the specified collection.
|
||
|
||
In this example, the table row (`tr`) element is repeated 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 2 is similar to the `ng-repeat` directive in Angular 1.
|
||
It repeats the associated DOM element for each item from 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="").
|
||
<h3 ng-show="vm.favoriteHero">
|
||
Your favorite hero is: {{vm.favoriteHero}}
|
||
</h3>
|
||
:marked
|
||
In Angular 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
|
||
In Angular 2, we use property binding; there is no built-in *show* directive.
|
||
For hiding and showing elements, we 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="").
|
||
<img ng-src="{{movie.imageurl}}">
|
||
:marked
|
||
The `ng-src` directive allows Angular 1 to preprocess the `src` property so 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
|
||
In Angular 2, we use property binding; there is no built-in *src* directive.
|
||
We 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="").
|
||
<div ng-style="{color: colorPreference}">
|
||
:marked
|
||
In Angular 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 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 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="").
|
||
<div ng-switch="vm.favoriteHero &&
|
||
vm.checkMovieHero(vm.favoriteHero)">
|
||
<div ng-switch-when="true">
|
||
Excellent choice!
|
||
</div>
|
||
<div ng-switch-when="false">
|
||
No movie, sorry!
|
||
</div>
|
||
<div ng-switch-default>
|
||
Please enter your favorite hero.
|
||
</div>
|
||
</div>
|
||
:marked
|
||
In Angular 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 the `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 2, the `ngSwitch` directive works similarly.
|
||
It displays an element whose `*ngSwitchWhen` matches the current `ngSwitch` expression value.
|
||
|
||
In this example, if `favoriteHero` is not set, the `ngSwitch` value is `null`
|
||
and we see the `*ngSwitchDefault` paragraph, "Please enter ...".
|
||
If the `favoriteHero` is set, it checks the movie hero by calling a component method.
|
||
If that method returns `true`, we see "Excellent choice!".
|
||
If that methods returns `false`, we see "No movie, sorry!".
|
||
|
||
The (*) before `ngSwitchWhen` 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 2 **pipes** provide formatting and transformation for data in our template, similar to Angular 1 **filters**.
|
||
Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2.
|
||
For more information on pipes see [Pipes](../guide/pipes.html).
|
||
|
||
table(width="100%")
|
||
col(width="50%")
|
||
col(width="50%")
|
||
tr
|
||
th Angular 1
|
||
th Angular 2
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### currency
|
||
code-example.
|
||
<td>{{movie.price | currency}}</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 2 `currency` pipe is similar although some of the parameters have changed.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### date
|
||
code-example.
|
||
<td>{{movie.releaseDate | date}}</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 2 `date` pipe is similar. See [note](#string-dates) about string date values.
|
||
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### filter
|
||
code-example.
|
||
<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
|
||
There is no comparable pipe in Angular 2 for performance reasons.
|
||
Filtering should be coded in the component.
|
||
Consider building a custom pipe if the same filtering code
|
||
will be reused in several templates.
|
||
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### json
|
||
code-example.
|
||
<pre>{{movie | json}}</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 2 `json` pipe does the same thing.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### limitTo
|
||
code-example.
|
||
<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, performance may improve if we code this operation within the component instead.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### lowercase
|
||
code-example.
|
||
<div>{{movie.title | lowercase}}</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 2 `lowercase` pipe does the same thing.
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### number
|
||
code-example.
|
||
<td>{{movie.starRating | number}}</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 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.
|
||
<tr ng-repeat="movie in movieList | orderBy : 'title'">
|
||
:marked
|
||
Orders the collection as specified by the expression.
|
||
In this example, the movieList is ordered by the movie title.
|
||
td
|
||
:marked
|
||
### none
|
||
There is no comparable pipe in Angular 2 for performance reasons.
|
||
Ordering/sorting the results should be coded in the component.
|
||
Consider building a custom pipe if the same ordering/sorting code
|
||
will be reused in several templates.
|
||
:marked
|
||
[Back to top](#top)
|
||
|
||
a(id="controllers-components")
|
||
.l-main-section
|
||
:marked
|
||
## Controllers / Components
|
||
In Angular 1, we write the code that provides the model and the methods for the view in a **controller**.
|
||
In Angular 2, we build a **component**.
|
||
|
||
Because much of our Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column.
|
||
The Angular 2 code is shown using TypeScript.
|
||
|
||
table(width="100%")
|
||
col(width="50%")
|
||
col(width="50%")
|
||
tr
|
||
th Angular 1
|
||
th Angular 2
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### IIFE
|
||
code-example.
|
||
(function () {
|
||
...
|
||
}());
|
||
:marked
|
||
In Angular 1, we often defined an immediately invoked function expression (or IIFE) around our controller code.
|
||
This kept our controller code out of the global namespace.
|
||
td
|
||
:marked
|
||
### none
|
||
We don't need to worry about this in Angular 2 because we use ES 2015 modules
|
||
and modules handle the namespacing for us.
|
||
|
||
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 1, we define an Angular module, which keeps track of our
|
||
controllers, services, and other code. The second argument defines the list
|
||
of other modules that this module depends upon.
|
||
td
|
||
:marked
|
||
### import
|
||
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'import')(format=".")
|
||
:marked
|
||
Angular 2 does not have its own module system. Instead we use ES 2015 modules.
|
||
ES 2015 modules are file based, so each code file is its own module.
|
||
|
||
We `import` what we need from the module files.
|
||
|
||
For more information on modules see [Architecture Overview](../guide/architecture.html#module).
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Controller registration
|
||
code-example.
|
||
angular
|
||
.module("movieHunter")
|
||
.controller("MovieListCtrl",
|
||
["movieService",
|
||
MovieListCtrl]);
|
||
:marked
|
||
In Angular 1, we have 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
|
||
In Angular 2, we add 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 we associate a template with code, which is defined in the component class.
|
||
|
||
For more information on components see [Architecture Overview](../guide/architecture.html#component).
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Controller function
|
||
code-example.
|
||
function MovieListCtrl(movieService) {
|
||
}
|
||
:marked
|
||
In Angular 1, we 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 2, we create a component class.
|
||
|
||
NOTE: If you are using TypeScript with Angular 1 then the only difference here is
|
||
that the component class must be exported using the `export` keyword.
|
||
|
||
For more information on components see [Architecture Overview](../guide/architecture.html#component).
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Dependency injection
|
||
code-example.
|
||
MovieListCtrl.$inject = ['MovieService'];
|
||
function MovieListCtrl(movieService) {
|
||
}
|
||
:marked
|
||
In Angular 1, we pass in any dependencies as controller function arguments.
|
||
In this example, we inject a `MovieService`.
|
||
|
||
We also guard against minification problems by telling 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 2, we pass in dependencies as arguments to the component class constructor.
|
||
In this example, we inject a `MovieService`.
|
||
The first parameter's TypeScript type tells Angular what to inject even after minification.
|
||
|
||
For more information on dependency injection see [Architecture Overview](../guide/architecture.html#dependency-injection).
|
||
:marked
|
||
[Back to top](#top)
|
||
|
||
a(id="style-sheets")
|
||
.l-main-section
|
||
:marked
|
||
## Style Sheets
|
||
Style sheets give our application a nice look.
|
||
In Angular 1, we specify the style sheets for our entire application.
|
||
As the application grows over time, the styles for the many parts of the application
|
||
are merged, which can cause unexpected results.
|
||
In Angular 2, we can still define style sheets for our entire application. But now we can
|
||
also encapculate a style sheet within a specific component.
|
||
table(width="100%")
|
||
col(width="50%")
|
||
col(width="50%")
|
||
tr
|
||
th Angular 1
|
||
th Angular 2
|
||
tr(style=top)
|
||
td
|
||
:marked
|
||
### Link tag
|
||
code-example.
|
||
<link href="styles.css" rel="stylesheet" />
|
||
:marked
|
||
In Angular 1, we use a `link` tag in the head section of our `index.html` file
|
||
to define the styles for our application.
|
||
td
|
||
:marked
|
||
### Link tag
|
||
+makeExample('cb-a1-a2-quick-reference/ts/index.html', 'style')(format=".")
|
||
:marked
|
||
In Angular 2, we can continue to use the link tag to define the styles for our application in the `index.html` file.
|
||
But we can now also encapsulate styles for our components.
|
||
:marked
|
||
### StyleUrls
|
||
In Angular 2, we 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 us to set appropriate styles for individual components that won’t leak into
|
||
other parts of the application.
|
||
:marked
|
||
[Back to top](#top)
|
||
|
||
a(id="string-dates")
|
||
.l-main-section
|
||
:marked
|
||
## Appendix: String dates
|
||
|
||
Currently the Angular 2 `date` pipe does not process string dates such as
|
||
"2015-12-19T00:00:00".
|
||
|
||
As a work around, subclass the Angular `DatePipe` with a version that can convert strings
|
||
and substitute that pipe in the HTML:
|
||
|
||
+makeExample('cb-a1-a2-quick-reference/ts/app/date.pipe.ts', 'date-pipe', 'date.pipe.ts')(format=".")
|
||
:marked
|
||
Then import and declare that pipe in the `@Component` metadata `pipes` array:
|
||
:marked
|
||
+makeExample('cb-a1-a2-quick-reference/ts/app/movie-list.component.ts', 'date-pipe')(format=".")
|
||
|
||
:marked
|
||
[Back to top](#top)
|