@manhnguyenv

Welcome to my blog!

Angular2

July 22, 2017 23:35

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;

Categories

Recent posts