Add blogging app

keep-around/dc735e80914fa50c9bca8f6c78c100b7ed19408f
Florian Hartwich 2017-02-27 01:44:23 +01:00
parent c8587fe521
commit 4ee4b5442b
32 changed files with 577 additions and 0 deletions

View File

@ -0,0 +1,11 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {AppComponent} from './blog/app.component';
import {BlogEntryComponent} from './blog/blog-entry.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, BlogEntryComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

View File

@ -0,0 +1,25 @@
<h1>Mein Angular-Blog</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Blog-Eintrag erstellen</h2>
<div class="form">
<div class="control">
<label for="title">Titel:</label>
<input type="text" id="title" #title />
</div>
<div class="control">
<label for="title">Bild-URL:</label>
<input type="text" id="image" #image />
</div>
<div class="control">
<label for="text">Text:</label>
<textarea id="text" cols="20" rows="3" #text>
</textarea>
</div>
<div>
<button (click)="createBlogEntry(title.value, image.value, text.value)">
Blog-Eintrag anlegen
</button>
</div>
</div>

View File

@ -0,0 +1,29 @@
import {Component} from '@angular/core';
import {initialEntries} from './initialEntries';
import {BlogEntry} from './blog-entry';
@Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
entries: BlogEntry[] = [];
constructor() {
this.entries = [];
this.entries = initialEntries
}
createBlogEntry(title:string, image:string, text:string) {
console.log(title, image, text);
let entry = new BlogEntry();
entry.title = title;
entry.image = image;
entry.text = text;
this.entries.push(entry);
}
}

View File

@ -0,0 +1,9 @@
<div class="blog-entry">
<div class="blog-image">
<img [src]="entry.image" [alt]="entry.title"/>
</div>
<div class="blog-summary">
<span class="title">{{entry.title}}</span>
<p> {{entry.text}}</p>
</div>
</div>

View File

@ -0,0 +1,11 @@
import {Component, Input} from '@angular/core';
import {BlogEntry} from './blog-entry';
@Component({
moduleId: module.id,
selector: 'app-blog-entry',
templateUrl: 'blog-entry.component.html'
})
export class BlogEntryComponent {
@Input() entry: BlogEntry;
}

View File

@ -0,0 +1,5 @@
export class BlogEntry {
title: string;
text: string;
image: string;
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,4 @@
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

26
blog-complete/dist/app.module.js vendored Normal file
View File

@ -0,0 +1,26 @@
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var platform_browser_1 = require("@angular/platform-browser");
var app_component_1 = require("./blog/app.component");
var blog_entry_component_1 = require("./blog/blog-entry.component");
var AppModule = (function () {
function AppModule() {
}
return AppModule;
}());
AppModule = __decorate([
core_1.NgModule({
imports: [platform_browser_1.BrowserModule],
declarations: [app_component_1.AppComponent, blog_entry_component_1.BlogEntryComponent],
bootstrap: [app_component_1.AppComponent]
})
], AppModule);
exports.AppModule = AppModule;
//# sourceMappingURL=app.module.js.map

1
blog-complete/dist/app.module.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"app.module.js","sourceRoot":"","sources":["../app/app.module.ts"],"names":[],"mappings":";;;;;;;;AAAA,sCAA8C;AAC9C,8DAA0D;AAC1D,sDAAkD;AAClD,oEAA+D;AAO/D,IAAa,SAAS;IAAtB;IAAyB,CAAC;IAAD,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,SAAS;IALrB,eAAQ,CAAC;QACR,OAAO,EAAE,CAAE,gCAAa,CAAE;QAC1B,YAAY,EAAE,CAAE,4BAAY,EAAE,yCAAkB,CAAE;QAClD,SAAS,EAAE,CAAE,4BAAY,CAAE;KAC5B,CAAC;GACW,SAAS,CAAI;AAAb,8BAAS"}

View File

@ -0,0 +1,25 @@
<h1>Mein Angular-Blog</h1>
<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
<h2>Neuen Blog-Eintrag erstellen</h2>
<div class="form">
<div class="control">
<label for="title">Titel:</label>
<input type="text" id="title" #title />
</div>
<div class="control">
<label for="title">Bild-URL:</label>
<input type="text" id="image" #image />
</div>
<div class="control">
<label for="text">Text:</label>
<textarea id="text" cols="20" rows="3" #text>
</textarea>
</div>
<div>
<button (click)="createBlogEntry(title.value, image.value, text.value)">
Blog-Eintrag anlegen
</button>
</div>
</div>

