` element is shown if the `favoriteHero` variable is truthy.
td
:marked
- ### bind to the `hidden` property
+ ### Bind to the `hidden` property
+makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.html', 'hidden')(format="." )
:marked
- Angular, uses property binding; there is no built-in *show* directive.
+ Angular 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.
+ In this example, the `
` 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).
+ For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding)
+ section of the [Template Syntax](../guide/template-syntax.html) page.
tr(style=top)
td
:marked
@@ -377,13 +388,14 @@ table(width="100%")
fetches from that URL.
td
:marked
- ### bind to the `src` property
+ ### Bind to the `src` property
+makeExample('cb-ajs-quick-reference/ts/src/app/app.component.html', 'src')(format="." )
:marked
- Angular, uses property binding; there is no built-in *src* directive.
+ Angular 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).
+ For more information on property binding, see the [Property binding](../guide/template-syntax.html#property-binding)
+ section of the [Template Syntax](../guide/template-syntax.html) page.
tr(style=top)
td
:marked
@@ -393,7 +405,7 @@ table(width="100%")
:marked
In AngularJS, 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
+ key of the object defined as a CSS property, 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.
@@ -408,9 +420,11 @@ table(width="100%")
Angular 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 style binding, see the [Style binding](../guide/template-syntax.html#style-binding) section of the
+ [Template Syntax](../guide/template-syntax.html) page.
- For more information on the ngStyle directive, see [Template Syntax](../guide/template-syntax.html#ngStyle).
+ For more information on the `ngStyle` directive, see [NgStyle](../guide/template-syntax.html#ngStyle)
+ section of the [Template Syntax](../guide/template-syntax.html) page.
tr(style=top)
td
:marked
@@ -452,7 +466,8 @@ table(width="100%")
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).
+ For more information, see [The NgSwitch directives](../guide/template-syntax.html#ngSwitch)
+ section of the [Template Syntax](../guide/template-syntax.html) page.
:marked
[Back to top](#top)
@@ -460,7 +475,7 @@ a(id="filters-pipes")
.l-main-section
:marked
## Filters/pipes
- Angular **pipes** provide formatting and transformation for data in our template, similar to AngularJS **filters**.
+ Angular **pipes** provide formatting and transformation for data in the template, similar to AngularJS **filters**.
Many of the built-in filters in AngularJS have corresponding pipes in Angular.
For more information on pipes, see [Pipes](../guide/pipes.html).
@@ -477,7 +492,7 @@ table(width="100%")
code-example.
<td>{{movie.price | currency}}</td>
:marked
- Formats a number as a currency.
+ Formats a number as currency.
td
:marked
### currency
@@ -622,15 +637,17 @@ table(width="100%")
...
}());
:marked
- In AngularJS, you often defined an immediately invoked function expression (or IIFE) around your controller code.
- This kept your controller code out of the global namespace.
+ In AngularJS, an immediately invoked function expression (or IIFE) around controller code
+ keeps it out of the global namespace.
+
td
:marked
### none
- You don't need to worry about this in Angular because you use ES 2015 modules
- and modules handle the namespacing for you.
+ This is a nonissue in Angular because ES 2015 modules
+ handle the namespacing for you.
- For more information on modules, see [Architecture Overview](../guide/architecture.html#module).
+ For more information on modules, see the [Modules](../guide/architecture.html#modules) section of the
+ [Architecture Overview](../guide/architecture.html).
tr(style=top)
td
:marked
@@ -638,7 +655,8 @@ table(width="100%")
code-example.
angular.module("movieHunter", ["ngRoute"]);
:marked
- In AngularJS, 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.
+ In AngularJS, 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
@@ -648,7 +666,7 @@ table(width="100%")
- `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).
+ For more information on modules, see [Angular Modules (NgModule)](../guide/ngmodule.html).
tr(style=top)
td
:marked
@@ -660,23 +678,24 @@ table(width="100%")
["movieService",
MovieListCtrl]);
:marked
- AngularJS, has code in each controller that looks up an appropriate Angular module
+ AngularJS 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
+ ### Component decorator
+makeExample('cb-ajs-quick-reference/ts/src/app/movie-list.component.ts', 'component')(format=".")
:marked
- Angular, 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
+ Angular 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.
+ This is how you associate a template with logic, which is defined in the component class.
- For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
+ For more information, see the [Components](../guide/architecture.html#components)
+ section of the [Architecture Overview](../guide/architecture.html) page.
tr(style=top)
td
:marked
@@ -695,7 +714,8 @@ table(width="100%")
NOTE: If you are using TypeScript with AngularJS, 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.
+ For more information, see the [Components](../guide/architecture.html#components)
+ section of the [Architecture Overview](../guide/architecture.html) page.
tr(style=top)
td
:marked
@@ -719,7 +739,8 @@ table(width="100%")
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.
+ For more information, see the [Dependency injection](../guide/architecture.html#dependency-injection)
+ section of the [Architecture Overview](../guide/architecture.html).
:marked
[Back to top](#top)