There are many conceptual and syntactical differences between Angular 1 and Angular 2. This page provides a quick guide to some common Angular 1 syntax and its equivalent in Angular 2.
See the Angular 2 syntax in this .
Contents
This page covers:
-
Template basics - binding and local variables.
-
Template directives - built-in directives
ngIfandngClass. -
Filters/pipes - built-in filters, known as pipes in Angular 2.
-
Modules/controllers/components - modules in Angular 2 are slightly different from modules in Angular 1, and controllers are components in Angular 2.
-
Style sheets - more options for CSS than in Angular 1.
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 Angular 1 template features with their equivalent Angular 2 template syntax.
| Angular 1 | Angular 2 |
|---|---|
Bindings/interpolationYour favorite hero is: {{vm.favoriteHero}}
In Angular 1, an expression in curly braces denotes one-way binding. This binds the value of the element to a property in the controller associated with this template. When using the |
Bindings/interpolationYour favorite hero is: {{favoriteHero}}
In Angular 2, a template expression in curly braces still denotes one-way binding. This binds the value of the element to a property of the component. The context of the binding is implied and is always the associated component, so it needs no reference variable. For more information, see the Interpolation section of the Template Syntax page. |
Filters<td>{{movie.title | uppercase}}</td>
To filter output in Angular 1 templates, use the pipe character (|) and one or more filters. This example filters the |
Pipes<td>{{movie.title | uppercase}}</td>
In Angular 2 you use similar syntax with the pipe (|) character to filter output, but now you call them pipes. Many (but not all) of the built-in filters from Angular 1 are built-in pipes in Angular 2. For more information, see the heading Filters/pipes below. |
Local variables<tr ng-repeat="movie in vm.movies">
<td>{{movie.title}}</td>
</tr>
Here, |
Input variables<tr *ngFor="let movie of movies">
<td>{{movie.title}}</td>
</tr>
Angular 2 has true template input variables that are explicitly defined using the For more information, see the ngFor micro-syntax section of the Template Syntax page. |
Template directives
Angular 1 provides more than seventy built-in directives for templates. Many of them aren't needed in Angular 2 because of its more capable and expressive binding system. The following are some of the key Angular 1 built-in directives and their equivalents in Angular 2.
| Angular 1 | Angular 2 |
|---|---|
ng-app<body ng-app="movieHunter"> The application startup process is called bootstrapping. Although you can bootstrap an Angular 1 app in code, many applications bootstrap declaratively with the |
Bootstrappingmain.tsimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.module.tsimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Angular 2 doesn't have a bootstrap directive. To launch the app in code, explicitly bootstrap the application's root module ( For more information see Quick Start. |
ng-class<div ng-class="{active: isActive}">
<div ng-class="{active: isActive,
shazam: isImportant}">
In Angular 1, the In the first example, the You can specify multiple classes, as shown in the second example. |
ngClass<div [ngClass]="{active: isActive}">
<div [ngClass]="{active: isActive,
shazam: isImportant}">
<div [class.active]="isActive">
In Angular 2, the In the first example, the You can specify multiple classes, as shown in the second example. Angular 2 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 section of the Template Syntax page. |
ng-click<button ng-click="vm.toggleImage()"> <button ng-click="vm.toggleImage($event)"> In Angular 1, the In the first example, when the user clicks the button, the The second example demonstrates passing in the |
bind to the |
ng-controller<div ng-controller="MovieListCtrl as vm"> In Angular 1, the |
Component decorator@Component({
selector: 'movie-list',
templateUrl: 'app/movie-list.component.html',
styleUrls: ['app/movie-list.component.css'],
})
In Angular 2, 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. |
ng-hideIn Angular 1, the |
bind to the |
ng-href<a ng-href="angularDocsUrl">Angular Docs</a> The In Angular 1, the <a ng-href="#movies">Movies</a> Routing is handled differently in Angular 2. |
bind to the |
ng-if<table ng-if="movies.length"> In Angular 1, the In this example, the |
*ngIf<table *ngIf="movies.length"> The In this example, the The (*) before |
ng-model<input ng-model="vm.favoriteHero"/> In Angular 1, the |
ngModel<input [(ngModel)]="favoriteHero" /> In Angular 2, two-way binding is denoted by For more information on two-way binding with ngModel, see Template Syntax. |
ng-repeat<tr ng-repeat="movie in vm.movies"> In Angular 1, the In this example, the table row ( |
*ngFor<tr *ngFor="let movie of movies"> The Notice the other syntax differences: The (*) before For more information, see Structural Directives. |
ng-show<h3 ng-show="vm.favoriteHero">
Your favorite hero is: {{vm.favoriteHero}}
</h3>
In Angular 1, the In this example, the |
bind to the |
ng-src<img ng-src="{{movie.imageurl}}">
The |
bind to the |
ng-style<div ng-style="{color: colorPreference}">
In Angular 1, the In the example, the |
ngStyle<div [ngStyle]="{color: colorPreference}">
<div [style.color]="colorPreference">
In Angular 2, the In the first example, the Angular 2 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. For more information on the ngStyle directive, see Template Syntax. |
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 Angular 1, the In this example, if |
ngSwitch<span [ngSwitch]="favoriteHero &&
checkMovieHero(favoriteHero)">
<p *ngSwitchCase="true">
Excellent choice!
</p>
<p *ngSwitchCase="false">
No movie, sorry!
</p>
<p *ngSwitchDefault>
Please enter your favorite hero.
</p>
</span>
In Angular 2, the In this example, if The (*) before For more information on the ngSwitch directive, see Template Syntax. |
Filters/pipes
Angular 2 pipes provide formatting and transformation for data in our template, similar to Angular 1 filters. Many of the built-in filters in Angular 1 have corresponding pipes in Angular 2. For more information on pipes, see Pipes.
| Angular 1 | Angular 2 |
|---|---|
currency<td>{{movie.price | currency}}</td>
Formats a number as a currency. |
currency<td>{{movie.price | currency:'USD':true}}</td>
The Angular 2 |
date<td>{{movie.releaseDate | date}}</td>
Formats a date to a string based on the requested format. |
date<td>{{movie.releaseDate | date}}</td>
The Angular 2 |
filter<tr ng-repeat="movie in movieList | filter: {title:listFilter}">
Selects a subset of items from the defined collection, based on the filter criteria. |
noneFor performance reasons, no comparable pipe exists in Angular 2. 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<pre>{{movie | json}}</pre>
The Angular 2 |
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<tr *ngFor="let movie of movies | slice:0:2"> The |
lowercase<div>{{movie.title | lowercase}}</div>
Converts the string to lowercase. |
lowercase<td>{{movie.title | lowercase}}</td>
The Angular 2 |
number<td>{{movie.starRating | number}}</td>
Formats a number as text. |
number<td>{{movie.starRating | number}}</td>
<td>{{movie.starRating | number:'1.1-2'}}</td>
<td>{{movie.approvalRating | percent: '1.0-2'}}</td>
The Angular 2 Angular 2 also has a |
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. |
noneFor performance reasons, no comparable pipe exists in Angular 2. 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. |
Modules/controllers/components
In both Angular 1 and Angular 2, Angular modules help you organize your application into cohesive blocks of functionality.
In Angular 1, you write the code that provides the model and the methods for the view in a controller. In Angular 2, you build a component.
Because much Angular 1 code is in JavaScript, JavaScript code is shown in the Angular 1 column. The Angular 2 code is shown using TypeScript.
| Angular 1 | Angular 2 |
|---|---|
IIFE(function () {
...
}());
In Angular 1, you often defined an immediately invoked function expression (or IIFE) around your controller code. This kept your controller code out of the global namespace. |
noneYou don't need to worry about this in Angular 2 because you use ES 2015 modules and modules handle the namespacing for you. For more information on modules, see Architecture Overview. |
Angular modulesangular.module("movieHunter", ["ngRoute"]);
In Angular 1, 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 modulesimport { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Angular 2 modules, defined with the
For more information on modules, see Angular Modules. |
Controller registrationangular
.module("movieHunter")
.controller("MovieListCtrl",
["movieService",
MovieListCtrl]);
Angular 1, 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@Component({
selector: 'movie-list',
templateUrl: 'app/movie-list.component.html',
styleUrls: ['app/movie-list.component.css'],
})
Angular 2, 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 section of the Architecture Overview page. |
Controller functionfunction MovieListCtrl(movieService) {
}
In Angular 1, you write the code for the model and methods in a controller function. |
Component classexport class MovieListComponent {
}
In Angular 2, you create a component class. NOTE: If you are using TypeScript with Angular 1, you must use the For more information, see the Components section of the Architecture Overview page. |
Dependency injectionMovieListCtrl.$inject = ['MovieService'];
function MovieListCtrl(movieService) {
}
In Angular 1, you pass in any dependencies as controller function arguments. This example injects a To guard against minification problems, tell Angular explicitly that it should inject an instance of the |
Dependency injectionconstructor(movieService: MovieService) {
}
In Angular 2, you pass in dependencies as arguments to the component class constructor. This example injects a For more information, see the Dependency Injection section of the Architecture Overview. |
Style sheets
Style sheets give your application a nice look. In Angular 1, 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 2, you can still define style sheets for your entire application. But now you can also encapsulate a style sheet within a specific component.
| Angular 1 | Angular 2 |
|---|---|
Link tag<link href="styles.css" rel="stylesheet" /> Angular 1, uses a |
Link tag<link rel="stylesheet" href="styles.css"> In Angular 2, you can continue to use the link tag to define the styles for your application in the StyleUrlsIn Angular 2, you can use the styleUrls: ['app/movie-list.component.css'], This allows you to set appropriate styles for individual components that won’t leak into other parts of the application. |
Please login to continue.