Skip to content

Instantly share code, notes, and snippets.

View tkssharma's full-sized avatar
🎯
only JS

codewithtkssharma tkssharma

🎯
only JS
1k followers · 4 following
View GitHub Profile
@tkssharma
tkssharma / angular 2.0 1
Created June 27, 2016 05:52
class OrderComponent {
@Input() stockSymbol: string;
@Input() quantity: number;
}
class PriceQuoterComponent {
@Output() lastPrice: EventEmitter<IPriceQuote> = new EventEmitter();
...
this.lastPrice.emit(priceQuote)
@tkssharma
tkssharma / angular 2.0 1
Created June 27, 2016 05:52
class AppComponent {
products: Array = [];
constructor(private http: Http) {
this.http.get('/products')
.map(res => res.json())
.subscribe(
data => {
@tkssharma
tkssharma / angular 2.0 1
Created June 27, 2016 05:53
<body>
<app>Loading...</app>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {app: {defaultExtension: 'ts'}}
});
System.import('app');
@tkssharma
tkssharma / ng-2 angular
Created June 27, 2016 06:55
<html>
<head>
<title>Angular2 Http Demo</title>
<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>
@tkssharma
tkssharma / ng-2 angular system config
Created June 27, 2016 06:56
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
@tkssharma
tkssharma / ng-2 angular boot file
Created June 27, 2016 06:56
import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS} from '@angular/http';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
HTTP_PROVIDERS
]);
@tkssharma
tkssharma / ng-2 angular rx js
Created June 27, 2016 06:58
import {Component} from '@angular/core';
import {Http, Response} from '@angular/http';
import {Observable} from 'rxjs/Rx';
@Component({
selector: 'demo-app',
template:`
<h1>Angular2 HTTP Demo App</h1>
<h2>Foods</h2>
<ul>
@tkssharma
tkssharma / ng-2 angular lifecycle
Created June 27, 2016 06:59
ngOnInit() {
this.getFoods();
}
getFoods() {
this.http.get('/app/food.json')
.map((res:Response) => res.json())
.subscribe(
data => { this.foods = data},
err => console.error(err),
@tkssharma
tkssharma / ng-2 angular lifecycle
Created June 27, 2016 07:00
ngOnInit() {
...
this.getBooksAndMovies(); // <-- add this line
}
getBooksAndMovies() {
Observable.forkJoin(
this.http.get('/app/books.json').map((res:Response) => res.json()),
this.http.get('/app/movies.json').map((res:Response) => res.json())
).subscribe(
@tkssharma
tkssharma / ng-2 angular lifecycle
Created June 27, 2016 07:00
import {Observable} from 'rxjs/Rx';
@Injectable()
export class DemoService {
constructor(private http:Http) { }
// Uses http.get() to load a single JSON file
getFoods() {
return this.http.get('/app/food.json').map((res:Response) => res.json());