<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
### Angular Starter Plunker - Typescript
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './app',
'@angular/core': 'npm:@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',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
'@ngx-translate/core': 'npm:@ngx-translate/core/bundles/core.umd.js',
'@ngx-translate/http-loader': 'npm:@ngx-translate/http-loader/bundles/http-loader.umd.js',
'ng2-cookies':'npm:ng2-cookies/',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FlexLayoutModule } from "@angular/flex-layout";
import { MaterialModule } from "@angular/material";
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';
import {RouterModule } from '@angular/router';
import { AppComponent} from './app.component';
import { GridComponent } from './components/list/grid.component';
import {NaujaiGautiComponent } from './components/freshgetbooks/freshget.component';
import {kalbuNuorodosComponent } from './kalbuNuorodos.component';
@NgModule({
// imports: [ BrowserModule,CommonModule ,MaterialModule.forRoot(),FlexLayoutModule.forRoot()],
imports: [
BrowserModule, FormsModule, HttpModule, MaterialModule.forRoot(), FlexLayoutModule.forRoot(),
RouterModule.forRoot([
{ path:'laikotarpiai/:laikID', component:NaujaiGautiComponent}
])
],
declarations: [AppComponent,GridComponent,NaujaiGautiComponent,kalbuNuorodosComponent],
bootstrap: [AppComponent],
// entryComponents: [DialogContent]
})
export class AppModule { }
import { Component,Optional } from "@angular/core";
import { HttpService } from '../../services/http.service.component';
import { Router,Routes,RouterModule } from "@angular/router";
import {BooksID } from '../../services/books.component';
@Component({
selector: 'list',
template: `<md-list>
<h3 md-subheader>my books:</h3>
<md-list-item *ngFor="let ats of atsakymas">
<a [routerLink]="['/laikotarpiai',ats.laikID]">{{ats.laikName}}</a>
</md-list-item>
</md-list>
`,
providers:[HttpService,BooksID]
})
export class GridComponent {
atsakymas: any;
constructor(private http: HttpService,private router:Router,private books:BooksID) {
this.atsakymas = books.getBooks();
}
}
import { Component,OnInit,OnDestroy } from '@angular/core';
import { Params,ActivatedRoute } from '@angular/router';
import { HttpService } from '../../services/http.service.component';
import { Subscription } from 'rxjs';
import {Books } from '../../services/Books';
@Component({
template:`<md-list>
<h3 md-subheader>book desc.:</h3>
{{ats}}
</md-list>`,
selector: 'laikotarpiai',
providers:[HttpService,Books]
})
//export class NaujaiGautiComponent implements OnInit,OnDestroy {
export class NaujaiGautiComponent implements OnInit {
//export class NaujaiGautiComponent {
atsakymas: any;
ats: string;
constructor(private http: HttpService,private activatedRoute:ActivatedRoute,private books:Books) {
}
ngOnInit(): void {
this.atsakymas = this.books.getBook(this.activatedRoute.snapshot.params['laikID']);
this.ats = JSON.stringify(this.atsakymas);
}
//ngOnDestroy() { this.subscribas.unsubscribe();}
}
export class Book {
leidAprasas: string; leidID: string; leidISBN: string;leidSysNr:string
}
export class BooksMeta {
laikID: string; laikPavadinimas: string;
}
import { Injectable } from '@angular/core';
import { BooksMeta} from './bookMeta';
@Injectable()
export class BooksID {
private books: BooksMeta[] = [
{ laikID: "24", laikName: "Book1" },
{ laikID: "25", laikName: "Book2" },
{ laikID: "26", laikName: "Book3" },
{ laikID: "27", laikName: "Book4" },
];
getBooks(): BooksMeta[] { return this.books;}
}
import {Injectable } from '@angular/core';
import { Book } from './book';
@Injectable()
export class Books {
books: Book[] = [
{ leidAprasas: "ap1", leidID: "24", leidISBN: "1111", leidSysNr: "11111" },
{ leidAprasas: "ap1", leidID: "25", leidISBN: "2222", leidSysNr: "22222" },
{ leidAprasas: "ap1", leidID: "26", leidISBN: "3333", leidSysNr: "33333" },
{ leidAprasas: "ap1", leidID: "27", leidISBN: "4444", leidSysNr: "44444" },
]
getBook(id:string): Book {
return this.books.find(xxx => xxx.leidID == id);
}
}
// leidAprasas: string; leidID: string; leidISBN: string;leidSysNr:string
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
@Injectable()
export class HttpService {
constructor(private http: Http) {
}
// URL- tai API
_get(url: string) { return this.http.get(url).map(response => response.json()); }
}
import { Component, Optional } from '@angular/core';
@Component({
selector: 'my-app',
// template: `<h1>Hello {{name}}</h1>`,
template: `
<table style="width:100%;table-layout:fixed;">
<tr><td><langLink></langLink></td><td>df</td><td>df</td></tr>
<tr><td><list></list></td><td style="width:900px;word-wrap:break-word;"><router-outlet></router-outlet></td><td>df</td></tr>
<tr><td>df</td><td>df</td><td>df</td></tr>
</table>
`
})
export class AppComponent {
// name = 'BUS developers :)';
atsakymas: any;
langBtns=`
<a href="#" (click)="translate.use('lt')">LT</a>
<a href="#" (click)="translate.use('en')">EN</a>
`
}
import { Component} from "@angular/core";
import { TranslateService } from '@ngx-translate/core';
import { Cookie } from 'ng2-cookies';
@Component({
selector: 'langLink',
templateUrl: '../app/langLink.component.html',
})
export class langLinkComponent {
constructor(private translate: TranslateService) {
translate.addLangs(["en", "lt"]);
translate.setDefaultLang('lt');
var kalba= Cookie.get("kalba");
translate.use(kalba);
// let browserLang = translate.getBrowserLang();
// console.log(browserLang);
}
translateUse(kalba:string): void {
this.translate.use(kalba);
Cookie.set("kalba", kalba);
}
}
<a href="#" (click)="translateUse('lt')">LT</a>
<a href="#" (click)="translateUse('en')">EN</a>
import { Component} from "@angular/core";
import { TranslateService } from '@ngx-translate/core';
import {Cookie } from 'ng2-cookies';
@Component({
selector: 'langLink',
templateUrl: '../app/kalbuNuorodos.component.html',
})
export class kalbuNuorodosComponent {
constructor(private translate: TranslateService) {
translate.setTranslation("en", {
"NAMAI": {
"PASISVEIKINIMAS": "Hello",
"NAUJAIGAUTILEIDINIAI": "New books",
"PASIRINKITEKALBA": "Choose language"
}
});
translate.setTranslation("lt", {
"NAMAI": {
"PASISVEIKINIMAS": "Labas",
"NAUJAIGAUTILEIDINIAI": "Naujos knygos",
"PASIRINKITEKALBA": "Pasirinkite kalba"
}
});
translate.addLangs(["en", "lt"]);
translate.setDefaultLang('lt');
var kalba= Cookie.get("kalba");
translate.use(kalba);
// let browserLang = translate.getBrowserLang();
// console.log(browserLang);
}
translateUse(kalba:string): void {
this.translate.use(kalba);
Cookie.set("kalba", kalba);
}
}
{{'NAMAI.PASIRINKITEKALBA' | translate}}
<a href="#" (click)="translateUse('lt')">LT</a>
<a href="#" (click)="translateUse('en')">EN</a>