View File

@ -0,0 +1,40 @@
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var initialEntries_1 = require("./initialEntries");
var blog_entry_1 = require("./blog-entry");
var AppComponent = (function () {
function AppComponent() {
this.entries = [];
this.entries = [];
this.entries = initialEntries_1.initialEntries;
}
AppComponent.prototype.createBlogEntry = function (title, image, text) {
console.log(title, image, text);
var entry = new blog_entry_1.BlogEntry();
entry.title = title;
entry.image = image;
entry.text = text;
this.entries.push(entry);
};
return AppComponent;
}());
AppComponent = __decorate([
core_1.Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html'
}),
__metadata("design:paramtypes", [])
], AppComponent);
exports.AppComponent = AppComponent;
//# sourceMappingURL=app.component.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"app.component.js","sourceRoot":"","sources":["../../app/blog/app.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAAwC;AACxC,mDAAgD;AAChD,2CAAuC;AAOvC,IAAa,YAAY;IAIvB;QAFA,YAAO,GAAgB,EAAE,CAAC;QAGxB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,+BAAc,CAAA;IAC/B,CAAC;IAED,sCAAe,GAAf,UAAgB,KAAY,EAAE,KAAY,EAAE,IAAW;QACrD,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAChC,IAAI,KAAK,GAAG,IAAI,sBAAS,EAAE,CAAC;QAC5B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IACH,mBAAC;AAAD,CAAC,AAlBD,IAkBC;AAlBY,YAAY;IALxB,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,oBAAoB;KAClC,CAAC;;GACW,YAAY,CAkBxB;AAlBY,oCAAY"}

View File

@ -0,0 +1,9 @@
<div class="blog-entry">
<div class="blog-image">
<img [src]="entry.image" [alt]="entry.title"/>
</div>
<div class="blog-summary">
<span class="title">{{entry.title}}</span>
<p> {{entry.text}}</p>
</div>
</div>

View File

@ -0,0 +1,31 @@
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var blog_entry_1 = require("./blog-entry");
var BlogEntryComponent = (function () {
function BlogEntryComponent() {
}
return BlogEntryComponent;
}());
__decorate([
core_1.Input(),
__metadata("design:type", blog_entry_1.BlogEntry)
], BlogEntryComponent.prototype, "entry", void 0);
BlogEntryComponent = __decorate([
core_1.Component({
moduleId: module.id,
selector: 'app-blog-entry',
templateUrl: 'blog-entry.component.html'
})
], BlogEntryComponent);
exports.BlogEntryComponent = BlogEntryComponent;
//# sourceMappingURL=blog-entry.component.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"blog-entry.component.js","sourceRoot":"","sources":["../../app/blog/blog-entry.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAA+C;AAC/C,2CAAuC;AAOvC,IAAa,kBAAkB;IAA/B;IAEA,CAAC;IAAD,yBAAC;AAAD,CAAC,AAFD,IAEC;AADU;IAAR,YAAK,EAAE;8BAAQ,sBAAS;iDAAC;AADf,kBAAkB;IAL9B,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,gBAAgB;QAC1B,WAAW,EAAE,2BAA2B;KACzC,CAAC;GACW,kBAAkB,CAE9B;AAFY,gDAAkB"}

9
blog-complete/dist/blog/blog-entry.js vendored Normal file
View File

@ -0,0 +1,9 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var BlogEntry = (function () {
function BlogEntry() {
}
return BlogEntry;
}());
exports.BlogEntry = BlogEntry;
//# sourceMappingURL=blog-entry.js.map

View File

@ -0,0 +1 @@
{"version":3,"file":"blog-entry.js","sourceRoot":"","sources":["../../app/blog/blog-entry.ts"],"names":[],"mappings":";;AAAA;IAAA;IAIA,CAAC;IAAD,gBAAC;AAAD,CAAC,AAJD,IAIC;AAJY,8BAAS"}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1 @@
{"version":3,"file":"initialEntries.js","sourceRoot":"","sources":["../../app/blog/initialEntries.ts"],"names":[],"mappings":";;AAAW,QAAA,cAAc,GAAG;IAC1B;QACE,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,4kLAA4kL;QACnlL,IAAI,EAAE,qFAAqF;KAC5F;IACD;QACE,KAAK,EAAE,uDAAuD;QAC9D,KAAK,EAAE,wEAAwE;QAC/E,IAAI,EAAE,0KAA0K;KACjL;CACF,CAAA"}

