+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ AngularJS
+ |
+
+
+
+ Angular
+ |
+
+
+
+
+
+
+
+ |
+ ### ng-app
+
+ <body ng-app="movieHunter">
+
+
+ The application startup process is called **bootstrapping**.
+
+ Although you can bootstrap an AngularJS app in code,
+ many applications bootstrap declaratively with the `ng-app` directive,
+ giving it the name of the application's module (`movieHunter`).
+ |
+
+
+
+ ### Bootstrapping
+
+ {@example 'cb-ajs-quick-reference/ts/src/main.ts'}
+
+
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.module.1.ts'}
+
+ Angular doesn't have a bootstrap directive.
+ To launch the app in code, explicitly bootstrap the application's root module (`AppModule`)
+ in `main.ts`
+ and the application's root component (`AppComponent`) in `app.module.ts`.
+
+ For more information see the [Setup](../guide/setup.html) page.
+ |
+
+
+
+
+
+
+
+ |
+ ### 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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.html#other-bindings) section of the 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='event-binding'}
+
+ 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.html#event-binding) section of the Template Syntax page.
+
+ |
+
+
+
+
+
+
+
+ |
+ ### ng-controller
+
+ <div ng-controller="MovieListCtrl as vm">
+
+
+ In AngularJS, 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.
+ |
+
+
+
+ ### Component decorator
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='component'}
+
+ In Angular, 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).
+
+ |
+
+
+
+
+
+
+
+ |
+ ### ng-hide
+ In AngularJS, the `ng-hide` directive shows or hides the associated HTML element based on
+ an expression. For more information, see [ng-show](#ng-show).
+ |
+
+
+
+ ### bind to the `hidden` property
+ In Angular, you use property binding; there is no built-in *hide* directive.
+ For more information, see [ng-show](#ng-show).
+ |
+
+
+
+
+
+
+
+ |
+ ### ng-href
+
+ <a ng-href="angularDocsUrl">Angular Docs</a>
+
+
+ The `ng-href` directive allows AngularJS to preprocess the `href` property so that it
+ can replace the binding expression with the appropriate URL before the browser
+ fetches from that URL.
+
+ In AngularJS, the `ng-href` is often used to activate a route as part of navigation.
+
+ <a ng-href="#movies">Movies</a>
+
+
+ Routing is handled differently in Angular.
+ |
+
+
+
+ ### bind to the `href` property
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='href'}
+
+ Angular, uses property binding; there is no built-in *href* directive.
+ Place the element's `href` property in square brackets and set it to a quoted template expression.
+
+ For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
+
+ In Angular, `href` is no longer used for routing. Routing uses `routerLink`, as shown in the third example.
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='router-link'}
+
+ For more information on routing, see [Routing & Navigation](../guide/router.html#router-link).
+
+ |
+
+
+
+
+
+
+
+ |
+ ### 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 `table` element is removed from the DOM unless the `movies` array has a length greater than zero.
+ |
+
+
+
+ ### *ngIf
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='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 `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).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='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 [Template Syntax](../guide/template-syntax.html#ngModel).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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 (`tr`) element repeats for each movie object in the collection of movies.
+ |
+
+
+
+ ### *ngFor
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='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 (`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).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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 `div` element is shown if the `favoriteHero` variable is truthy.
+ |
+
+
+
+ ### bind to the `hidden` property
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='hidden'}
+
+ 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.
+
+ For more information on property binding, see [Template Syntax](../guide/template-syntax.html#property-binding).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='src'}
+
+ 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).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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 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.
+ |
+
+
+
+ ### ngStyle
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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 [Template Syntax](../guide/template-syntax.html#style-binding).
+
+ For more information on the ngStyle directive, see [Template Syntax](../guide/template-syntax.html#ngStyle).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.html' region='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 on the ngSwitch directive, see [Template Syntax](../guide/template-syntax.html#ngSwitch).
+ |
+
+
+
+
+
+
+
+[Back to top](#top)
+
+
+{@a filters-pipes}
+
+## Filters/pipes
+Angular **pipes** provide formatting and transformation for data in our 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).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+ AngularJS
+ |
+
+
+
+ Angular
+ |
+
+
+
+
+
+
+
+ |
+ ### currency
+
+ <td>{{movie.price | currency}}</td>
+
+
+ Formats a number as a currency.
+ |
+
+
+
+ ### currency
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='lowercase'}
+
+ The Angular `lowercase` pipe does the same thing.
+ |
+
+
+
+
+
+
+
+ |
+ ### number
+
+ <td>{{movie.starRating | number}}</td>
+
+
+ Formats a number as text.
+ |
+
+
+
+ ### number
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.component.html' region='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.
+
+ |
+
+
+
+
+
+
+
+[Back to top](#top)
+
+
+{@a controllers-components}
+
+## Modules/controllers/components
+In both AngularJS and Angular, 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, you often defined an immediately invoked function expression (or IIFE) around your controller code.
+ This kept your controller code out of the global namespace.
+ |
+
+
+
+ ### none
+ You don't need to worry about this in Angular because you use ES 2015 modules
+ and modules handle the namespacing for you.
+
+ For more information on modules, see [Architecture Overview](../guide/architecture.html#module).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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.
+ |
+
+
+
+ ### Angular modules
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/app.module.1.ts'}
+
+ Angular modules, defined with the `NgModule` decorator, serve the same purpose:
+ - `imports`: specifies the list of other modules that this module depends upon
+ - `declaration`: keeps track of your components, pipes, and directives.
+
+ For more information on modules, see [Angular Modules](../guide/ngmodule.html).
+ |
+
+
+
+
+
+
+
+ |
+ ### 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='component'}
+
+ 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.
+
+ For more information, see the [Components](../guide/architecture.html#components) section of the Architecture Overview page.
+ |
+
+
+
+
+
+
+
+ |
+ ### Controller function
+
+ function MovieListCtrl(movieService) {
+ }
+
+
+ In AngularJS, you write the code for the model and methods in a controller function.
+ |
+
+
+
+ ### Component class
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='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.html#components) section of the Architecture Overview 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
+
+ {@example 'cb-ajs-quick-reference/ts/src/app/movie-list.component.ts' region='di'}
+
+ 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.html#dependency-injection) section of the Architecture Overview.
+ |
+
+
+
+
+
+
+
+[Back to top](#top)
+
+
+{@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.
+