Skip to content

Commit 7467b97

Browse files
idevNidevN
committed
upto section6
understanding more about ng2
1 parent 0c6d8ad commit 7467b97

9 files changed

+243
-35
lines changed

Diff for: ‎APM-Final/package.json

+13-12
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,25 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^4.0.0",
16-
"@angular/common": "^4.0.0",
17-
"@angular/compiler": "^4.0.0",
18-
"@angular/core": "^4.0.0",
19-
"@angular/forms": "^4.0.0",
20-
"@angular/http": "^4.0.0",
21-
"@angular/platform-browser": "^4.0.0",
22-
"@angular/platform-browser-dynamic": "^4.0.0",
23-
"@angular/router": "^4.0.0",
15+
"@angular/animations": "^4.2.4",
16+
"@angular/common": "^4.2.4",
17+
"@angular/compiler": "^4.2.4",
18+
"@angular/compiler-cli": "^4.4.4",
19+
"@angular/core": "^4.2.4",
20+
"@angular/forms": "^4.2.4",
21+
"@angular/http": "^4.2.4",
22+
"@angular/platform-browser": "^4.2.4",
23+
"@angular/platform-browser-dynamic": "^4.2.4",
24+
"@angular/router": "^4.2.4",
2425
"bootstrap": "^3.3.7",
2526
"core-js": "^2.4.1",
2627
"rxjs": "^5.4.1",
2728
"zone.js": "^0.8.14"
2829
},
2930
"devDependencies": {
30-
"@angular/cli": "1.2.4",
31-
"@angular/compiler-cli": "^4.0.0",
32-
"@angular/language-service": "^4.0.0",
31+
"@angular/cli": "1.4.2",
32+
"@angular/compiler-cli": "^4.2.4",
33+
"@angular/language-service": "^4.2.4",
3334
"@types/jasmine": "~2.5.53",
3435
"@types/jasminewd2": "~2.0.2",
3536
"@types/node": "~6.0.60",

Diff for: ‎APM-Start/package.json

+13-12
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,25 @@
1212
},
1313
"private": true,
1414
"dependencies": {
15-
"@angular/animations": "^4.0.0",
16-
"@angular/common": "^4.0.0",
17-
"@angular/compiler": "^4.0.0",
18-
"@angular/core": "^4.0.0",
19-
"@angular/forms": "^4.0.0",
20-
"@angular/http": "^4.0.0",
21-
"@angular/platform-browser": "^4.0.0",
22-
"@angular/platform-browser-dynamic": "^4.0.0",
23-
"@angular/router": "^4.0.0",
15+
"@angular/animations": "^4.2.4",
16+
"@angular/common": "^4.2.4",
17+
"@angular/compiler": "^4.2.4",
18+
"@angular/compiler-cli": "^4.4.4",
19+
"@angular/core": "^4.2.4",
20+
"@angular/forms": "^4.2.4",
21+
"@angular/http": "^4.2.4",
22+
"@angular/platform-browser": "^4.2.4",
23+
"@angular/platform-browser-dynamic": "^4.2.4",
24+
"@angular/router": "^4.2.4",
2425
"bootstrap": "^3.3.7",
2526
"core-js": "^2.4.1",
2627
"rxjs": "^5.4.1",
2728
"zone.js": "^0.8.14"
2829
},
2930
"devDependencies": {
30-
"@angular/cli": "1.2.4",
31-
"@angular/compiler-cli": "^4.0.0",
32-
"@angular/language-service": "^4.0.0",
31+
"@angular/cli": "1.4.2",
32+
"@angular/compiler-cli": "^4.2.4",
33+
"@angular/language-service": "^4.2.4",
3334
"@types/jasmine": "~2.5.53",
3435
"@types/jasminewd2": "~2.0.2",
3536
"@types/node": "~6.0.60",

Diff for: ‎APM-Start/src/app/app.component.ts

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Component } from '@angular/core';
1+
import {Component} from '@angular/core'
22

33
@Component({
4-
selector: 'pm-root',
5-
templateUrl: './app.component.html',
6-
styleUrls: ['./app.component.css']
4+
selector:'pm-root',
5+
template:`<div>
6+
<h1>{{pageTitle}}</h1>
7+
<pm-products></pm-products></div>`
78
})
8-
export class AppComponent {
9-
title = 'Angular: Getting Started';
10-
}
9+
10+
export class AppComponent{
11+
pageTitle:string="Acme Management"
12+
}

Diff for: ‎APM-Start/src/app/app.module.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
3+
import { FormsModule} from '@angular/forms'
44
import { AppComponent } from './app.component';
5-
5+
import {ProductListComponent} from './products/product-list.component';
6+
import {ProductFilterPipe} from './products/product-filter-pipe'
67
@NgModule({
78
declarations: [
8-
AppComponent
9+
AppComponent,
10+
ProductListComponent,
11+
ProductFilterPipe
912
],
1013
imports: [
11-
BrowserModule
14+
BrowserModule,
15+
FormsModule
1216
],
1317
providers: [],
1418
bootstrap: [AppComponent]
1519
})
20+
1621
export class AppModule { }

Diff for: ‎APM-Start/src/app/products/product-filter-pipe.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {PipeTransform, Pipe} from '@angular/core';
2+
import {IProduct} from './product';
3+
4+
5+
@Pipe({
6+
7+
name:'productFilter' // name of pipe
8+
})
9+
export class ProductFilterPipe implements PipeTransform {
10+
transform(value: IProduct[], filterBy:string):IProduct[]{
11+
12+
filterBy=filterBy?filterBy.toLocaleLowerCase():null;
13+
14+
return filterBy ? value.filter((product: IProduct)=>
15+
product.productName.toLocaleLowerCase().indexOf(filterBy)!==-1):value;
16+
}
17+
}

