diff --git a/APM - Final Updated/app/app.component.ts b/APM - Final Updated/app/app.component.ts index e4f2bdf37d016eff9b0f5efba84ebe2f6ee94d28..f0b48d03f3d1b5a0257d51ba2a5de1b10627b7be 100644 --- a/APM - Final Updated/app/app.component.ts +++ b/APM - Final Updated/app/app.component.ts @@ -1,12 +1,8 @@ import { Component } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; -import 'rxjs/Rx'; // Load all features -import { ROUTER_PROVIDERS, Routes, ROUTER_DIRECTIVES } from '@angular/router'; +import { ROUTER_DIRECTIVES } from '@angular/router'; -import { ProductListComponent } from './products/product-list.component'; import { ProductService } from './products/product.service'; -import { WelcomeComponent } from './home/welcome.component'; -import { ProductDetailComponent } from './products/product-detail.component'; @Component({ selector: 'pm-app', @@ -28,15 +24,9 @@ import { ProductDetailComponent } from './products/product-detail.component'; `, directives: [ROUTER_DIRECTIVES], providers: [ProductService, - HTTP_PROVIDERS, - ROUTER_PROVIDERS] + HTTP_PROVIDERS] }) -@Routes([ - { path: '/', component: WelcomeComponent }, - { path: '/welcome', component: WelcomeComponent }, - { path: '/products', component: ProductListComponent }, - { path: '/product/:id', component: ProductDetailComponent } -]) + export class AppComponent { pageTitle: string = 'Acme Product Management'; } diff --git a/APM - Final Updated/app/app.routes.ts b/APM - Final Updated/app/app.routes.ts new file mode 100644 index 0000000000000000000000000000000000000000..a39914c71f9efa815b3ff343bb8f20454172ee20 --- /dev/null +++ b/APM - Final Updated/app/app.routes.ts @@ -0,0 +1,14 @@ +import { provideRouter, RouterConfig } from '@angular/router'; + +import { WelcomeComponent } from './home/welcome.component'; +import { ProductRoutes } from './products/product.routes'; + +export const routes: RouterConfig = [ + { path: '', redirectTo: '/welcome', pathMatch: 'full'}, + { path: 'welcome', component: WelcomeComponent }, + ...ProductRoutes +]; + +export const APP_ROUTER_PROVIDERS = [ + provideRouter(routes) +]; diff --git a/APM - Final Updated/app/main.ts b/APM - Final Updated/app/main.ts index cf71e662110cdc65b42b4e02222e715939604e26..aebcd047b13aa2ed7d02ee761ec0e60a395dafaa 100644 --- a/APM - Final Updated/app/main.ts +++ b/APM - Final Updated/app/main.ts @@ -1,6 +1,12 @@ -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { bootstrap } from '@angular/platform-browser-dynamic'; // Our main component import { AppComponent } from './app.component'; -bootstrap(AppComponent); +// Our main routes +import { APP_ROUTER_PROVIDERS } from './app.routes'; + +bootstrap(AppComponent, [ + APP_ROUTER_PROVIDERS +]) +.catch(err => console.error(err)); diff --git a/APM - Final Updated/app/products/product-detail.component.html b/APM - Final Updated/app/products/product-detail.component.html index 4aaaa3e6b756f230903b767660ce2239de77efb4..42946cd512680a5aac18d3ff3cb9ea7cb31b6eb1 100644 --- a/APM - Final Updated/app/products/product-detail.component.html +++ b/APM - Final Updated/app/products/product-detail.component.html @@ -29,7 +29,9 @@ <div class='row'> <div class='col-md-3'>5 Star Rating:</div> <div class='col-md-6'> - <ai-star [rating]='product.starRating'></ai-star> + <ai-star [rating]='product.starRating' + (ratingClicked)='onRatingClicked($event)'> + </ai-star> </div> </div> </div> diff --git a/APM - Final Updated/app/products/product-detail.component.ts b/APM - Final Updated/app/products/product-detail.component.ts index ef39749d1beb31d246b847c6fe80d361d4ec4104..18df2d25f092cf1020f8933c7ee59ddb32b063a7 100644 --- a/APM - Final Updated/app/products/product-detail.component.ts +++ b/APM - Final Updated/app/products/product-detail.component.ts @@ -1,5 +1,5 @@ -import { Component } from '@angular/core'; -import { Router, OnActivate, RouteSegment } from '@angular/router'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; import { IProduct } from './product'; import { ProductService } from './product.service'; @@ -9,29 +9,40 @@ import { StarComponent } from '../shared/star.component'; templateUrl: 'app/products/product-detail.component.html', directives: [StarComponent] }) -export class ProductDetailComponent implements OnActivate { +export class ProductDetailComponent implements OnInit, OnDestroy { pageTitle: string = 'Product Detail'; product: IProduct; errorMessage: string; + private sub: any; - constructor(private _productService: ProductService, - private _router: Router) { + constructor(private route: ActivatedRoute, + private router: Router, + private _productService: ProductService) { } - routerOnActivate(curr: RouteSegment): void { - let id = +curr.getParam('id'); - this.getProduct(id); + ngOnInit(): void { + this.sub = this.route.params.subscribe( + params => { + let id = +params['id']; + this.getProduct(id); + }); + } + + ngOnDestroy() { + this.sub.unsubscribe(); } getProduct(id: number) { - this._productService.getProduct(id) - .subscribe( + this._productService.getProduct(id).subscribe( product => this.product = product, error => this.errorMessage = <any>error); } onBack(): void { - this._router.navigate(['/products']); + this.router.navigate(['/products']); } + onRatingClicked(message: string): void { + this.pageTitle = 'Product Detail: ' + message; + } } diff --git a/APM - Final Updated/app/products/product-list.component.ts b/APM - Final Updated/app/products/product-list.component.ts index 2e3cb1388ed0325898d68675d467cc3166ecec27..bee46fbd9ebebcb0ed5133ba598f002ae0c0170e 100644 --- a/APM - Final Updated/app/products/product-list.component.ts +++ b/APM - Final Updated/app/products/product-list.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { ROUTER_DIRECTIVES } from '@angular/router'; +import { Router, ROUTER_DIRECTIVES } from '@angular/router'; import { IProduct } from './product'; import { ProductFilterPipe } from './product-filter.pipe'; @@ -21,8 +21,8 @@ export class ProductListComponent implements OnInit { errorMessage: string; products: IProduct[]; - - constructor(private _productService: ProductService) { + constructor(private router: Router, + private _productService: ProductService) { } diff --git a/APM - Final Updated/app/products/product.routes.ts b/APM - Final Updated/app/products/product.routes.ts new file mode 100644 index 0000000000000000000000000000000000000000..e7f3464517cb25b37de460c67d34c05f283cafd5 --- /dev/null +++ b/APM - Final Updated/app/products/product.routes.ts @@ -0,0 +1,9 @@ +import { RouterConfig } from '@angular/router'; + +import { ProductListComponent } from './product-list.component'; +import { ProductDetailComponent } from './product-detail.component'; + +export const ProductRoutes: RouterConfig = [ + { path: 'products', component: ProductListComponent }, + { path: 'product/:id', component: ProductDetailComponent } +]; diff --git a/APM - Final Updated/app/products/product.service.ts b/APM - Final Updated/app/products/product.service.ts index 2c4852c824d43c3a0aa91db195916172d8d97aac..35a3d36210f3b35317e8a2d6f58ec3ad7eb25fa4 100644 --- a/APM - Final Updated/app/products/product.service.ts +++ b/APM - Final Updated/app/products/product.service.ts @@ -1,6 +1,9 @@ import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; + import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/do'; +import 'rxjs/add/operator/catch'; import { IProduct } from './product'; diff --git a/APM - Final Updated/index.html b/APM - Final Updated/index.html index e6b4d27733e4707de24ea42682537f005156a62e..250a6d9db14d8d5f1c67ebb94dfab19877e64b38 100644 --- a/APM - Final Updated/index.html +++ b/APM - Final Updated/index.html @@ -2,15 +2,16 @@ <html> <head lang="en"> - <base href="/"> + <base href="."> <title>Acme Product Management</title> + <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <link href="app/app.component.css" rel="stylesheet" /> <!-- Polyfill(s) for older browsers --> - <script src="node_modules/es6-shim/es6-shim.min.js"></script> + <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> diff --git a/APM - Final Updated/package.json b/APM - Final Updated/package.json index 29ccf300a63fcfb805607ad2318e94b2279ee7a0..00f1ce50704216496be4ca94cdacefb2978ef67d 100644 --- a/APM - Final Updated/package.json +++ b/APM - Final Updated/package.json @@ -13,18 +13,18 @@ "postinstall": "typings install" }, "license": "ISC", - "dependencies": { - "@angular/common": "2.0.0-rc.1", - "@angular/compiler": "2.0.0-rc.1", - "@angular/core": "2.0.0-rc.1", - "@angular/http": "2.0.0-rc.1", - "@angular/platform-browser": "2.0.0-rc.1", - "@angular/platform-browser-dynamic": "2.0.0-rc.1", - "@angular/router": "2.0.0-rc.1", - "@angular/upgrade": "2.0.0-rc.1", + "dependencies": { + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/forms": "0.2.0", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/router": "3.0.0-beta.2", "systemjs": "0.19.27", - "es6-shim": "^0.35.0", + "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", @@ -36,7 +36,7 @@ "lite-server": "^2.2.0", "tslint": "^3.7.4", "typescript": "^1.8.10", - "typings": "^0.8.1" + "typings": "^1.0.4" }, "repository": {} } \ No newline at end of file diff --git a/APM - Final Updated/systemjs.config.js b/APM - Final Updated/systemjs.config.js index 5a7f37e4153d4fde287bb559ec4a1feaf3792f64..a79f296e7f8bfbacc3a6b23d2ac2d2677c8ea6fa 100644 --- a/APM - Final Updated/systemjs.config.js +++ b/APM - Final Updated/systemjs.config.js @@ -21,6 +21,7 @@ '@angular/common', '@angular/compiler', '@angular/core', + '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', @@ -36,7 +37,7 @@ var config = { map: map, packages: packages - } + }; System.config(config); diff --git a/APM - Final Updated/tsconfig.json b/APM - Final Updated/tsconfig.json index 4170bb22f7d1c9e3f4dd224994c3c55e94761eb1..75bcea5753a7482d1134be0a5219d7519f16a1fb 100644 --- a/APM - Final Updated/tsconfig.json +++ b/APM - Final Updated/tsconfig.json @@ -1,17 +1,13 @@ { "compilerOptions": { "target": "es5", - "module": "system", + "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, - "noImplicitAny": false - }, - "exclude": [ - "node_modules", - "typings/main", - "typings/main.d.ts" - ] + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + } } \ No newline at end of file diff --git a/APM - Final Updated/typings.json b/APM - Final Updated/typings.json index 70b0e6903397fcdc4af28f81b748fa276a7e49b7..b8c238f46054bb88eac6ba6d2605c983971c0679 100644 --- a/APM - Final Updated/typings.json +++ b/APM - Final Updated/typings.json @@ -1,5 +1,6 @@ { - "ambientDependencies": { - "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654" + "globalDependencies": { + "core-js": "registry:dt/core-js#0.0.0+20160602141332", + "node": "registry:dt/node#6.0.0+20160621231320" } } \ No newline at end of file diff --git a/APM - Start VS 2015 ASP 4x/APMSolution/APM/APM.csproj b/APM - Start VS 2015 ASP 4x/APMSolution/APM/APM.csproj index 3452afbf626197c901566a6a2711e16419bbfc65..7ae2bb387d99ded7d2bfcac7c7567a03f5f1e2f7 100644 --- a/APM - Start VS 2015 ASP 4x/APMSolution/APM/APM.csproj +++ b/APM - Start VS 2015 ASP 4x/APMSolution/APM/APM.csproj @@ -71,7 +71,6 @@ <Content Include="packages.config" /> <Content Include="api\products\products.json" /> <Content Include="app\home\welcome.component.js.map" /> - <Content Include="app\main.js.map" /> <Content Include="package.json" /> <Content Include="tsconfig.json" /> <Content Include="typings.json" /> @@ -87,7 +86,6 @@ <Content Include="app\assets\images\logo.jpg" /> <Content Include="app\home\welcome.component.html" /> <Content Include="app\home\welcome.component.js" /> - <Content Include="app\main.js" /> <Content Include="app\shared\star.component.css" /> <Content Include="app\shared\star.component.html" /> <Content Include="index.html" />