Angular
<!-- Routing -->
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home.component';
import { AboutComponent } from './components/about.component';
import { AboutUserComponent } from './components/about-user.component';
import { ContactComponent } from './components/contact.component';
import { NotFoundComponent } from './components/notfound.component';
var appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'about/:username', component: AboutUserComponent },
{ path: 'contact', component: ContactComponent },
{ path: '**', component: NotFoundComponent },
];
export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);
-----------
<router-outlert></router-outlet> // In the Component
------------
// In the Template file.
<li><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a></li>
<li><a routerLink="/about" routerLinkActive="active">About</a></li>
<li><a routerLink="/contact" routerLinkActive="active">Contact</a></li>
<div class="user_image_block" [routerLink]="['/about', user.username]">....
<!-- ngFor-->
<ul>
<li *ngFor="let item of items; let i = index">
{{i}} {{item}}
</li>
</ul>
<!-- ngIf -->
<span *ngIf="showName"> {{ name }}</span>
<span *ngIf="!showName"> {{ world }}</span>
<span *ngIf="showName; else noName"> {{ name }}</span>
<ng-template #noName><span> World! </span></ng-template>
<span>{{ showName ? name : 'World!' }}</span>
<!-- ngSwitch -->
<span [ngSwitch]="times">
<span *ngSwitchCase="'1'">Steve Jobs</span>
<span *ngSwitchCase="'2'">John Doe</span>
<span *ngSwitchCase="'3'">Ricky Martin</span>
<span *ngSwitchDefault>World!</span>
</span>
<!-- Data binding -->
<div> <img src={{ imageUrl }} ></div>
<div> <img [src]="imageUrl" ></div>
<div> <img bind-src="imageUrl" ></div>
<span class="text" [textContent]="imageUrl"></span>
<!-- Attributes -->
<h3>Create Post</h3>
<p [hidden]="isUnchanged">Edit this post</p>
<button [disabled]="isUnchanged">Save Post!</button>