AngularJS to Angular concepts: Quick reference
Angular is the name for the Angular of today and tomorrow.
AngularJS is the name for all v1.x versions of Angular.
This guide helps you transition from AngularJS to Angular by mapping AngularJS syntax to the corresponding Angular syntax.
See the Angular syntax in this
Template basics
Templates are the user-facing part of an Angular application and are written in HTML. The following table lists some of the key AngularJS template features with their corresponding Angular template syntax.
Bindings / interpolation → bindings / interpolation
AngularJS | Angular |
---|---|
When using the controller as syntax, the binding is prefixed with the controller alias vm or $ctrl because you have to be specific about the source. |
For more information, see the Interpolation guide. |
Filters → pipes
AngularJS | Angular |
---|---|
| character and one or more filters. This example filters the title property to uppercase. |
| character to filter output, but now you call them pipes. Many, but not all, of the built-in filters from AngularJS are built-in pipes in Angular. For more information, see Filters/pipes. |
Local variables → input variables
AngularJS | Angular |
---|---|
movie is a user-defined local variable. |
let keyword. For more information, see the Structural directive shorthand section of Structural Directives. |
Template directives
AngularJS provides more than seventy built-in directives for templates. Many of them are not needed in Angular because of its more capable and expressive binding system. The following are some of the key AngularJS built-in directives and their equivalents in Angular.
ng-app
→ bootstrapping
AngularJS | Angular |
---|---|
ng-app
Although you can bootstrap an AngularJS application in code, many applications bootstrap declaratively with the ng-app directive, giving it the name of the module (movieHunter ) of the application. |
|
ng-class
→ ngClass
AngularJS | Angular |
---|---|
ng-class
ng-class directive includes/excludes CSS classes based on an expression. The expression is often a key-value object, with key defined as a CSS class name, and value as a template expression that evaluates to a Boolean. 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
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 Attribute, class, and style bindings page. |
ng-click
→ Bind to the click
event
AngularJS | Angular |
---|---|
ng-click
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. |
click event
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 Event reference. For more information, see the Event binding page. |
ng-controller
→ component decorator
AngularJS | Angular |
---|---|
ng-controller
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. |
For more information, see Architecture Overview. |
ng-hide
→ Bind to the hidden
property
AngularJS | Angular |
---|---|
ng-hide ng-hide directive shows or hides the associated HTML element based on an expression. For more information, see ng-show. |
hidden property |
ng-href
→ Bind to the href
property
AngularJS | Angular |
---|---|
ng-href
ng-href directive allows AngularJS to preprocess the href property. ng-href 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.
|
href property
href property of the element in square brackets and set it to a quoted template expression. For more information see the Property binding page. In Angular, href is no longer used for routing. Routing uses routerLink , as shown in the following example.
|
ng-if
→ *ngIf
AngularJS | Angular |
---|---|
ng-if
ng-if directive removes or recreates a section 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
*ngIf directive in Angular works the same as the ng-if directive in AngularJS. It removes or recreates a section 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. |
ng-model
→ ngModel
AngularJS | Angular |
---|---|
ng-model
ng-model directive binds a form control to a property in the controller associated with the template. This provides two-way binding whereby changes result in the value in the view and the model being synchronized. |
ngModel
[()] , descriptively referred to as a "banana in a box." This syntax is a shortcut for defining both:
For more information on two-way binding with ngModel , see the Displaying and updating properties with ngModel section of Built-in directives. |
ng-repeat
→ *ngFor
AngularJS | Angular |
---|---|
ng-repeat
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
*ngFor directive in Angular is like 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:
|
ng-show
→ Bind to the hidden
property
AngularJS | Angular |
---|---|
ng-show
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. |
hidden property
hidden property. To conditionally display an element the hidden property of the element can be used. Place the 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 the Property binding page. |
ng-src
→ Bind to the src
property
AngularJS | Angular |
---|---|
ng-src
ng-src directive allows AngularJS to preprocess the src property. This replaces the binding expression with the appropriate URL before the browser fetches from that URL. |
src property
src property in square brackets and set it to a quoted template expression. For more information on property binding, see the Property binding page. |
ng-style
→ ngStyle
AngularJS | Angular |
---|---|
ng-style
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:
color style is set to the current value of the colorPreference variable. |
ngStyle
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 section of the Attribute binding page. For more information on the ngStyle directive, see the NgStyle section of the Built-in directives page. |
ng-switch
→ ngSwitch
AngularJS | Angular |
---|---|
ng-switch
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
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 your favorite hero." If favoriteHero is set, the application checks the movie hero by calling a component method. If that method returns true , the application selects *ngSwitchCase="true" and displays: "Excellent choice." If that methods returns false , the application 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 section of the Built-in directives page. |
Filters / pipes
Angular pipes provide formatting and transformation for data in the template, like AngularJS filters. Many of the built-in filters in AngularJS have corresponding pipes in Angular. For more information on pipes, see Pipes.
currency
→ currency
AngularJS | Angular |
---|---|
currency
|
currency
currency pipe is similar although some of the parameters have changed. |
date
→ date
AngularJS | Angular |
---|---|
date
|
date
date pipe is similar. |
filter
→ none
AngularJS | Angular |
---|---|
filter
|
json
→ json
AngularJS | Angular |
---|---|
json
|
json
json pipe does the same thing. |
limitTo
→ slice
AngularJS | Angular |
---|---|
limitTo
2 number of items from the collection starting optionally at the beginning index 0 . |
slice
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 and the second is the limit. As in AngularJS, coding this operation within the component instead could improve performance. |
lowercase
→ lowercase
AngularJS | Angular |
---|---|
lowercase
|
lowercase
lowercase pipe does the same thing. |
number
→ number
AngularJS | Angular |
---|---|
number
|
number
number pipe is similar. It provides more capabilities when defining the decimal places, as shown in the preceding second example. Angular also has a percent pipe, which formats a number as a local percentage as shown in the third example. |
orderBy
→ none
AngularJS | Angular |
---|---|
orderBy
movieList . |
Controllers and Components
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 which typically acquires its model from an injected service.
Because much AngularJS code is in JavaScript, JavaScript code is shown in the AngularJS column. The Angular code is shown using TypeScript.
Immediately invoked function expression (IIFE) → none
AngularJS | Angular |
---|---|
|
Controller registration → component decorator
AngularJS | Angular |
---|---|
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 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 section of the Architecture Overview page. |
Controller function → component class
AngularJS | Angular |
---|---|
|
export keyword to export the class so that the component can be imported into other classes. For more information, see the Components section of the Architecture Overview page. |
Dependency injection → dependency injection
AngularJS | Angular |
---|---|
MovieService . To guard against minification problems, tell Angular explicitly that it should inject an instance of the MovieService in the first parameter. |
MovieService . The TypeScript type of the first parameter tells Angular what to inject, even after minification. For more information, see the Dependency injection section of the Architecture Overview. |
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. Now you can also encapsulate a style sheet within a specific component.
Link
tag → styles
configuration or styleUrls
AngularJS | Angular |
---|---|
Link tag
link tag in the head section of the index.html file to define the styles for the application. |
styles configuration
angular.json file. You can rename the extension to .scss to use sass. styleUrls styles or styleUrls property of the @Component metadata to define a style sheet for a particular component.
|