6
blog-complete/dist/main.js vendored Normal file
View File

@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);
//# sourceMappingURL=main.js.map

1
blog-complete/dist/main.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"main.js","sourceRoot":"","sources":["../app/main.ts"],"names":[],"mappings":";;AAAA,8EAAyE;AACzE,2CAAuC;AAEvC,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"}

BIN
blog-complete/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

25
blog-complete/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Hallo Angular</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root>Die Applikation wird geladen...</app-root>
</body>
<!-- Polyfill(s) für ältere Browser -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</html>

View File

@ -0,0 +1,68 @@
// Karma configuration
// Generated on Sat Feb 25 2017 12:32:32 GMT+0100 (CET)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}

View File

@ -0,0 +1,52 @@
{
"name": "blog-app",
"version": "1.0.0",
"description": "Blog Applikation",
"watch": {
"copy:html": "./app/**/*.html"
},
"scripts": {
"start": "tsc && npm run copy:html && concurrently \"npm run tsc:w\" \"npm run html:watch\" \"live-server\" ",
"tsc": "./node_modules/.bin/tsc",
"tsc:w": "./node_modules/.bin/tsc --watch",
"copy:html": "copyfiles -u 1 ./app/**/*.html dist",
"html:watch": "onchange \"./app/**/*.html\" -v -- npm run copy:html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@angular/common": "2.4.3",
"@angular/compiler": "2.4.3",
"@angular/core": "2.4.3",
"@angular/forms": "2.4.3",
"@angular/http": "2.4.3",
"@angular/platform-browser": "2.4.3",
"@angular/platform-browser-dynamic": "2.4.3",
"systemjs": "0.19.27",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.3",
"zone.js": "^0.7.0",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"canonical-path": "0.0.2",
"concurrently": "^2.2.0",
"copyfiles": "^1.0.0",
"http-server": "^0.9.0",
"jasmine": "^2.5.3",
"jasmine-core": "^2.5.2",
"karma": "^1.5.0",
"karma-jasmine": "^1.1.0",
"live-server": "^1.1.0",
"lodash": "^4.11.1",
"npm-watch": "^0.1.6",
"onchange": "^3.0.2",
"rimraf": "^2.5.2",
"tslint": "^3.7.4",
"typescript": "^2.0.2",
"typings": "^1.0.4"
},
"repository": {}
}

65
blog-complete/styles.css Normal file
View File

@ -0,0 +1,65 @@
body {
font-family: Helvetica;
padding-left: 15px;
}
.form {
background-color: #eee;
width: 580px; /* Breite des Formulars */
padding: 20px;
border: 1px solid #8c8c8c;
position: absolute;
margin-bottom: 25px;
}
.control {
display: flex;
}
label {
width: 100px;
cursor: pointer;
}
input,
textarea {
width: 550px;
border: 1px solid #8c8c8c;
margin-bottom: 1em;
}
span.title {
font-size: x-large;
}
.clear-fix {
clear: both;
}
.blog-entry {
width: 600px;
display: flex;
padding-bottom: 30px;
}
button {
float: right;
padding-right: 20px;
}
.blog-image {
width: 30%;
}
img {
max-width: 90%;
max-height: 100px;
}
.blog-summary {
width: 70%;
}
textarea {
height: 7em;
}

View File

@ -0,0 +1,61 @@
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'dist',
// angular bundles
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
map: {
'app': 'dist', // Kompilierte Anwendung liegt im dist-Verzeichnis
'@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
'rxjs': 'node_modules/rxjs',
},
packages: {
app: { main: './main.js', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
}
});

View File

@ -0,0 +1,18 @@
{
"compilerOptions": {
"outDir": "dist",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"lib": [
"es6",
"dom"
],
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}

1
blog-complete/typings.d.ts vendored Normal file
View File

@ -0,0 +1 @@
declare var module: any;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

View File

@ -43,6 +43,20 @@
"state": "IN_PROGRESS", "state": "IN_PROGRESS",
"title": "New Task", "title": "New Task",
"id": 7 "id": 7
},
{
"assignee": {},
"tags": [],
"state": "IN_PROGRESS",
"title": "New Task 1487974284967",
"id": 8
},
{
"assignee": {},
"tags": [],
"state": "IN_PROGRESS",
"title": "New Task",
"id": 9
} }
] ]
} }