|
### ng-class
<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
In AngularJS, 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.
|
### ngClass
In Angular, 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 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#other-bindings)
section of the [Template Syntax](guide/template-syntax) page.
|
|
### ng-click
<button ng-click="vm.toggleImage()">
<button ng-click="vm.toggleImage($event)">
In AngularJS, 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.
|
### Bind to the `click` event
AngularJS event-based directives do not exist in Angular.
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 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#event-binding)
section of the [Template Syntax](guide/template-syntax) page.
|
### ng-if
<table ng-if="movies.length">
In AngularJS, 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 `` element is removed from the DOM unless the `movies` array has a length greater than zero.
### *ngIf
The `*ngIf` directive in Angular works the same as the `ng-if` directive in AngularJS. It removes
or recreates a portion of the DOM based on an expression.
In this example, the `` 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).
|
### ng-model
<input ng-model="vm.favoriteHero"/>
In AngularJS, 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.
|
### ngModel
In Angular, **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 the [NgModel—Two-way binding to
form elements with `[(ngModel)]`](../guide/template-syntax.html#ngModel)
section of the [Template Syntax](guide/template-syntax) page.
|
|
### ng-repeat
<tr ng-repeat="movie in vm.movies">
In AngularJS, the `ng-repeat` directive repeats the associated DOM element
for each item in the specified collection.
In this example, the table row (` | `) element repeats for each movie object in the collection of movies.
|
### *ngFor
The `*ngFor` directive in Angular is similar to the `ng-repeat` directive in AngularJS. It repeats
the associated DOM element for each item in the specified collection.
More accurately, it turns the defined element (` | ` 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).
|
### ng-show
<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
In AngularJS, the `ng-show` directive shows or hides the associated DOM element, based on
an expression.
In this example, the ` ` element is shown if the `favoriteHero` variable is truthy.
|
### Bind to the `hidden` property
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 ` ` element is hidden if the `favoriteHero` variable is not truthy.
For more information on property binding, see the [Property binding](guide/template-syntax#property-binding)
section of the [Template Syntax](guide/template-syntax) page.
|
|
### ng-src
<img ng-src="{{movie.imageurl}}">
The `ng-src` directive allows AngularJS to preprocess the `src` property so that it
can replace the binding expression with the appropriate URL before the browser
fetches from that URL.
|
### Bind to the `src` property
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 the [Property binding](guide/template-syntax#property-binding)
section of the [Template Syntax](guide/template-syntax) page.
|
|
### ng-style
<div ng-style="{color: colorPreference}">
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 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.
|
### ngStyle
In Angular, 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 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 the [Style binding](guide/template-syntax#style-binding) section of the
[Template Syntax](guide/template-syntax) page.
For more information on the `ngStyle` directive, see [NgStyle](guide/template-syntax#ngStyle)
section of the [Template Syntax](guide/template-syntax) page.
|
|
### ng-switch
<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>
In AngularJS, 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!".
|
### ngSwitch
In Angular, 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, see [The NgSwitch directives](guide/template-syntax#ngSwitch)
section of the [Template Syntax](guide/template-syntax) page.
|
{@a filters-pipes}
## Filters/pipes
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).
|
AngularJS
|
Angular
|
|
### currency
<td>{{movie.price | currency}}</td>
Formats a number as currency.
|
### currency
The Angular `currency` pipe is similar although some of the parameters have changed.
|
|
### date
<td>{{movie.releaseDate | date}}</td>
Formats a date to a string based on the requested format.
|
### date
The Angular `date` pipe is similar.
|
|
### filter
<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
Selects a subset of items from the defined collection, based on the filter criteria.
|
### none
For performance reasons, no comparable pipe exists in Angular. Do all your filtering in the component. If you need the same filtering code in several templates, consider building a custom pipe.
|
|
### json
<pre>{{movie | json}}</pre>
Converts a JavaScript object into a JSON string. This is useful for debugging.
|
### json
The Angular `json` pipe does the same thing.
|
|
### limitTo
<tr ng-repeat="movie in movieList | limitTo:2:0">
Selects up to the first parameter (2) number of items from the collection
starting (optionally) at the beginning index (0).
|
### slice
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 AngularJS, coding this operation within the component instead could improve performance.
|
|
### lowercase
<div>{{movie.title | lowercase}}</div>
Converts the string to lowercase.
|
### lowercase
The Angular `lowercase` pipe does the same thing.
|
|
### number
<td>{{movie.starRating | number}}</td>
Formats a number as text.
|
### number
The Angular `number` pipe is similar.
It provides more functionality when defining
the decimal places, as shown in the second example above.
Angular also has a `percent` pipe, which formats a number as a local percentage
as shown in the third example.
|
|
### orderBy
<tr ng-repeat="movie in movieList | orderBy : 'title'">
Displays the collection in the order specified by the expression.
In this example, the movie title orders the `movieList`.
|
### none
For performance reasons, no comparable pipe exists in Angular.
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.
|
{@a controllers-components}
## Modules/controllers/components
In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.
In AngularJS, you write the code that provides the model and the methods for the view in a **controller**.
In Angular, you build a **component**.
Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column.
The Angular code is shown using TypeScript.
|
AngularJS
|
Angular
|
|
### IIFE
(function () {
...
}());
In AngularJS, an immediately invoked function expression (or IIFE) around controller code
keeps it out of the global namespace.
|
### none
This is a nonissue in Angular because ES 2015 modules
handle the namespacing for you.
For more information on modules, see the [Modules](guide/architecture#modules) section of the
[Architecture Overview](guide/architecture).
|
|
### Angular modules
angular.module("movieHunter", ["ngRoute"]);
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.
|
### NgModules
NgModules, 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 [NgModules](guide/ngmodule).
|
|
### Controller registration
angular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
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.
|
### Component decorator
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 logic, which is defined in the component class.
For more information, see the [Components](guide/architecture#components)
section of the [Architecture Overview](guide/architecture) page.
|
|
### Controller function
function MovieListCtrl(movieService) {
}
In AngularJS, you write the code for the model and methods in a controller function.
|
### Component class
In Angular, you create a component class.
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#components)
section of the [Architecture Overview](guide/architecture) page.
|
|
### Dependency injection
MovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) {
}
In AngularJS, 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.
|
### Dependency injection
In Angular, 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#dependency-injection)
section of the [Architecture Overview](guide/architecture).
|
{@a style-sheets}
## Style sheets
Style sheets give your application a nice look.
In AngularJS, 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, you can still define style sheets for your entire application. But now you can
also encapsulate a style sheet within a specific component.
|
AngularJS
|
Angular
|
|
### Link tag
<link href="styles.css" rel="stylesheet" />
AngularJS, uses a `link` tag in the head section of the `index.html` file
to define the styles for the application.
|
### Styles configuration
With the Angular CLI, you can configure your global styles in the `.angular-cli.json` file.
You can rename the extension to `.scss` to use sass.
### StyleUrls
In Angular, you can use the `styles` or `styleUrls` property of the `@Component` metadata to define
a style sheet for a particular component.
This allows you to set appropriate styles for individual components that won’t leak into
other parts of the application.
|
| |