import {Component} from 'angular2/core';
import {RouteConfig, RouterOutlet} from 'angular2/router';
import {ItemCenterComponent} from './item-center/item-center.component';
@Component({
selector: 'my-app',
template: `
<h1>Demo App</h1>
<hr />
<router-outlet></router-outlet>
<hr />
<div>
<h3>Special Cases</h3>
<details>
<summary [style.color]="'Green'">
<span>\u2714</span>
Respecting <code>[target]</code>
</summary>
<dl>
<dt><b>Description:</b></dt>
<dd>Clicking on a link with \`target !== '_self'\` should open in the appropriate tab/window.</dd>
<dt><b>Status:</b></dt>
<dd>WORKS AS EXPECTED</dd>
<dt><b>How to reproduce:</b></dt>
<dd>Click on one of the links with \`target _blank\`.</dd>
<dt><b>Expected behavior:</b></dt>
<dd>The corresponding route opens in a new tab/window.</dd>
<dt><b>Actual behavior:</b></dt>
<dd>The corresponding route opens in a new tab/window.</dd>
</dl>
</details>
<details>
<summary [style.color]="'Red'">
<span>\u2718</span>
<code>Cmd/Ctrl + Click</code>
</summary>
<dl>
<dt><b>Description:</b></dt>
<dd>\`Cmd/Ctrl + click\` should open in a new tab/window.</dd>
<dt><b>Status:</b></dt>
<dd>BROKEN</dd>
<dt><b>How to reproduce:</b></dt>
<dd><code>\`Cmd/Ctrl + Click\`</code> on any link.</dd>
<dt><b>Expected behavior:</b></dt>
<dd>The corresponding route opens in a new tab/window.</dd>
<dt><b>Actual behavior:</b></dt>
<dd>The corresponding route opens in the same tab/window.</dd>
</dl>
</details>
</div>
`,
directives: [RouterOutlet]
})
@RouteConfig([
{
path: '/item-center/...',
name: 'ItemCenter',
component: ItemCenterComponent,
useAsDefault: true
}
])
export class AppComponent {}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<!DOCTYPE html>
<html>
<head>
<!-- Set the base href -->
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Router Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css" />
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2@2.0.0-beta.12/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.12/angular2.dev.js"></script>
<!-- Add the router library -->
<script src="https://code.angularjs.org/2.0.0-beta.12/router.dev.js"></script>
<script>
System.
config({
packages: {app: {defaultExtension: 'ts'}},
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true}
});
System.
import('app/main').
catch(err => console.error(err));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
import {Component} from 'angular2/core';
import {RouteConfig, RouterOutlet} from 'angular2/router';
import {ItemListComponent} from './item-list.component.ts';
import {ItemDetailComponent} from './item-detail.component.ts';
@Component({
template: `
<h2>Item Center</h2>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet]
})
@RouteConfig([
{
path: '/',
name: 'ItemList',
component: ItemListComponent,
useAsDefault: true
},
{
path: '/:id',
name: 'ItemDetail',
component: ItemDetailComponent
}
])
export class ItemCenterComponent {}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {Component} from 'angular2/core';
import {RouterLink} from 'angular2/router';
import {IItem} from '../models/item.interface';
import {ITEMS} from '../data/items';
@Component({
template: `
<h3>Item List</h3>
<ul *ngFor="#target of ['_self', '_blank']">
<li *ngFor="#item of items">
<a [routerLink]="['ItemDetail', {id: item.id}]" [target]="target" [attr.target]="target">
{{ item.name }}
</a>
(<code>target: {{ target }}</code>)
</li>
</ul>
`,
directives: [RouterLink]
})
export class ItemListComponent {
items: IItem[] = ITEMS;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {Component} from 'angular2/core';
import {RouterLink, RouteParams} from 'angular2/router';
import {IItem} from '../models/item.interface';
import {ITEMS} from '../data/items';
@Component({
template: `
<h3>Item Detail</h3>
<pre><b>ID:</b> {{ item.id }}</pre>
<pre><b>Name:</b> {{ item.name }}</pre>
<pre><b>Description:</b> {{ item.description }}</pre>
<hr />
<a [routerLink]="['ItemList']">Back</a>
`,
directives: [RouterLink]
})
export class ItemDetailComponent {
private _items: IItem[] = ITEMS;
item: IItem;
constructor(routeParams: RouteParams) {
var id = routeParams.get('id');
this.item = this._findItem(id);
}
private _findItem(id: Number): IItem {
var foundItem = null;
this._items.some(item => {
if (item.id === id) {
foundItem = item;
return true;
}
});
return foundItem;
}
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {IItem} from '../models/item.interface.ts';
export const ITEMS: IItem[] = [
{id: 1, name: 'Item 1', description: '1st class item.'},
{id: 2, name: 'Item 2', description: '2nd class item.'},
{id: 3, name: 'Item 3', description: '3rd class item.'}
];
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
export interface IItem {
id: Number;
name: String;
description: String;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
dd {
margin-bottom: 15px;
margin-top: 5px;
}
dt {
margin-left: 15px;
}
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/