Diff for: ‎APM-Start/src/app/products/product-list.component.css

Whitespace-only changes.

Diff for: ‎APM-Start/src/app/products/product-list.component.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<div class="panel panel-primary">
2+
<div class="panel-heading">
3+
{{pageTitle}}
4+
</div>
5+
<div class="panel-body">
6+
<div class="row">
7+
<div class="col-md-2">Filter by</div>
8+
<div class="col-md-4">
9+
<input type="text" name="" id="" [(ngModel)]="listFilter"/>
10+
</div>
11+
</div>
12+
<div class="row">
13+
<div class="col-md-6">
14+
<h3>Filtered by: {{listFilter}}</h3>
15+
</div>
16+
</div>
17+
<div class="table-responsive">
18+
<table class="table" *ngIf='products && products.length'>
19+
<thead>
20+
<tr>
21+
<th>
22+
<button class="btn btn-primary"
23+
(click)="toggleImage()">
24+
{{showImage?"Hide ":"Show "}}Image
25+
</button>
26+
</th>
27+
<th>Products</th>
28+
<th>Code</th>
29+
<th>Available</th>
30+
<th>Price</th>
31+
<th>5 Star Rating</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
<tr *ngFor="let product of products | productFilter:listFilter">
36+
37+
<td><img *ngIf="showImage" [src]='product.imageUrl' [title]='product.productName'
38+
[style.width.px]='imageWidth'
39+
[style.margin.px]='imageMargin'></td> <!-- property binding -->
40+
<td>{{product.productName}}</td>
41+
<td>{{product.productCode}}</td>
42+
<td>{{product.releaseDate}}</td>
43+
<td>{{product.price | currency:'USD':true:'1.2-2' | lowercase}}</td>
44+
<td>{{product.starRating}}</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
</div>
49+
</div>
50+
51+
</div>

Diff for: ‎APM-Start/src/app/products/product-list.component.ts

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import {Component,OnInit} from '@angular/core'
2+
import {IProduct} from './product'
3+
@Component({
4+
selector:'pm-products',
5+
moduleId:module.id, //use for component relative path
6+
templateUrl:'./product-list.component.html',
7+
styleUrls:['./product-list.component.css']
8+
})
9+
10+
export class ProductListComponent implements OnInit{
11+
12+
13+
/*
14+
15+
basic lifecycle hooks
16+
OnInit ngOnInit()
17+
OnChanges
18+
OnDestroy
19+
20+
implement lifecycle interface
21+
*/
22+
23+
pageTitle:string="Product List";
24+
imageWidth:number=50;
25+
imageMargin:number=2;
26+
showImage:boolean=false;
27+
listFilter:string='cart';
28+
products:IProduct[]=[
29+
{
30+
"productId": 1,
31+
"productName": "Leaf Rake",
32+
"productCode": "GDN-0011",
33+
"releaseDate": "March 19, 2016",
34+
"description": "Leaf rake with 48-inch wooden handle.",
35+
"price": 19.95,
36+
"starRating": 3.2,
37+
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
38+
},
39+
{
40+
"productId": 2,
41+
"productName": "Garden Cart",
42+
"productCode": "GDN-0023",
43+
"releaseDate": "March 18, 2016",
44+
"description": "15 gallon capacity rolling garden cart",
45+
"price": 32.99,
46+
"starRating": 4.2,
47+
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
48+
},
49+
{
50+
"productId": 5,
51+
"productName": "Hammer",
52+
"productCode": "TBX-0048",
53+
"releaseDate": "May 21, 2016",
54+
"description": "Curved claw steel hammer",
55+
"price": 8.9,
56+
"starRating": 4.8,
57+
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
58+
},
59+
{
60+
"productId": 8,
61+
"productName": "Saw",
62+
"productCode": "TBX-0022",
63+
"releaseDate": "May 15, 2016",
64+
"description": "15-inch steel blade hand saw",
65+
"price": 11.55,
66+
"starRating": 3.7,
67+
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
68+
},
69+
{
70+
"productId": 10,
71+
"productName": "Video Game Controller",
72+
"productCode": "GMG-0042",
73+
"releaseDate": "October 15, 2015",
74+
"description": "Standard two-button video game controller",
75+
"price": 35.95,
76+
"starRating": 4.6,
77+
"imageUrl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
78+
}
79+
];
80+
81+
toggleImage(): void
82+
{
83+
this.showImage=!this.showImage;
84+
}
85+
86+
ngOnInit():void {
87+
console.log("init")
88+
}
89+
90+
91+
//interface for custom types, we can use interface as data type
92+
93+
94+
95+
96+
97+
}

Diff for: ‎APM-Start/src/app/products/product.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
export interface IProduct {
2+
productId:number;
3+
productName:string;
4+
productCode:string;
5+
releaseDate:string;
6+
description:string;
7+
price:number;
8+
starRating:number;
9+
imageUrl:string
10+
}
11+
12+
//make class that implements the interface
13+
14+
export class Product implements IProduct {
15+
16+
constructor(
17+
public productId:number,
18+
public productName:string,
19+
public productCode:string,
20+
public releaseDate:string,
21+
public description:string,
22+
public price:number,
23+
public starRating:number,
24+
public imageUrl:string
25+
26+
){};
27+
28+
calculateDiscount(percent: number): number {
29+
return this.price - (this.price*percent/100);
30+
}
31+
32+
33+
34+
}

0 commit comments

Comments
 (0)