1) product.model.ts
export class Product{
constructor(
public productId:number,
public productName:string,
public productPrice:number,
public category:string
){
}
}
2) app.component.ts
import { Component, OnInit } from '@angular/core';
import {Product} from './product.model';
@Component({
selector: 'product-data',
templateUrl: './product.html'
})
export class ProductComponent{
product:Product;
products:Array< Product >;
constructor() {
this.product =new Product(0,'',0,'');
this.products = new Array< Product >();
this.products.push(new Product(101,'Laptop',98000,'IT'));
this.products.push(new Product(102,'Desktop',48000,'IT'));
this.products.push(new Product(103,'TV',18000,'Electronics'));
}
save(){
this.products.push(this.product);
}
clear(){
this.product =new Product(0,'',0,'');
}
}
3) product.html
|
<table class="table table-stripped table-bordered">
<tr>
<td>
<table class="table table-stripped table-bordered">
<tr>
<td>Product Id:</td>
<td>
<input type="text"
[(ngModel)]='product.productId'
class="form-control">
</td>
</tr>
<tr>
<td>Product Name:</td>
<td>
<input type="text"
[(ngModel)]='product.productName'
class="form-control">
</td>
</tr>
<tr>
<td>Product Price:</td>
<td>
<input type="text"
[(ngModel)]='product.productPrice'
class="form-control">
</td>
</tr>
<tr>
<td>Category:</td>
<td>
<input type="text"
[(ngModel)]='product.category'
class="form-control">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="clear" (click)="clear()" class="btn btn-default"/>
<input type="button" value="save" (click)="save()" class="btn btn-success"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="table table-stripped table-bordered">
<thead>
<tr>
<td>Product Id</td>
<td>Product Name</td>
<td>Product Price</td>
<td>Product Category</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let p of products">
<td>{{p.productId}}</td>
<td>{{p.productName}}</td>
<td>{{p.productPrice}}</td>
<td>{{p.category}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
|
4) boot.ts
import { NgModule } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { ProductComponent } from './app.component';
@NgModule({
imports: [BrowserModule,FormsModule],
declarations: [ProductComponent],
bootstrap:[ProductComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
5) stdpkgs.ts
import 'rxjs';
import '@angular/core';
import '@angular/common';
import '@angular/compiler';
import '@angular/forms';
import '@angular/http';
import '@angular/router';
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import 'jquery';
import 'bootstrap-loader';
6) polyfills.ts
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
7) webpack.config.js
var webPack = require('webpack');
var htmlWebPack = require('html-webpack-plugin');
var extractTextWebPackPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var config = {
entry:{
'app':'./app/boot.ts',
'libs':'./deps/stdpkgs.ts',
'polyfills':'./deps/polyfills.ts'
},
resolve:{
extensions:['','.ts','.js','css']
},
module:{
loaders:[{
test:/\.ts$/,
loaders:['awesome-typescript-loader','angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.css$/,
exclude: path.resolve('deps', 'app'),
// loader: extractTextWebPackPlugin.extract('style', 'css?sourceMap')
loader:"style-loader!css-loader?root=."
},
{ test: /\.scss$/, loaders: ['style', 'css', 'postcss', 'sass'] },
{ test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url?limit=10000' },
{ test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }
]
},
plugins: [
new webPack.optimize.CommonsChunkPlugin({
name: ['app', 'libs', 'polyfills']
}),
new htmlWebPack({
template: './index.html'
}),
new webPack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
output: {
publicPath: 'http://localhost:9090/',
filename: '[name].js',
},
};
module.exports = config;
