import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html'
})
export class AppComponent { }
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 Demo: Retreiving delayed route data by thoughtram</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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.23?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>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<script>document.write('<base href="' + document.location + '" />');</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
(function(global) {
var ngVer = '@2.0.0'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.0'; // lock router version
var formsVer = '@2.0.0'; // lock forms version
//map tells the System loader where to look for things
var map = {
'app': 'app',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.11',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'upgrade',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
});
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
// No umd for router yet
packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' };
// Forms not on rc yet
packages['@angular/forms'] = { main: 'index.js', defaultExtension: 'js' };
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
};
System.config(config);
})(this);
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
<h2>Angular 2 demo: Retreiving delayed route data</h2>
<p>This demos shows how we can use the Safe Navigation Operator to render data
that is retreived asynchronously. Notice how we delayed the data we're fetching and how
it affects the UI.</p>
<hr>
<br>
<router-outlet></router-outlet>
<hr>
<p style="text-align: center;">Brought to you by Team <a href="http://thoughtram.io">thoughtram</a></p>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutes } from './app.routes';
import { ContactsService } from './contacts.service';
import { ContactsListComponent } from './contacts-list.component';
import { ContactsDetailComponent } from './contacts-detail.component';
@NgModule({
imports: [BrowserModule, RouterModule.forRoot(AppRoutes)],
declarations: [AppComponent, ContactsListComponent, ContactsDetailComponent],
bootstrap: [AppComponent],
providers: [ContactsService]
})
export class AppModule {}
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
import { Routes } from '@angular/router';
import { ContactsListComponent } from './contacts-list.component';
import { ContactsDetailComponent } from './contacts-detail.component';
export const AppRoutes: Routes = [
{ path: '', component: ContactsListComponent },
{ path: 'contact/:id', component: ContactsDetailComponent }
];
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
import { Component, OnInit } from '@angular/core';
import { ContactsService } from './contacts.service';
@Component({
selector: 'contacts-list',
template: `
<ul>
<li *ngFor="let contact of contacts | async">
<a [routerLink]="['contact', contact.id]">{{contact.name}}</a>
</li>
</ul>
`
})
export class ContactsListComponent implements OnInit {
contacts: any[];
constructor(private contactsService: ContactsService) {}
ngOnInit() {
this.contacts = this.contactsService.getContacts()
}
}
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ContactsService } from './contacts.service';
@Component({
selector: 'contacts-detail',
template: `
<h2>{{contact?.name}}</h2>
<dl>
<dt>Twitter</dt>
<dd>{{contact?.twitter}}</dd>
</dl>
<p><a routerLink="/">Back to list</a></p>
`
})
export class ContactsDetailComponent implements OnInit {
contact;
constructor(private contactsService: ContactsService, private route: ActivatedRoute) {}
ngOnInit() {
this.contactsService.getContact(this.route.snapshot.params['id'])
.subscribe(contact => this.contact = contact);
}
}
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import * as Rx from 'rxjs';
let contacts = [
{ id: 1, name: 'Pascal Precht', twitter: '@PascalPrecht' },
{ id: 2, name: 'Christoph Burgdorf', twitter: '@cburgdorf' },
{ id: 3, name: 'Thomas Burleson', twitter: '@thomasburleson' },
{ id: 4, name: 'Dominic Elm', twitter: '@elmd_' }
];
@Injectable()
export class ContactsService {
getContacts() {
return Observable.create(observer => {
observer.next(contacts);
})
}
getContact(id) {
return Observable.create(observer => {
setTimeout(() => {
observer.next(contacts.find((contact) => contact.id == id))
}, 3000);
});
}
}
/*
Copyright 2016 thoughtram GmbH. All Rights Reserved.
Use of this source code is governed by an TTML-style license that
can be found in the license.txt file at http://thoughtram.io/license.txt
*/