<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.8/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app>loading...</app>
</body>
</html>
.block {
border: 1px solid rgb(204, 204, 204);
border-radius: 5px;
height: 200px;
min-width: 500px;
padding: 0 10px;
width: 40%;
}
.title{
border-bottom: 1px solid #ccc;
}
h3#title{
margin: 0px;
}
.content{
float: left;
height: 150px;
padding: 10px;
}
#info{
height: 125px;
width: 300px;
}
#button{
border: 1px solid #ccc;
height: 30px;
margin-bottom: 1px;
border-radius: 3px;
height: 25px;
}
#button:hover{
color:#ccc;
background: #f4f4f4;
}
.img{
float: right;
border: 1px solid;
margin: 5px 0px;
width: 170px;
height: 160px;
}
img{
height:160px;
width:170px;
}
a{
text-decoration: none;
color: #000;
}
form br {
margin-bottom: 10px;
}
form input {
width: 100%;
}
form select {
width: 100%;
}
.form_add{
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
width: 400px;
}
### Angular2 Starter Plunker - Typescript - Beta 0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
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: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {ROUTER_PROVIDERS} from 'angular2/router';
bootstrap(App, [ROUTER_PROVIDERS])
.catch(err => console.error(err));
import {Component} from 'angular2/core';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {Content} from "./content/content.component";
import {XmlForm} from "./xml/xml.component";
import {AddForm} from "./add/add.component";
@Component({
selector: 'app',
template: `
<a [routerLink]="['Content']">Список книг</a>
<a [routerLink]="['Add']">Добавить книгу</a>
<a [routerLink]="['Xml']">Импортировать из xml</a>
<router-outlet></router-outlet>
`,
directives:[ROUTER_DIRECTIVES]
})
@RouteConfig([
{ path: '/', component: Content, name: 'Content', useAsDefault:true },
{ path: '/add', component: AddForm, name: 'Add' },
{ path: '/xml', component: XmlForm, name: 'Xml' }
])
export class App {}
//our root app component
import {Component} from 'angular2/core'
import {NgFor} from 'angular2/common';
import {HTTP_BINDINGS, Http} from 'angular2/http';
import {ROUTER_DIRECTIVES} from "angular2/router";
@Component({
selector: 'content',
bindings: [HTTP_BINDINGS],
template: `
<div class="block" *ngFor="#book of books">
<div class="title">
<h3 id="title">{{book.Title}}</h3>
</div>
<div class="content">
<div id="info">
<b>Автор</b><br>
{{book.Author}}<br>
<b>Дата прочтения</b><br>
{{book.DateOfReading}}
</div>
<a href="button_update.php?button={{book.idBook}}" (click)="switchGreeting()">
<div id="button">Прочитал</div>
</a>
</div>
<div class="img">
{{book.Cover}}
</div>
</div>
`,
directives: [NgFor,ROUTER_DIRECTIVES]
})
export class Content {
books: Object[];
constructor(http:Http) {
http.get('books.json').subscribe(res => {
this.books = res.json();
});
}
active:boolean = false;
toggleActiveState() {
this.active = !this.active;
}
}
import {Component} from 'angular2/core'
import {
CORE_DIRECTIVES,
FORM_DIRECTIVES
} from 'angular2/common'
@Component({
selector: 'xml-form',
template: `
<a href="index.php"><div class="block" id="button">Вернуться на главную</div></a>
<div class="block" style="height:117px;">
<div class="title"><h3 id="title">Добавление книги</h3></div>
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
Выберите файл (.xml) для импорта данных в БД
<br>
<input type="file" name="xml_file" accept="text/xml" ngControl="cover"><br>
<button type="submit">Импортировать данные из XML файла</button>
</form>
</div>
`,
directives: [CORE_DIRECTIVES,FORM_DIRECTIVES]
})
export class XmlForm {
constructor() {}
data: string;
onSubmit(data) {}
}
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES,FORM_DIRECTIVES} from 'angular2/common';
import {NgFor} from 'angular2/common';
import {HTTP_BINDINGS, Http} from 'angular2/http';
import {ROUTER_DIRECTIVES} from "angular2/router";
@Component({
selector: 'add-form',
bindings: [HTTP_BINDINGS],
template: `
<a href="index.html">
<div class="block" id="button">Вернуться на главную</div>
</a>
<div class="block" style="height:351px;">
<div class="title"><h3 id="title">Добавление книги</h3></div>
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<b>Автор: </b><br>Введите ФИО автора ("Например: Александр Сергеевич Пушкин"):<br>
<input type="text" ngControl="author"><br>
<b>Название: </b><br>Введите название книги<br>
<input type="text" ngControl="title"><br>
<b>Обложка: </b><br>Загрузите обложку книги (png, jpg)<br>
<input type="file" accept="image/jpeg,image/png" ngControl="cover"><br>
<button type="submit">Отправить</button>
</form>
</div>
`,
directives: [CORE_DIRECTIVES,FORM_DIRECTIVES,NgFor,ROUTER_DIRECTIVES]
})
export class AddForm {
books: Object[];
constructor(http:Http) {
http.get('app/content/content.component.php').subscribe(res => {
this.books = res.json();
});
}
active:boolean = false;
toggleActiveState() {
this.active = !this.active;
}
}
[{
"idBook":"1",
"Title":"\u0421\u043a\u0430\u0437\u043a\u0438",
"Author":"\u041d\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0430",
"Cover":null,
"DateOfReading":"2016-04-02"
},{
"idBook":"2",
"Title":"No title",
"Author":"\u041d\u0435\u0442 \u0430\u0432\u0442\u043e\u0440\u0430",
"Cover":"image",
"DateOfReading":"2016-04-02"
}]