<!DOCTYPE html>
<html>
<html>
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<title>Angular 2 RSS Reader</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<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="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<app>loading...</app>
</body>
</html>
/* Styles go here */
body, input[type=text] {
font-family: "Comic Sans MS", cursive, sans-serif ;
font-size: 14px;
color: #fff;
height: 100%;
background-color: #3F51B5;
padding: 10px;
}
app {
padding: 20px 10px;
border: 1px solid #ddd;
display: block;
}
.feed {
background-color: #fff;
padding: 10px;
color: #777;
margin: 10px;
position: relative;
}
input[type=text] {
padding: 10px 0px 10px 10px;
color: #666;
width: 98%;
margin: 0px 20px 20px 0px;
background-color: #fff;
}
a.button {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 10px 50px;
border: 2px solid #fff;
margin: 0px 0px 20px 5px;
cursor: pointer;
display: inline-block;
}
a.button:hover {
background-color: #2E40A4;
}
.center {
text-align: center;
}
a.remove {
position: absolute;
top: 10px;
right: 10px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
color: #666;
font-size: 150%;
}
a.remove:hover {
color: #f00;
}
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component, Input} from '@angular/core';
import {NgFor} from '@angular/common';
import 'rxjs/add/operator/map';
import {HTTP_PROVIDERS, Http} from '@angular/http';
class FeedService {
private feeds = [
"http://angular-craft.com/feed/",
"https://www.smashingmagazine.com/feed/",
"http://feeds.feedburner.com/thoughtram"
];
getUserFeeds() {
return this.feeds
}
}
@Component({
selector: 'feed',
directives: [NgFor],
template: `
<div class="feed">
<h3>{{data?.title}}</h3>
<h3>{{data?.url}}</h3>
<ul>
<li *ngFor="let entry of data?.entries">
<a href="{{entry.link}}">
{{entry.title}}
</a>
</li>
</ul>
</div>
`
})
class FeedComponent {
@Input() url;
constructor(private http:Http) {
}
ngOnInit() {
console.log("salut");
this.http.get('http://demos.angular-craft.com/rss_service.php?url='+this.url)
.map(res => res.json())
.subscribe(res => {
this.data = res.responseData.feed;
console.log(res);
});
}
}
@Component({
selector: 'dashboard',
template: `
<h3>The dashboard</h3>
<hr>
<div *ngFor="let feed of feeds">
<feed [url]="feed"></feed>
</div>
`,
directives: [FeedComponent, NgFor]
})
class DashboardComponent {
constructor(private feedService: FeedService) {
this.feeds = feedService.getUserFeeds();
}
}
@Component({
selector: 'app',
template: `
<h1>My RSS Reader</h1>
<dashboard></dashboard>
`,
directives: [DashboardComponent]
})
class AppComponent {
}
bootstrap(AppComponent, [HTTP_PROVIDERS, FeedService]);
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.0-alpha.3'; // lock router version
//map tells the System loader where to look for things
var map = {
'app': 'src',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'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' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router-deprecated',
'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: 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' };
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 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
*/
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}