import { Component } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
@Component({
selector: 'my-app',
template: `<h1>My First Angular 2 App</h1>
<br />
<button (click)="gotoLink(homeLink)">Home</button>
<br />
<button (click)="gotoLink(nestedLink)">Nested</button>
<br />
<button (click)="gotoLink(nestedAux)">Nested Aux</button>
<!--<a [routerLink]="['/nested', { outlets: { 'nestedAux': ['abc'] } }]"> Open aux </a>-->
<router-outlet></router-outlet>`,
directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})
export class AppComponent {
homeLink:string = "/";
nestedLink:string = "/nested";
nestedAux:string = "/nested/(nestedAux:abc)";
constructor(private router:Router){}
gotoLink(_url:string){
this.router.navigateByUrl(_url);
}
}
/*
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 '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDER } from './approute';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [APP_ROUTER_PROVIDER]);
/*
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
*/
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
a {
cursor: pointer;
cursor: hand;
}
button {
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
cursor: hand;
margin:10px;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #aaa;
cursor: auto;
}
/* Navigation link styles */
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
}
/* items class */
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected:hover {
background-color: #BBD8DC;
color: white;
}
.items .text {
position: relative;
top: -3px;
}
.items {
margin: 0 0 2em 0;
list-style-type: none;
padding: 0;
width: 24em;
}
.items li {
cursor: pointer;
position: relative;
left: 0;
background-color: #EEE;
margin: .5em;
padding: .3em 0;
height: 1.6em;
border-radius: 4px;
}
.items li:hover {
color: #607D8B;
background-color: #DDD;
left: .1em;
}
.items li.selected {
background-color: #CFD8DC;
color: white;
}
.items li.selected:hover {
background-color: #BBD8DC;
}
.items .text {
position: relative;
top: -3px;
}
.items .badge {
display: inline-block;
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 1.8em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}
/*
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>
<title>Angular 2 QuickStart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<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
-->
var modules = [
'core',
'common',
'compiler',
'platform-browser',
'platform-browser-dynamic'
]
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./app",
'@angular': 'https://npmcdn.com/@angular',
'@angular/core': 'https://npmcdn.com/@angular/core',
'@angular/common': 'https://npmcdn.com/@angular/common',
'@angular/compiler':'https://npmcdn.com/@angular/compiler',
'@angular/platform-browser':'https://npmcdn.com/@angular/platform-browser',
'@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic',
'@angular/router': 'https://npmcdn.com/@angular/router',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
'@angular/core': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/compiler': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/common': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser-dynamic': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/platform-browser': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/forms': {
main: 'index.js',
defaultExtension: 'js'
},
'@angular/router': {
main: 'index.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'abc',
template: '<h2> I should be nested aux!!! </h2>'
})
export class AbcComponent {
}
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'nested',
template: `<h1> Nested </h1> <router-outlet></router-outlet> <router-outlet name="nestedAux"></router-outlet>`,
directives: [ROUTER_DIRECTIVES]
})
export class NestedComponent {
}
import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { NestedComponent } from './nested/nested';
import { NestedChildComponent } from './nested/nestedChild';
import { AbcComponent } from './nested/abc';
const AppRoutes:RouterConfig = [
{ path:'', component: HomeComponent},
{ path:'nested', component: NestedComponent, children:[
{path: '', component: NestedChildComponent },
{path: 'abc', component: AbcComponent, outlet: 'nestedAux' }
]
}
];
export const APP_ROUTER_PROVIDER = [
provideRouter(AppRoutes)
];
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'home',
template: '<h1>Home</h1>'
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'nested-child',
template: `<h1> Nested Child </h1>`,
directives: [ROUTER_DIRECTIVES]
})
export class NestedChildComponent {
}