5 lines
59 KiB
JSON
5 lines
59 KiB
JSON
{
|
||
"id": "guide/ajs-quick-reference",
|
||
"title": "AngularJS to Angular concepts: Quick reference",
|
||
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/ajs-quick-reference.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"angularjs-to-angular-concepts-quick-reference\">AngularJS to Angular concepts: Quick reference<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#angularjs-to-angular-concepts-quick-reference\"><i class=\"material-icons\">link</i></a></h1>\n<a id=\"top\"></a>\n<p><em>Angular</em> is the name for the Angular of today and tomorrow.\n<em>AngularJS</em> is the name for all v1.x versions of Angular.</p>\n<p>This guide helps you transition from AngularJS to Angular\nby mapping AngularJS syntax to the equivalent Angular syntax.</p>\n<p><strong>See the Angular syntax in this <live-example name=\"ajs-quick-reference\"></live-example></strong>.</p>\n<h2 id=\"template-basics\">Template basics<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#template-basics\"><i class=\"material-icons\">link</i></a></h2>\n<p>Templates are the user-facing part of an Angular application and are written in HTML.\nThe following table lists some of the key AngularJS template features with their equivalent Angular template syntax.</p>\n<table width=\"100%\">\n <colgroup><col width=\"50%\">\n \n <col width=\"50%\">\n \n </colgroup><tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"bindingsinterpolation\">Bindings/interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bindingsinterpolation\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n Your favorite hero is: {{vm.favoriteHero}}\n </code-example>\n<p> In AngularJS, an expression in curly braces denotes one-way binding.\nThis binds the value of the element to a property in the controller\nassociated with this template.</p>\n<p> When using the <code>controller as</code> syntax,\nthe binding is prefixed with the controller alias (<code>vm</code> or <code>$ctrl</code>) because you\nhave to be specific about the source of the binding.</p>\n </td>\n <td>\n<h3 id=\"bindingsinterpolation-1\">Bindings/interpolation<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bindingsinterpolation-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"interpolation\">\nYour favorite hero is: {{favoriteHero}}\n\n</code-example></p>\n<p> In Angular, a template expression in curly braces still denotes one-way binding.\nThis binds the value of the element to a property of the component.\nThe context of the binding is implied and is always the\nassociated component, so it needs no reference variable.</p>\n<p> For more information, see the <a href=\"guide/interpolation\">Interpolation</a> guide.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"filters\">Filters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#filters\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <td>{{movie.title | <a href=\"api/common/UpperCasePipe\" class=\"code-anchor\">uppercase</a>}}</td>\n </code-example>\n<p> To filter output in AngularJS templates, use the pipe character (|) and one or more filters.</p>\n<p> This example filters the <code>title</code> property to uppercase.</p>\n </td>\n <td>\n<h3 id=\"pipes\">Pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#pipes\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"uppercase\">\n<td>{{movie.title | <a href=\"api/common/UpperCasePipe\" class=\"code-anchor\">uppercase</a>}}</td>\n\n</code-example></p>\n<p> In Angular you use similar syntax with the pipe (|) character to filter output, but now you call them <strong>pipes</strong>.\nMany (but not all) of the built-in filters from AngularJS are\nbuilt-in pipes in Angular.</p>\n<p> For more information, see <a href=\"guide/ajs-quick-reference#filters-pipes\">Filters/pipes</a> below.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"local-variables\">Local variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#local-variables\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <tr ng-repeat=\"movie in vm.movies\">\n <td>{{movie.title}}</td>\n </tr>\n </code-example>\n<p> Here, <code>movie</code> is a user-defined local variable.</p>\n </td>\n <td>\n<h3 id=\"input-variables\">Input variables<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#input-variables\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"local\">\n<tr *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let movie of movies\">\n <td>{{movie.title}}</td>\n</tr>\n\n</code-example></p>\n<p> Angular has true template input variables that are explicitly defined using the <code>let</code> keyword.</p>\n<p> For more information, see the <a href=\"guide/structural-directives#shorthand\">Structural directive shorthand</a> section of <a href=\"guide/structural-directives\">Structural Directives</a>.</p>\n </td>\n </tr>\n</tbody></table>\n<h2 id=\"template-directives\">Template directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#template-directives\"><i class=\"material-icons\">link</i></a></h2>\n<p>AngularJS provides more than seventy built-in directives for templates.\nMany of them aren't needed in Angular because of its more capable and expressive binding system.\nThe following are some of the key AngularJS built-in directives and their equivalents in Angular.</p>\n<table width=\"100%\">\n <colgroup><col width=\"50%\">\n \n <col width=\"50%\">\n \n </colgroup><tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-app\">ng-app<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-app\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <body ng-app=\"movieHunter\">\n </code-example>\n<p> The application startup process is called <strong>bootstrapping</strong>.</p>\n<p> Although you can bootstrap an AngularJS app in code,\nmany applications bootstrap declaratively with the <code>ng-app</code> directive,\ngiving it the name of the application's module (<code>movieHunter</code>).</p>\n </td>\n <td>\n<h3 id=\"bootstrapping\">Bootstrapping<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bootstrapping\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/main.ts\" header=\"main.ts\">\nimport { <a href=\"api/core/enableProdMode\" class=\"code-anchor\">enableProdMode</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a> } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\nif (environment.production) {\n <a href=\"api/core/enableProdMode\" class=\"code-anchor\">enableProdMode</a>();\n}\n\n<a href=\"api/platform-browser-dynamic/platformBrowserDynamic\" class=\"code-anchor\">platformBrowserDynamic</a>().bootstrapModule(AppModule);\n\n\n</code-example>\n<br></p>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.module.1.ts\" header=\"app.module.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [ <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> ],\n declarations: [ AppComponent ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n</code-example></p>\n<p> Angular doesn't have a bootstrap directive.\nTo launch the app in code, explicitly bootstrap the application's root module (<code>AppModule</code>)\nin <code>main.ts</code>\nand the application's root component (<code>AppComponent</code>) in <code>app.module.ts</code>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-class\">ng-class<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-class\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <div ng-class=\"{active: isActive}\">\n <div ng-class=\"{active: isActive,\n shazam: isImportant}\">\n </code-example>\n<p> In AngularJS, the <code>ng-class</code> directive includes/excludes CSS classes\nbased on an expression. That expression is often a key-value control object with each\nkey of the object defined as a CSS class name, and each value defined as a template expression\nthat evaluates to a Boolean value.</p>\n<p> In the first example, the <code>active</code> class is applied to the element if <code>isActive</code> is true.</p>\n<p> You can specify multiple classes, as shown in the second example.</p>\n </td>\n <td>\n<h3 id=\"ngclass\">ngClass<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngclass\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"ngClass\">\n<div [<a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a>]=\"{'active': isActive}\">\n<div [<a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a>]=\"{'active': isActive,\n 'shazam': isImportant}\">\n<div [class.active]=\"isActive\">\n\n</code-example></p>\n<p> In Angular, the <code><a href=\"api/common/NgClass\" class=\"code-anchor\">ngClass</a></code> directive works similarly.\nIt includes/excludes CSS classes based on an expression.</p>\n<p> In the first example, the <code>active</code> class is applied to the element if <code>isActive</code> is true.</p>\n<p> You can specify multiple classes, as shown in the second example.</p>\n<p> Angular also has <strong>class binding</strong>, which is a good way to add or remove a single class,\nas shown in the third example.</p>\n<p> For more information see <a href=\"guide/attribute-binding\">Attribute, class, and style bindings</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-click\">ng-click<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-click\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <button ng-click=\"vm.toggleImage()\">\n <button ng-click=\"vm.toggleImage($event)\">\n </code-example>\n<p> In AngularJS, the <code>ng-click</code> directive allows you to specify custom behavior when an element is clicked.</p>\n<p> In the first example, when the user clicks the button, the <code>toggleImage()</code> method in the controller referenced by the <code>vm</code> <code>controller as</code> alias is executed.</p>\n<p> The second example demonstrates passing in the <code>$event</code> object, which provides details about the event\nto the controller.</p>\n </td>\n <td>\n<h3 id=\"bind-to-the-click-event\">Bind to the <code>click</code> event<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bind-to-the-click-event\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"event-binding\">\n<button (click)=\"toggleImage()\">\n<button (click)=\"toggleImage($event)\">\n\n</code-example></p>\n<p> AngularJS event-based directives do not exist in Angular.\nRather, define one-way binding from the template view to the component using <strong>event binding</strong>.</p>\n<p> For event binding, define the name of the target event within parenthesis and\nspecify a template statement, in quotes, to the right of the equals. Angular then\nsets up an event handler for the target event. When the event is raised, the handler\nexecutes the template statement.</p>\n<p> In the first example, when a user clicks the button, the <code>toggleImage()</code> method in the associated component is executed.</p>\n<p> The second example demonstrates passing in the <code>$event</code> object, which provides details about the event\nto the component.</p>\n<p> For a list of DOM events, see: <a href=\"https://developer.mozilla.org/en-US/docs/Web/Events\">https://developer.mozilla.org/en-US/docs/Web/Events</a>.</p>\n<p> For more information, see the <a href=\"guide/event-binding\">Event binding</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-controller\">ng-controller<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-controller\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <div ng-controller=\"MovieListCtrl as vm\">\n </code-example>\n<p> In AngularJS, the <code>ng-controller</code> directive attaches a controller to the view.\nUsing the <code>ng-controller</code> (or defining the controller as part of the routing) ties the\nview to the controller code associated with that view.</p>\n </td>\n <td>\n<h3 id=\"component-decorator\">Component decorator<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#component-decorator\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.ts\" region=\"component\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-movie-list',\n templateUrl: './movie-list.component.html',\n styleUrls: [ './movie-list.component.css' ],\n})\n\n</code-example></p>\n<p> In Angular, the template no longer specifies its associated controller.\nRather, the component specifies its associated template as part of the component class decorator.</p>\n<p> For more information, see <a href=\"guide/architecture#components\">Architecture Overview</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-hide\">ng-hide<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-hide\"><i class=\"material-icons\">link</i></a></h3>\n<p> In AngularJS, the <code>ng-hide</code> directive shows or hides the associated HTML element based on\nan expression. For more information, see <a href=\"guide/ajs-quick-reference#ng-show\">ng-show</a>.</p>\n </td>\n <td>\n<h3 id=\"bind-to-the-hidden-property\">Bind to the <code>hidden</code> property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bind-to-the-hidden-property\"><i class=\"material-icons\">link</i></a></h3>\n<p> In Angular, you use property binding; there is no built-in <em>hide</em> directive.\nFor more information, see <a href=\"guide/ajs-quick-reference#ng-show\">ng-show</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-href\">ng-href<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-href\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <a ng-href=\"{{ angularDocsUrl }}\">Angular Docs</a>\n </code-example>\n<p> The <code>ng-href</code> directive allows AngularJS to preprocess the <code>href</code> property so that it\ncan replace the binding expression with the appropriate URL before the browser\nfetches from that URL.</p>\n<p> In AngularJS, the <code>ng-href</code> is often used to activate a route as part of navigation.</p>\n <code-example hidecopy=\"\" format=\"\">\n <a ng-href=\"#{{ moviesHash }}\">Movies</a>\n </code-example>\n<p> Routing is handled differently in Angular.</p>\n </td>\n <td>\n<h3 id=\"bind-to-the-href-property\">Bind to the <code>href</code> property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bind-to-the-href-property\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"href\">\n<a [href]=\"angularDocsUrl\">Angular Docs</a>\n\n</code-example></p>\n<p> Angular uses property binding; there is no built-in <em>href</em> directive.\nPlace the element's <code>href</code> property in square brackets and set it to a quoted template expression.</p>\n<p> For more information see the <a href=\"guide/property-binding\">Property binding</a> page.</p>\n<p> In Angular, <code>href</code> is no longer used for routing. Routing uses <code><a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a></code>, as shown in the following example.</p>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"router-link\">\n<a [<a href=\"api/router/RouterLink\" class=\"code-anchor\">routerLink</a>]=\"['/movies']\">Movies</a>\n\n</code-example></p>\n<p> For more information on routing, see <a href=\"guide/router#basic-route\">Defining a basic route</a>\nin the <a href=\"guide/router\">Routing & Navigation</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-if\">ng-if<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-if\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <table ng-if=\"movies.length\">\n </code-example>\n<p> In AngularJS, the <code>ng-if</code> directive removes or recreates a portion of the DOM,\nbased on an expression. If the expression is false, the element is removed from the DOM.</p>\n<p> In this example, the <code><table></code> element is removed from the DOM unless the <code>movies</code> array has a length greater than zero.</p>\n </td>\n <td>\n<h3 id=\"ngif\">*ngIf<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngif\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"ngIf\">\n<table *<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a>=\"movies.length\">\n\n</code-example></p>\n<p> The <code>*<a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> directive in Angular works the same as the <code>ng-if</code> directive in AngularJS. It removes\nor recreates a portion of the DOM based on an expression.</p>\n<p> In this example, the <code><table></code> element is removed from the DOM unless the <code>movies</code> array has a length.</p>\n<p> The (*) before <code><a href=\"api/common/NgIf\" class=\"code-anchor\">ngIf</a></code> is required in this example.\nFor more information, see <a href=\"guide/structural-directives\">Structural Directives</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-model\">ng-model<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-model\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <input ng-model=\"vm.favoriteHero\"/>\n </code-example>\n<p> In AngularJS, the <code>ng-model</code> directive binds a form control to a property in the controller associated with the template.\nThis provides <strong>two-way binding</strong>, 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.</p>\n </td>\n <td>\n<h3 id=\"ngmodel\">ngModel<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngmodel\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"ngModel\">\n<input [(<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>)]=\"favoriteHero\" />\n\n</code-example></p>\n<p> In Angular, <strong>two-way binding</strong> is denoted by <code>[()]</code>, 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)\nand event binding (from the view to the component), thereby providing two-way binding.</p>\n<p> For more information on two-way binding with <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code>, see the <a href=\"../guide/built-in-directives#ngModel\">NgModel—Two-way binding to\nform elements with <code>[(ngModel)]</code></a>\nsection of the <a href=\"guide/built-in-directives\">Built-in directives</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-repeat\">ng-repeat<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-repeat\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <tr ng-repeat=\"movie in vm.movies\">\n </code-example>\n<p> In AngularJS, the <code>ng-repeat</code> directive repeats the associated DOM element\nfor each item in the specified collection.</p>\n<p> In this example, the table row (<code><tr></code>) element repeats for each movie object in the collection of movies.</p>\n </td>\n <td>\n<h3 id=\"ngfor\">*ngFor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngfor\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"ngFor\">\n<tr *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let movie of movies\">\n\n</code-example></p>\n<p> The <code>*<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> directive in Angular is similar to the <code>ng-repeat</code> directive in AngularJS. It repeats\nthe associated DOM element for each item in the specified collection.\nMore accurately, it turns the defined element (<code><tr></code> in this example) and its contents into a template and\nuses that template to instantiate a view for each item in the list.</p>\n<p> Notice the other syntax differences:\nThe (*) before <code><a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a></code> is required;\nthe <code>let</code> keyword identifies <code>movie</code> as an input variable;\nthe list preposition is <code>of</code>, not <code>in</code>.</p>\n<p> For more information, see <a href=\"guide/structural-directives\">Structural Directives</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-show\">ng-show<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-show\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <h3 ng-show=\"vm.favoriteHero\">\n Your favorite hero is: {{vm.favoriteHero}}\n </h3>\n </code-example>\n<p> In AngularJS, the <code>ng-show</code> directive shows or hides the associated DOM element, based on\nan expression.</p>\n<p> In this example, the <code><div></code> element is shown if the <code>favoriteHero</code> variable is truthy.</p>\n </td>\n <td>\n<h3 id=\"bind-to-the-hidden-property-1\">Bind to the <code>hidden</code> property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bind-to-the-hidden-property-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"hidden\">\n<h3 [hidden]=\"!favoriteHero\">\n Your favorite hero is: {{favoriteHero}}\n</h3>\n\n</code-example></p>\n<p> Angular uses property binding; there is no built-in <em>show</em> directive.\nFor hiding and showing elements, bind to the HTML <code>hidden</code> property.</p>\n<p> To conditionally display an element, place the element's <code>hidden</code> property in square brackets and\nset it to a quoted template expression that evaluates to the <em>opposite</em> of <em>show</em>.</p>\n<p> In this example, the <code><div></code> element is hidden if the <code>favoriteHero</code> variable is not truthy.</p>\n<p> For more information on property binding, see the <a href=\"guide/property-binding\">Property binding</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-src\">ng-src<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-src\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <img ng-src=\"{{movie.imageurl}}\">\n </code-example>\n<p> The <code>ng-src</code> directive allows AngularJS to preprocess the <code>src</code> property so that it\ncan replace the binding expression with the appropriate URL before the browser\nfetches from that URL.</p>\n </td>\n <td>\n<h3 id=\"bind-to-the-src-property\">Bind to the <code>src</code> property<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#bind-to-the-src-property\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"src\">\n<img [src]=\"movie.imageurl\">\n\n</code-example></p>\n<p> Angular uses property binding; there is no built-in <em>src</em> directive.\nPlace the <code>src</code> property in square brackets and set it to a quoted template expression.</p>\n<p> For more information on property binding, see the <a href=\"guide/property-binding\">Property binding</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-style\">ng-style<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-style\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <div ng-style=\"{color: colorPreference}\">\n </code-example>\n<p> In AngularJS, the <code>ng-style</code> directive sets a CSS style on an HTML element\nbased on an expression. That expression is often a key-value control object with each\nkey of the object defined as a CSS property, and each value defined as an expression\nthat evaluates to a value appropriate for the style.</p>\n<p> In the example, the <code>color</code> style is set to the current value of the <code>colorPreference</code> variable.</p>\n </td>\n <td>\n<h3 id=\"ngstyle\">ngStyle<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngstyle\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"ngStyle\">\n<div [<a href=\"api/common/NgStyle\" class=\"code-anchor\">ngStyle</a>]=\"{'color': colorPreference}\">\n<div [style.color]=\"colorPreference\">\n\n</code-example></p>\n<p> In Angular, the <code><a href=\"api/common/NgStyle\" class=\"code-anchor\">ngStyle</a></code> directive works similarly. It sets a CSS style on an HTML element based on an expression.</p>\n<p> In the first example, the <code>color</code> style is set to the current value of the <code>colorPreference</code> variable.</p>\n<p> Angular also has <strong>style binding</strong>, which is good way to set a single style. This is shown in the second example.</p>\n<p> For more information on style binding, see the <a href=\"guide/attribute-binding#style-binding\">Style binding</a> section of the\n<a href=\"guide/attribute-binding\">Attribute binding</a> page.</p>\n<p> For more information on the <code><a href=\"api/common/NgStyle\" class=\"code-anchor\">ngStyle</a></code> directive, see the <a href=\"guide/built-in-directives#ngstyle\">NgStyle</a>\nsection of the <a href=\"guide/built-in-directives\">Built-in directives</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"ng-switch\">ng-switch<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ng-switch\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\" format=\"\">\n <div ng-switch=\"vm.favoriteHero &&\n vm.checkMovieHero(vm.favoriteHero)\">\n <div ng-switch-when=\"true\">\n Excellent choice!\n </div>\n <div ng-switch-when=\"false\">\n No movie, sorry!\n </div>\n <div ng-switch-default>\n Please enter your favorite hero.\n </div>\n </div>\n </code-example>\n<p> In AngularJS, the <code>ng-switch</code> directive swaps the contents of\nan element by selecting one of the templates based on the current value of an expression.</p>\n<p> In this example, if <code>favoriteHero</code> is not set, the template displays \"Please enter ...\".\nIf <code>favoriteHero</code> is set, it checks the movie hero by calling a controller method.\nIf that method returns <code>true</code>, the template displays \"Excellent choice!\".\nIf that methods returns <code>false</code>, the template displays \"No movie, sorry!\".</p>\n </td>\n <td>\n<h3 id=\"ngswitch\">ngSwitch<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngswitch\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.html\" region=\"ngSwitch\">\n<span [<a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a>]=\"favoriteHero &&\n checkMovieHero(favoriteHero)\">\n <p *<a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a>=\"true\">\n Excellent choice!\n </p>\n <p *<a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a>=\"false\">\n No movie, sorry!\n </p>\n <p *<a href=\"api/common/NgSwitchDefault\" class=\"code-anchor\">ngSwitchDefault</a>>\n Please enter your favorite hero.\n </p>\n</span>\n\n</code-example></p>\n<p> In Angular, the <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a></code> directive works similarly.\nIt displays an element whose <code>*<a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a></code> matches the current <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a></code> expression value.</p>\n<p> In this example, if <code>favoriteHero</code> is not set, the <code><a href=\"api/common/NgSwitch\" class=\"code-anchor\">ngSwitch</a></code> value is <code>null</code>\nand <code>*<a href=\"api/common/NgSwitchDefault\" class=\"code-anchor\">ngSwitchDefault</a></code> displays, \"Please enter ...\".\nIf <code>favoriteHero</code> is set, the app checks the movie hero by calling a component method.\nIf that method returns <code>true</code>, the app selects <code>*<a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a>=\"true\"</code> and displays: \"Excellent choice!\"\nIf that methods returns <code>false</code>, the app selects <code>*<a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a>=\"false\"</code> and displays: \"No movie, sorry!\"</p>\n<p> The (*) before <code><a href=\"api/common/NgSwitchCase\" class=\"code-anchor\">ngSwitchCase</a></code> and <code><a href=\"api/common/NgSwitchDefault\" class=\"code-anchor\">ngSwitchDefault</a></code> is required in this example.</p>\n<p> For more information, see <a href=\"guide/built-in-directives#ngSwitch\">The NgSwitch directives</a>\nsection of the <a href=\"guide/built-in-directives\">Built-in directives</a> page.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"filters-pipes\"></a>\n<h2 id=\"filterspipes\">Filters/pipes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#filterspipes\"><i class=\"material-icons\">link</i></a></h2>\n<p>Angular <strong>pipes</strong> provide formatting and transformation for data in the template, similar to AngularJS <strong>filters</strong>.\nMany of the built-in filters in AngularJS have corresponding pipes in Angular.\nFor more information on pipes, see <a href=\"guide/pipes\">Pipes</a>.</p>\n<table width=\"100%\">\n <colgroup><col width=\"50%\">\n \n <col width=\"50%\">\n \n </colgroup><tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"currency\">currency<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#currency\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <td>{{movie.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a>}}</td>\n </code-example>\n<p> Formats a number as currency.</p>\n </td>\n <td>\n<h3 id=\"currency-1\">currency<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#currency-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"currency\">\n<td>{{movie.price | <a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a>:'USD':true}}</td>\n\n</code-example></p>\n<p> The Angular <code><a href=\"api/common/CurrencyPipe\" class=\"code-anchor\">currency</a></code> pipe is similar although some of the parameters have changed.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"date\">date<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#date\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <td>{{movie.releaseDate | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>}}</td>\n </code-example>\n<p> Formats a date to a string based on the requested format.</p>\n </td>\n <td>\n<h3 id=\"date-1\">date<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#date-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"date\">\n<td>{{movie.releaseDate | <a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a>}}</td>\n\n</code-example></p>\n<p> The Angular <code><a href=\"api/common/DatePipe\" class=\"code-anchor\">date</a></code> pipe is similar.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"filter\">filter<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#filter\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <tr ng-repeat=\"movie in movieList | filter: {title:listFilter}\">\n </code-example>\n<p> Selects a subset of items from the defined collection, based on the filter criteria.</p>\n </td>\n <td>\n<h3 id=\"none\">none<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#none\"><i class=\"material-icons\">link</i></a></h3>\n<p> 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.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"json\">json<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#json\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <pre>{{movie | <a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a>}}</pre>\n </code-example>\n<p> Converts a JavaScript object into a JSON string. This is useful for debugging.</p>\n </td>\n <td>\n<h3 id=\"json-1\">json<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#json-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"json\">\n<pre>{{movie | <a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a>}}</pre>\n\n</code-example></p>\n<p> The Angular <code><a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a></code> pipe does the same thing.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"limitto\">limitTo<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#limitto\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <tr ng-repeat=\"movie in movieList | limitTo:2:0\">\n </code-example>\n<p> Selects up to the first parameter (2) number of items from the collection\nstarting (optionally) at the beginning index (0).</p>\n </td>\n <td>\n<h3 id=\"slice\">slice<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#slice\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"slice\">\n<tr *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let movie of movies | <a href=\"api/common/SlicePipe\" class=\"code-anchor\">slice</a>:0:2\">\n\n</code-example></p>\n<p> The <code><a href=\"api/common/SlicePipe\" class=\"code-anchor\">SlicePipe</a></code> does the same thing but the <em>order of the parameters is reversed</em>, in keeping\nwith the JavaScript <code>Slice</code> method.\nThe first parameter is the starting index; the second is the limit.\nAs in AngularJS, coding this operation within the component instead could improve performance.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"lowercase\">lowercase<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#lowercase\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <td>{{movie.title | <a href=\"api/common/LowerCasePipe\" class=\"code-anchor\">lowercase</a>}}</td>\n </code-example>\n<p> Converts the string to lowercase.</p>\n </td>\n <td>\n<h3 id=\"lowercase-1\">lowercase<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#lowercase-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"lowercase\">\n<td>{{movie.title | <a href=\"api/common/LowerCasePipe\" class=\"code-anchor\">lowercase</a>}}</td>\n\n</code-example></p>\n<p> The Angular <code><a href=\"api/common/LowerCasePipe\" class=\"code-anchor\">lowercase</a></code> pipe does the same thing.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"number\">number<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#number\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <td>{{movie.starRating | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>}}</td>\n </code-example>\n<p> Formats a number as text.</p>\n </td>\n <td>\n<h3 id=\"number-1\">number<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#number-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.component.html\" region=\"number\">\n<td>{{movie.starRating | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>}}</td>\n<td>{{movie.starRating | <a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a>:'1.1-2'}}</td>\n<td>{{movie.approvalRating | <a href=\"api/common/PercentPipe\" class=\"code-anchor\">percent</a>: '1.0-2'}}</td>\n\n</code-example></p>\n<p> The Angular <code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code> pipe is similar.\nIt provides more functionality when defining\nthe decimal places, as shown in the second example above.</p>\n<p> Angular also has a <code><a href=\"api/common/PercentPipe\" class=\"code-anchor\">percent</a></code> pipe, which formats a number as a local percentage\nas shown in the third example.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"orderby\">orderBy<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#orderby\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <tr ng-repeat=\"movie in movieList | orderBy : 'title'\">\n </code-example>\n<p> Displays the collection in the order specified by the expression.\nIn this example, the movie title orders the <code>movieList</code>.</p>\n </td>\n <td>\n<h3 id=\"none-1\">none<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#none-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> For performance reasons, no comparable pipe exists in Angular.\nInstead, 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.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"controllers-components\"></a>\n<h2 id=\"modulescontrollerscomponents\">Modules/controllers/components<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#modulescontrollerscomponents\"><i class=\"material-icons\">link</i></a></h2>\n<p>In both AngularJS and Angular, modules help you organize your application into cohesive blocks of functionality.</p>\n<p>In AngularJS, you write the code that provides the model and the methods for the view in a <strong>controller</strong>.\nIn Angular, you build a <strong>component</strong>.</p>\n<p>Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column.\nThe Angular code is shown using TypeScript.</p>\n<table width=\"100%\">\n <colgroup><col width=\"50%\">\n \n <col width=\"50%\">\n \n </colgroup><tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"iife\">IIFE<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#iife\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n (function () {\n ...\n }());\n </code-example>\n<p> In AngularJS, an immediately invoked function expression (or IIFE) around controller code\nkeeps it out of the global namespace.</p>\n </td>\n <td>\n<h3 id=\"none-2\">none<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#none-2\"><i class=\"material-icons\">link</i></a></h3>\n<p> This is a nonissue in Angular because ES 2015 modules\nhandle the namespacing for you.</p>\n<p> For more information on modules, see the <a href=\"guide/architecture#modules\">Modules</a> section of the\n<a href=\"guide/architecture\">Architecture Overview</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"angular-modules\">Angular modules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#angular-modules\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n angular.module(\"movieHunter\", [\"ngRoute\"]);\n </code-example>\n<p> In AngularJS, an Angular module keeps track of controllers, services, and other code.\nThe second argument defines the list of other modules that this module depends upon.</p>\n </td>\n <td>\n<h3 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/app.module.1.ts\">\nimport { <a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a> } from '@angular/core';\nimport { <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@<a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a>({\n imports: [ <a href=\"api/platform-browser/BrowserModule\" class=\"code-anchor\">BrowserModule</a> ],\n declarations: [ AppComponent ],\n bootstrap: [ AppComponent ]\n})\nexport class AppModule { }\n\n\n</code-example></p>\n<p> NgModules, defined with the <code><a href=\"api/core/NgModule\" class=\"code-anchor\">NgModule</a></code> decorator, serve the same purpose:</p>\n<p> <em> <code>imports</code>: specifies the list of other modules that this module depends upon\n</em> <code>declaration</code>: keeps track of your components, pipes, and directives.</p>\n<p> For more information on modules, see <a href=\"guide/ngmodules\">NgModules</a>.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"controller-registration\">Controller registration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#controller-registration\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n angular\n .module(\"movieHunter\")\n .controller(\"MovieListCtrl\",\n [\"movieService\",\n MovieListCtrl]);\n </code-example>\n<p> AngularJS has code in each controller that looks up an appropriate Angular module\nand registers the controller with that module.</p>\n<p> The first argument is the controller name. The second argument defines the string names of\nall dependencies injected into this controller, and a reference to the controller function.</p>\n </td>\n <td>\n<h3 id=\"component-decorator-1\">Component decorator<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#component-decorator-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.ts\" region=\"component\">\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-movie-list',\n templateUrl: './movie-list.component.html',\n styleUrls: [ './movie-list.component.css' ],\n})\n\n</code-example></p>\n<p> Angular adds a decorator to the component class to provide any required metadata.\nThe <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> decorator declares that the class is a component and provides metadata about\nthat component such as its selector (or tag) and its template.</p>\n<p> This is how you associate a template with logic, which is defined in the component class.</p>\n<p> For more information, see the <a href=\"guide/architecture#components\">Components</a>\nsection of the <a href=\"guide/architecture\">Architecture Overview</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"controller-function\">Controller function<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#controller-function\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n function MovieListCtrl(movieService) {\n }\n </code-example>\n<p> In AngularJS, you write the code for the model and methods in a controller function.</p>\n </td>\n <td>\n<h3 id=\"component-class\">Component class<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#component-class\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.ts\" region=\"class\">\nexport class MovieListComponent {\n}\n\n</code-example></p>\n<p> In Angular, you create a component class to contain the data model and control methods. Use the TypeScript <code>export</code> keyword to export the class so that the functionality can be imported into NgModules.</p>\n<p> For more information, see the <a href=\"guide/architecture#components\">Components</a>\nsection of the <a href=\"guide/architecture\">Architecture Overview</a> page.</p>\n </td>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"dependency-injection\">Dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#dependency-injection\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n MovieListCtrl.$inject = ['MovieService'];\n function MovieListCtrl(movieService) {\n }\n </code-example>\n<p> In AngularJS, you pass in any dependencies as controller function arguments.\nThis example injects a <code>MovieService</code>.</p>\n<p> To guard against minification problems, tell Angular explicitly\nthat it should inject an instance of the <code>MovieService</code> in the first parameter.</p>\n </td>\n <td>\n<h3 id=\"dependency-injection-1\">Dependency injection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#dependency-injection-1\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.ts\" region=\"di\">\nconstructor(movieService: MovieService) {\n}\n\n</code-example></p>\n<p> In Angular, you pass in dependencies as arguments to the component class constructor.\nThis example injects a <code>MovieService</code>.\nThe first parameter's TypeScript type tells Angular what to inject, even after minification.</p>\n<p> For more information, see the <a href=\"guide/architecture#dependency-injection\">Dependency injection</a>\nsection of the <a href=\"guide/architecture\">Architecture Overview</a>.</p>\n </td>\n </tr>\n</tbody></table>\n<a id=\"style-sheets\"></a>\n<h2 id=\"style-sheets\">Style sheets<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#style-sheets\"><i class=\"material-icons\">link</i></a></h2>\n<p>Style sheets give your application a nice look.\nIn AngularJS, you specify the style sheets for your entire application.\nAs the application grows over time, the styles for the many parts of the application\nmerge, which can cause unexpected results.\nIn Angular, you can still define style sheets for your entire application. But now you can\nalso encapsulate a style sheet within a specific component.</p>\n<table width=\"100%\">\n <colgroup><col width=\"50%\">\n \n <col width=\"50%\">\n \n </colgroup><tbody><tr>\n <th>\n AngularJS\n </th>\n <th>\n Angular\n </th>\n </tr>\n <tr style=\"top\">\n <td>\n<h3 id=\"link-tag\">Link tag<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#link-tag\"><i class=\"material-icons\">link</i></a></h3>\n <code-example hidecopy=\"\">\n <link href=\"styles.css\" rel=\"stylesheet\" />\n </code-example>\n<p> AngularJS, uses a <code>link</code> tag in the head section of the <code>index.html</code> file\nto define the styles for the application.</p>\n </td>\n <td>\n<h3 id=\"styles-configuration\">Styles configuration<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#styles-configuration\"><i class=\"material-icons\">link</i></a></h3>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/.angular-cli.1.json\" region=\"styles\">\n\"styles\": [\n \"styles.css\"\n],\n\n</code-example></p>\n<p> With the Angular CLI, you can configure your global styles in the <code>angular.json</code> file.\nYou can rename the extension to <code>.scss</code> to use sass.</p>\n<h3 id=\"styleurls\">StyleUrls<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/ajs-quick-reference#styleurls\"><i class=\"material-icons\">link</i></a></h3>\n<p> In Angular, you can use the <code>styles</code> or <code>styleUrls</code> property of the <code>@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a></code> metadata to define\na style sheet for a particular component.</p>\n<p> <code-example hidecopy=\"\" path=\"ajs-quick-reference/src/app/movie-list.component.ts\" region=\"style-url\">\nstyleUrls: [ './movie-list.component.css' ],\n\n</code-example></p>\n<p> This allows you to set appropriate styles for individual components that won’t leak into\nother parts of the application.</p>\n </td>\n </tr>\n</tbody></table>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/example-apps-list\n-->\n<!-- links from this doc:\n - ../guide/built-in-directives#ngModel\n - api/common/CurrencyPipe\n - api/common/DatePipe\n - api/common/DecimalPipe\n - api/common/JsonPipe\n - api/common/LowerCasePipe\n - api/common/NgClass\n - api/common/NgForOf\n - api/common/NgIf\n - api/common/NgStyle\n - api/common/NgSwitch\n - api/common/NgSwitchCase\n - api/common/NgSwitchDefault\n - api/common/PercentPipe\n - api/common/SlicePipe\n - api/common/UpperCasePipe\n - api/core/Component\n - api/core/NgModule\n - api/core/enableProdMode\n - api/forms/NgModel\n - api/platform-browser-dynamic/platformBrowserDynamic\n - api/platform-browser/BrowserModule\n - api/router/RouterLink\n - guide/ajs-quick-reference#angular-modules\n - guide/ajs-quick-reference#angularjs-to-angular-concepts-quick-reference\n - guide/ajs-quick-reference#bind-to-the-click-event\n - guide/ajs-quick-reference#bind-to-the-hidden-property\n - guide/ajs-quick-reference#bind-to-the-hidden-property-1\n - guide/ajs-quick-reference#bind-to-the-href-property\n - guide/ajs-quick-reference#bind-to-the-src-property\n - guide/ajs-quick-reference#bindingsinterpolation\n - guide/ajs-quick-reference#bindingsinterpolation-1\n - guide/ajs-quick-reference#bootstrapping\n - guide/ajs-quick-reference#component-class\n - guide/ajs-quick-reference#component-decorator\n - guide/ajs-quick-reference#component-decorator-1\n - guide/ajs-quick-reference#controller-function\n - guide/ajs-quick-reference#controller-registration\n - guide/ajs-quick-reference#currency\n - guide/ajs-quick-reference#currency-1\n - guide/ajs-quick-reference#date\n - guide/ajs-quick-reference#date-1\n - guide/ajs-quick-reference#dependency-injection\n - guide/ajs-quick-reference#dependency-injection-1\n - guide/ajs-quick-reference#filter\n - guide/ajs-quick-reference#filters\n - guide/ajs-quick-reference#filters-pipes\n - guide/ajs-quick-reference#filterspipes\n - guide/ajs-quick-reference#iife\n - guide/ajs-quick-reference#input-variables\n - guide/ajs-quick-reference#json\n - guide/ajs-quick-reference#json-1\n - guide/ajs-quick-reference#limitto\n - guide/ajs-quick-reference#link-tag\n - guide/ajs-quick-reference#local-variables\n - guide/ajs-quick-reference#lowercase\n - guide/ajs-quick-reference#lowercase-1\n - guide/ajs-quick-reference#modulescontrollerscomponents\n - guide/ajs-quick-reference#ng-app\n - guide/ajs-quick-reference#ng-class\n - guide/ajs-quick-reference#ng-click\n - guide/ajs-quick-reference#ng-controller\n - guide/ajs-quick-reference#ng-hide\n - guide/ajs-quick-reference#ng-href\n - guide/ajs-quick-reference#ng-if\n - guide/ajs-quick-reference#ng-model\n - guide/ajs-quick-reference#ng-repeat\n - guide/ajs-quick-reference#ng-show\n - guide/ajs-quick-reference#ng-src\n - guide/ajs-quick-reference#ng-style\n - guide/ajs-quick-reference#ng-switch\n - guide/ajs-quick-reference#ngclass\n - guide/ajs-quick-reference#ngfor\n - guide/ajs-quick-reference#ngif\n - guide/ajs-quick-reference#ngmodel\n - guide/ajs-quick-reference#ngmodules\n - guide/ajs-quick-reference#ngstyle\n - guide/ajs-quick-reference#ngswitch\n - guide/ajs-quick-reference#none\n - guide/ajs-quick-reference#none-1\n - guide/ajs-quick-reference#none-2\n - guide/ajs-quick-reference#number\n - guide/ajs-quick-reference#number-1\n - guide/ajs-quick-reference#orderby\n - guide/ajs-quick-reference#pipes\n - guide/ajs-quick-reference#slice\n - guide/ajs-quick-reference#style-sheets\n - guide/ajs-quick-reference#styles-configuration\n - guide/ajs-quick-reference#styleurls\n - guide/ajs-quick-reference#template-basics\n - guide/ajs-quick-reference#template-directives\n - guide/architecture\n - guide/architecture#components\n - guide/architecture#dependency-injection\n - guide/architecture#modules\n - guide/attribute-binding\n - guide/attribute-binding#style-binding\n - guide/built-in-directives\n - guide/built-in-directives#ngSwitch\n - guide/built-in-directives#ngstyle\n - guide/event-binding\n - guide/interpolation\n - guide/ngmodules\n - guide/pipes\n - guide/property-binding\n - guide/router\n - guide/router#basic-route\n - guide/structural-directives\n - guide/structural-directives#shorthand\n - https://developer.mozilla.org/en-US/docs/Web/Events\n - https://github.com/angular/angular/edit/master/aio/content/guide/ajs-quick-reference.md?message=docs%3A%20describe%20your%20change...\n-->"
|
||
} |