= [];
12 |
13 | constructor (private productService : ProductService) {
14 | this.products = this.productService.getProducts();
15 | }
16 | }
--------------------------------------------------------------------------------
/chapter02/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
5 |
6 | {{ rating }} stars
7 |
--------------------------------------------------------------------------------
/chapter02/0.auction/app/components/stars/stars.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl : 'app/components/stars/stars.component.html',
5 | styles : [' .starrating { color: #d17581; }'],
6 | selector : 'auction-stars'
7 | })
8 | export default class StarsComponent implements OnInit {
9 | @Input() count : number = 5;
10 | @Input() rating : number = 0;
11 | stars : boolean[] = [];
12 |
13 | ngOnInit () {
14 | for (let i = 1; i <= this.count; i++) {
15 | this.stars.push(i > this.rating);
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/chapter02/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter02/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH2 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter02/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch2",
3 | "description": "Sample Online Auction from Chapter 2",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/platform-browser": "^4.1.0",
13 | "@angular/platform-browser-dynamic": "^4.1.0",
14 | "bootstrap": "^3.3.7",
15 | "core-js": "^2.4.1",
16 | "jquery": "^3.2.1",
17 | "rxjs": "5.3.0",
18 | "systemjs": "0.19.47",
19 | "zone.js": "^0.8.5"
20 | },
21 | "devDependencies": {
22 | "live-server": "1.2.0",
23 | "typescript": "^2.3.3"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/chapter02/0.auction/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : 'ES5',
7 | module : 'commonjs'
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
21 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
22 |
23 | 'app' : { main : 'main', defaultExtension : 'ts' }
24 | }
25 | });
--------------------------------------------------------------------------------
/chapter02/1.hello-world-ts/main.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5 |
6 | // 컴포넌트 선언
7 | @Component({
8 | selector : 'hello-world',
9 | template : 'Hello {{ name }}!
'
10 | })
11 | class HelloWorldComponent {
12 | name : string;
13 |
14 | constructor () {
15 | this.name = 'Angular';
16 | }
17 | }
18 |
19 | // 모듈 선언
20 | @NgModule({
21 | imports : [BrowserModule],
22 | declarations : [HelloWorldComponent],
23 | bootstrap : [HelloWorldComponent]
24 | })
25 | export class AppModule {}
26 |
27 | // 부트스트랩
28 | platformBrowserDynamic().bootstrapModule(AppModule)
--------------------------------------------------------------------------------
/chapter02/2.hello-world-es5/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/chapter02/3.hello-world-es6/main.js:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5 |
6 | // 컴포넌트 정의
7 | @Component({
8 | selector : 'hello-world',
9 | template : 'Hello {{ name }}!
'
10 | })
11 | class HelloWorldComponent {
12 | constructor () {
13 | this.name = 'Angular';
14 | }
15 | }
16 |
17 | // 모듈 정의
18 | @NgModule({
19 | imports : [BrowserModule],
20 | declarations : [HelloWorldComponent],
21 | bootstrap : [HelloWorldComponent]
22 | })
23 | export class AppModule {
24 | }
25 | // 부트스트랩
26 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter02/4.systemjs-demo/es5module.js:
--------------------------------------------------------------------------------
1 | exports.name = 'ES5';
2 |
3 | console.log('ES5 module is loaded');
--------------------------------------------------------------------------------
/chapter02/4.systemjs-demo/es6module.js:
--------------------------------------------------------------------------------
1 | export let name = 'ES6';
2 |
3 | console.log('ES6 module is loaded');
--------------------------------------------------------------------------------
/chapter02/4.systemjs-demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'app',
5 | template : 'Hello {{ name }}!
'
6 | })
7 | export class AppComponent {
8 | name : string;
9 |
10 | constructor () {
11 | this.name = 'Angular';
12 | }
13 | }
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { AppComponent } from './app.component';
4 |
5 | @NgModule({
6 | imports : [BrowserModule],
7 | declarations : [AppComponent],
8 | bootstrap : [AppComponent]
9 | })
10 | export class AppModule {}
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Angular seed project
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-seed",
3 | "description": "An initial yarn-managed project for Chapter 2",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/platform-browser": "^4.1.0",
13 | "@angular/platform-browser-dynamic": "^4.1.0",
14 | "core-js": "^2.4.1",
15 | "rxjs": "5.3.0",
16 | "systemjs": "0.19.47",
17 | "zone.js": "^0.8.5"
18 | },
19 | "devDependencies": {
20 | "live-server": "1.2.0",
21 | "typescript": "^2.3.3"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/chapter02/5.angular-seed/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : 'ES5',
7 | module : 'commonjs'
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
21 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
22 |
23 | 'app' : { main : 'main', defaultExtension : 'ts' }
24 | }
25 | });
--------------------------------------------------------------------------------
/chapter03/0.auction/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter03/0.auction/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter03/0.auction/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter03/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
8 |
9 |
{{ productTitle }}
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
5 |
6 | {{ rating }} stars
7 |
--------------------------------------------------------------------------------
/chapter03/0.auction/app/components/stars/stars.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl : 'app/components/stars/stars.component.html',
5 | styles : [' .starrating { color: #d17581; }'],
6 | selector : 'auction-stars'
7 | })
8 | export default class StarsComponent implements OnInit {
9 | @Input() count : number = 5;
10 | @Input() rating : number = 0;
11 | stars : boolean[] = [];
12 |
13 | ngOnInit () {
14 | for (let i = 1; i <= this.count; i++) {
15 | this.stars.push(i > this.rating);
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/chapter03/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter03/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH3 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter03/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch3",
3 | "description": "Sample Online Auction from Chapter 3",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/platform-browser": "^4.1.0",
13 | "@angular/platform-browser-dynamic": "^4.1.0",
14 | "@angular/router": "^4.1.0",
15 | "bootstrap": "^3.3.7",
16 | "core-js": "^2.4.1",
17 | "jquery": "^3.2.1",
18 | "rxjs": "5.3.0",
19 | "systemjs": "0.19.47",
20 | "zone.js": "^0.8.5"
21 | },
22 | "devDependencies": {
23 | "live-server": "1.2.0",
24 | "typescript": "^2.3.3"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/chapter03/0.auction/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : 'ES5',
7 | module : 'commonjs'
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
21 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
22 | '@angular/router' : { main : 'bundles/router.umd.min.js' },
23 |
24 | 'app' : { main : 'main', defaultExtension : 'ts' }
25 | }
26 | });
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { Routes, RouterModule } from '@angular/router';
2 | import { HomeComponent } from './components/home.component';
3 | import { ProductDetailComponent } from './components/product.component';
4 |
5 | const routes : Routes = [
6 | { path : '', component : HomeComponent },
7 | { path : 'product', component : ProductDetailComponent }
8 | ];
9 | export const routing = RouterModule.forRoot(routes);
10 |
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/404.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'home',
5 | template : 'Dear friend, this URL was not found
',
6 | styles : ['.home { background : yellow }']
7 | })
8 | export class _404Component {}
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'app',
5 | template : `
6 | Home
7 | Product Details
8 |
9 | `
10 | })
11 | export class AppComponent {}
12 |
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'home',
5 | template : 'Home Component
',
6 | styles : ['.home { background : red }']
7 | })
8 | export class HomeComponent {
9 | }
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/luxury/luxury.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'luxury',
5 | template : `Luxury Component
`,
6 | styles : ['.gold { background : yellow }']
7 | })
8 | export class LuxuryComponent {}
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/luxury/luxury.lazy.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 | import { LuxuryComponent } from './luxury.component';
5 |
6 | @NgModule({
7 | imports : [CommonModule,
8 | RouterModule.forChild([
9 | { path : '', component : LuxuryComponent }
10 | ])],
11 | declarations : [LuxuryComponent]
12 | })
13 |
14 | export default class LuxuryModule {}
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/luxury/luxury.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { RouterModule } from '@angular/router';
4 | import { LuxuryComponent } from './luxury.component';
5 |
6 | @NgModule({
7 | imports : [CommonModule,
8 | RouterModule.forChild([
9 | { path : 'luxury', component : LuxuryComponent }
10 | ])],
11 | declarations : [LuxuryComponent]
12 | })
13 |
14 | export class LuxuryModule {}
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/product-child.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | @Component({
5 | selector : 'product',
6 | styles : ['.product { background : cyan }'],
7 | template : `
8 |
9 |
Product Detail for Product : {{ productID }}
10 |
11 |
Seller Info
12 |
This is a great product!
'
6 | })
7 | export class ProductDescriptionComponent {}
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/product-param-data.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | @Component({
5 | selector : 'product',
6 | template : `Product Detail for Product : {{ productID }}
7 | Is prod evnironment? : {{ isProdEnvironment }}
`,
8 | styles : ['.product { background : cyan}']
9 | })
10 | export class ProductDetailComponentParam {
11 | productID : string;
12 | isProdEnvironment : string;
13 |
14 | constructor (route : ActivatedRoute) {
15 | this.productID = route.snapshot.params['id'];
16 |
17 | this.isProdEnvironment = route.snapshot.data[0]['isProd'];
18 | console.log('this.isProdEnvironment : ' + this.isProdEnvironment);
19 | }
20 | }
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/product-param.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | @Component({
5 | selector : 'product',
6 | template : `Product Details for Product : {{ productID }}
`,
7 | styles : ['.product { background : cyan }']
8 | })
9 | export class ProductDetailComponentParam {
10 | productID : string;
11 |
12 | constructor (route : ActivatedRoute) {
13 | this.productID = route.snapshot.params['id'];
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/product.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'product',
5 | template : 'Product Details Component
',
6 | styles : ['.product { background : cyan }']
7 | })
8 | export class ProductDetailComponent {}
9 |
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/components/seller.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 |
4 | @Component({
5 | selector : 'seller',
6 | template : 'The seller of this product is Mary Lou (98%)',
7 | styles : [':host { background : yellow }'],
8 | encapsulation : ViewEncapsulation.Native
9 | })
10 | export class SellerInfoComponent {
11 | sellerID : string;
12 |
13 | constructor (route : ActivatedRoute) {
14 | this.sellerID = route.snapshot.params['id'];
15 | console.log(`The SellerInfoComponent got the seller id ${this.sellerID}`);
16 | }
17 | }
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/guards/login.guard.ts:
--------------------------------------------------------------------------------
1 | import { CanActivate } from '@angular/router';
2 | import { Injectable } from '@angular/core';
3 |
4 | @Injectable()
5 | export class LoginGuard implements CanActivate {
6 | private checkIfLoggedIn () : boolean {
7 | // 실제 로그인 서비스를 사용하는 로직은 여기에 작성한다.
8 | // 지금은 임의로 true나 false를 반환한다.
9 |
10 | let loggedIn : boolean = Math.random() < 0.5;
11 |
12 | if (!loggedIn) {
13 | console.log("LoginGuard : The user is not logged in and can't navigate to product details");
14 | }
15 |
16 | return loggedIn;
17 | }
18 |
19 | canActivate () {
20 | return this.checkIfLoggedIn();
21 | }
22 | }
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/guards/unsaved_changes.guard.ts:
--------------------------------------------------------------------------------
1 | import { CanDeactivate } from '@angular/router';
2 | import { Injectable } from '@angular/core';
3 |
4 | @Injectable()
5 | export class UnsavedChangesGuard implements CanDeactivate {
6 | canDeactivate () {
7 | return window.confirm('You have unsaved changes. Still want to leave?');
8 | }
9 | }
--------------------------------------------------------------------------------
/chapter03/1.router_samples/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { NgModule } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 | import { AppComponent } from './components/app.component';
5 | import { HomeComponent } from './components/home.component';
6 | import { ProductDetailComponent } from './components/product.component';
7 | import { LocationStrategy, HashLocationStrategy } from '@angular/common';
8 | import { routing } from './app.routing';
9 |
10 | @NgModule({
11 | imports : [BrowserModule,
12 | routing],
13 | declarations : [AppComponent,
14 | HomeComponent,
15 | ProductDetailComponent],
16 | providers : [{ provide : LocationStrategy, useClass : HashLocationStrategy }],
17 | bootstrap : [AppComponent]
18 | })
19 | class AppModule {}
20 |
21 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter03/1.router_samples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chapter 3 : Routing Sample
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter03/1.router_samples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "router_samples",
3 | "description": "Routing samples from Chapter 3 from the book Angular Development with TypeScript",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/platform-browser": "^4.1.0",
13 | "@angular/platform-browser-dynamic": "^4.1.0",
14 | "@angular/router": "^4.1.0",
15 | "core-js": "^2.4.1",
16 | "rxjs": "5.3.0",
17 | "systemjs": "^0.19.47",
18 | "zone.js": "^0.8.5"
19 | },
20 | "devDependencies": {
21 | "live-server": "1.2.0",
22 | "typescript": "^2.3.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/chapter04/0.auction/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter04/0.auction/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter04/0.auction/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter04/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
5 |
6 | {{ rating }} stars
7 |
--------------------------------------------------------------------------------
/chapter04/0.auction/app/components/stars/stars.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl : 'app/components/stars/stars.component.html',
5 | styles : [' .starrating { color: #d17581; }'],
6 | selector : 'auction-stars'
7 | })
8 | export default class StarsComponent implements OnInit {
9 | @Input() count : number = 5;
10 | @Input() rating : number = 0;
11 | stars : boolean[] = [];
12 |
13 | ngOnInit () {
14 | for (let i = 1; i <= this.count; i++) {
15 | this.stars.push(i > this.rating);
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/chapter04/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter04/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH4 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter04/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch4",
3 | "description": "Sample Online Auction from Chapter 4",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/platform-browser": "^4.1.0",
13 | "@angular/platform-browser-dynamic": "^4.1.0",
14 | "@angular/router": "^4.1.0",
15 | "bootstrap": "^3.3.7",
16 | "core-js": "^2.4.1",
17 | "jquery": "^3.2.1",
18 | "rxjs": "5.3.0",
19 | "systemjs": "0.19.47",
20 | "zone.js": "^0.8.5"
21 | },
22 | "devDependencies": {
23 | "live-server": "1.2.0",
24 | "typescript": "^2.3.3"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/chapter04/0.auction/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : 'ES5',
7 | module : 'commonjs'
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
21 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
22 | '@angular/router' : { main : 'bundles/router.umd.min.js' },
23 |
24 | 'app' : { main : 'main', defaultExtension : 'ts' }
25 | }
26 | });
--------------------------------------------------------------------------------
/chapter04/1.di_samples/app/components/product.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { ProductService, Product } from '../services/product.service';
3 |
4 | @Component({
5 | selector : 'di-product-page',
6 | template : `
7 |
8 |
Product Details
9 | Title : {{ product.title }}
10 | Description : {{ product.description }}
11 | Price : \${{ product.price }}
12 |
13 | `,
14 | providers : [ProductService]
15 | })
16 | export default class ProductComponent {
17 | product : Product;
18 |
19 | constructor (productService : ProductService) {
20 | this.product = productService.getProduct();
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/chapter04/1.di_samples/app/main-basic.ts:
--------------------------------------------------------------------------------
1 | import { Component, NgModule } from '@angular/core';
2 | import ProductComponent from './components/product.component';
3 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4 | import { BrowserModule } from '@angular/platform-browser';
5 |
6 | @Component({
7 | selector : 'app',
8 | template : `
9 | Basic Dependency Injection Sample
10 |
11 | `
12 | })
13 | class AppComponent {}
14 |
15 | @NgModule({
16 | imports : [BrowserModule],
17 | declarations : [AppComponent, ProductComponent],
18 | bootstrap : [AppComponent]
19 | })
20 | class AppModule {}
21 |
22 | platformBrowserDynamic().bootstrapModule(AppModule);
23 |
--------------------------------------------------------------------------------
/chapter04/1.di_samples/app/main-opaque-token.ts:
--------------------------------------------------------------------------------
1 | import { Component, OpaqueToken, Inject, NgModule } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 | import { BrowserModule } from '@angular/platform-browser';
4 |
5 | export const BackendUrl = new OpaqueToken('BackendUrl');
6 |
7 | @Component({
8 | selector : 'app',
9 | template : 'URL : {{ url }}'
10 | })
11 | class AppComponent {
12 | constructor (@Inject(BackendUrl) public url) {
13 | }
14 | }
15 |
16 | @NgModule({
17 | imports : [BrowserModule],
18 | declarations : [AppComponent],
19 | providers : [{ provide : BackendUrl, useValue : 'myQAserver.com' }],
20 | bootstrap : [AppComponent]
21 | })
22 | class AppModule {}
23 |
24 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter04/1.di_samples/app/services/product.service.ts:
--------------------------------------------------------------------------------
1 | export class Product {
2 | constructor (public id : number,
3 | public title : string,
4 | public price : number,
5 | public description : string) {
6 | }
7 | }
8 |
9 | export class ProductService {
10 | getProduct () : Product {
11 | return new Product(0, "iPhone 8", 849.99, "The latest iPhone, 5.8-inch screen");
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/chapter04/1.di_samples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Chapter 4 : Angular DI Samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter04/1.di_samples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "DI_samples",
3 | "description": "A sample DI project for Chapter 4",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/http": "^4.1.0",
14 | "@angular/platform-browser": "^4.1.0",
15 | "@angular/platform-browser-dynamic": "^4.1.0",
16 | "@angular/router": "^4.1.0",
17 | "core-js": "^2.4.1",
18 | "rxjs": "^5.3.0",
19 | "systemjs": "^0.19.47",
20 | "zone.js": "^0.8.5"
21 | },
22 | "devDependencies": {
23 | "live-server": "^1.2.0",
24 | "typescript": "^2.3.3"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/chapter05/0.auction/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter05/0.auction/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter05/0.auction/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter05/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
5 |
6 | {{ rating }} stars
7 |
--------------------------------------------------------------------------------
/chapter05/0.auction/app/components/stars/stars.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | templateUrl : 'app/components/stars/stars.component.html',
5 | styles : [' .starrating { color: #d17581; }'],
6 | selector : 'auction-stars'
7 | })
8 | export default class StarsComponent implements OnInit {
9 | @Input() count : number = 5;
10 | @Input() rating : number = 0;
11 | stars : boolean[] = [];
12 |
13 | ngOnInit () {
14 | for (let i = 1; i <= this.count; i++) {
15 | this.stars.push(i > this.rating);
16 | }
17 | }
18 | }
--------------------------------------------------------------------------------
/chapter05/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter05/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH5 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter05/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch5",
3 | "description": "Sample Online Auction from Chapter 5",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/platform-browser": "^4.1.0",
14 | "@angular/platform-browser-dynamic": "^4.1.0",
15 | "@angular/router": "^4.1.0",
16 | "bootstrap": "^3.3.7",
17 | "core-js": "^2.4.1",
18 | "jquery": "^3.2.1",
19 | "rxjs": "5.3.0",
20 | "systemjs": "0.19.47",
21 | "zone.js": "^0.8.5"
22 | },
23 | "devDependencies": {
24 | "live-server": "1.2.0",
25 | "typescript": "^2.3.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chapter05/0.auction/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : 'ES5',
7 | module : 'commonjs'
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/forms' : { main : 'bundles/forms.umd.min.js' },
21 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
22 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
23 | '@angular/router' : { main : 'bundles/router.umd.min.js' },
24 |
25 | 'app' : { main : 'main', defaultExtension : 'ts' }
26 | }
27 | });
--------------------------------------------------------------------------------
/chapter05/1.bindings_and_events/app/bindings/template-binding.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { NgModule, Component } from '@angular/core';
3 | import { BrowserModule } from '@angular/platform-browser';
4 |
5 | @Component({
6 | selector : 'app',
7 | template : `
8 |
9 |
10 | Flag's value : {{ flag }}
11 |
12 |
13 | 1. span with *ngIf="flag" : Flag is true
14 |
15 |
16 | 2. template with [ngIf]="flag" : Flag is true
17 |
18 | `
19 | })
20 | class AppComponent {
21 | flag : boolean = true;
22 | }
23 |
24 | @NgModule({
25 | imports : [BrowserModule],
26 | declarations : [AppComponent],
27 | bootstrap : [AppComponent]
28 | })
29 | class AppModule {}
30 |
31 | platformBrowserDynamic().bootstrapModule(AppModule);
32 |
--------------------------------------------------------------------------------
/chapter05/1.bindings_and_events/app/pipes/temperature.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | @Pipe({ name : 'temperature' })
4 | export class TemperaturePipe implements PipeTransform {
5 | transform (value : any, fromTo : string) : any {
6 | if (!fromTo) {
7 | throw 'Temperature pipe requires parameter FtoC or CtoF';
8 | }
9 |
10 | return (fromTo === 'FtoC') ?
11 | (value - 32) * 5.0 / 9.0 : // F to C
12 | value * 9.0 / 5.0 + 32; // C to F
13 | }
14 | }
--------------------------------------------------------------------------------
/chapter05/1.bindings_and_events/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Binding and events samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter05/1.bindings_and_events/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bindings_and_events",
3 | "description": "Binding samples from Chapter 4 from the book Angular Development with TypeScript",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/http": "^4.1.0",
14 | "@angular/platform-browser": "^4.1.0",
15 | "@angular/platform-browser-dynamic": "^4.1.0",
16 | "core-js": "^2.4.1",
17 | "rxjs": "5.3.0",
18 | "systemjs": "0.19.47",
19 | "zone.js": "^0.8.5"
20 | },
21 | "devDependencies": {
22 | "live-server": "1.2.0",
23 | "typescript": "^2.3.3"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/chapter06/0.auction/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter06/0.auction/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter06/0.auction/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter06/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter06/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter06/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH6 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter06/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch6",
3 | "description": "Sample Online Auction from Chapter 6",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/platform-browser": "^4.1.0",
14 | "@angular/platform-browser-dynamic": "^4.1.0",
15 | "@angular/router": "^4.1.0",
16 | "bootstrap": "^3.3.7",
17 | "core-js": "^2.4.1",
18 | "jquery": "^3.2.1",
19 | "rxjs": "5.3.0",
20 | "systemjs": "0.19.47",
21 | "zone.js": "^0.8.5"
22 | },
23 | "devDependencies": {
24 | "live-server": "1.2.0",
25 | "typescript": "^2.3.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chapter06/1.inter_comp_communications/app/mediator/order.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Stock } from './stock';
3 |
4 | @Component({
5 | selector : 'order-processor',
6 | template : `{{ message }}`,
7 | styles : [`:host { background : cyan; }`]
8 | })
9 | export class OrderComponent {
10 | message : string = 'Waiting for the orders...';
11 |
12 | private _stock : Stock;
13 |
14 | @Input() set stock (value : Stock) {
15 | if (value && value.bidPrice != undefined) {
16 | this.message = `Placed order to buy 100 shares of ${value.stockSymbol} at \$${value.bidPrice.toFixed(2)}`;
17 | }
18 | }
19 |
20 | get stock () : Stock {
21 | return this._stock;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/chapter06/1.inter_comp_communications/app/mediator/stock.ts:
--------------------------------------------------------------------------------
1 | export interface Stock {
2 | stockSymbol : string;
3 | bidPrice : number;
4 | }
--------------------------------------------------------------------------------
/chapter06/1.inter_comp_communications/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH6 : Various samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter06/1.inter_comp_communications/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-seed",
3 | "description": "An initial npm-managed project for Chapter 2",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/platform-browser": "^4.1.0",
14 | "@angular/platform-browser-dynamic": "^4.1.0",
15 | "core-js": "^2.4.1",
16 | "rxjs": "5.3.0",
17 | "systemjs": "0.19.47",
18 | "zone.js": "^0.8.5"
19 | },
20 | "devDependencies": {
21 | "live-server": "1.2.0",
22 | "typescript": "^2.3.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/chapter07/0.auction/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter07/0.auction/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter07/0.auction/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter07/0.auction/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter07/0.auction/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter07/0.auction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH7 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter07/0.auction/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_ch7",
3 | "description": "Sample Online Auction from Chapter 7",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/platform-browser": "^4.1.0",
14 | "@angular/platform-browser-dynamic": "^4.1.0",
15 | "@angular/router": "^4.1.0",
16 | "bootstrap": "^3.3.7",
17 | "core-js": "^2.4.1",
18 | "jquery": "^3.2.1",
19 | "rxjs": "5.3.0",
20 | "systemjs": "0.19.47",
21 | "zone.js": "^0.8.5"
22 | },
23 | "devDependencies": {
24 | "live-server": "1.2.0",
25 | "typescript": "^2.3.3"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chapter07/1.form_samples/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Form Samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter07/1.form_samples/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "form-samples",
3 | "description": "Demo application show Angular Form API",
4 | "private": true,
5 | "scripts": {
6 | "start": "live-server"
7 | },
8 | "dependencies": {
9 | "@angular/common": "^4.1.0",
10 | "@angular/compiler": "^4.1.0",
11 | "@angular/core": "^4.1.0",
12 | "@angular/forms": "^4.1.0",
13 | "@angular/platform-browser": "^4.1.0",
14 | "@angular/platform-browser-dynamic": "^4.1.0",
15 | "core-js": "^2.4.1",
16 | "rxjs": "5.3.0",
17 | "systemjs": "0.19.47",
18 | "zone.js": "^0.8.5"
19 | },
20 | "devDependencies": {
21 | "live-server": "1.2.0",
22 | "typescript": "^2.3.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/chapter07/1.form_samples/systemjs.config.js:
--------------------------------------------------------------------------------
1 | System.config({
2 | transpiler : 'typescript',
3 |
4 | typescriptOptions : {
5 | emitDecoratorMetadata : true,
6 | target : "ES5",
7 | module : "commonjs"
8 | },
9 |
10 | map : {
11 | '@angular' : 'node_modules/@angular',
12 | 'rxjs' : 'node_modules/rxjs'
13 | },
14 |
15 | packages : {
16 | 'rxjs' : { main : 'Rx' },
17 | '@angular/core' : { main : 'bundles/core.umd.min.js' },
18 | '@angular/common' : { main : 'bundles/common.umd.min.js' },
19 | '@angular/compiler' : { main : 'bundles/compiler.umd.min.js' },
20 | '@angular/forms' : { main : 'bundles/forms.umd.min.js' },
21 | '@angular/platform-browser' : { main : 'bundles/platform-browser.umd.min.js' },
22 | '@angular/platform-browser-dynamic' : { main : 'bundles/platform-browser-dynamic.umd.min.js' },
23 |
24 | 'app' : { main : '01_template-driven', defaultExtension : 'ts' }
25 | }
26 | });
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/services/bid.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { WebSocketService } from './websocket.service';
3 | import { Observable, Subscriber } from 'rxjs/Rx';
4 |
5 | @Injectable()
6 | export class BidService {
7 | constructor (private webSocket : WebSocketService) {}
8 |
9 | watchProduct (productId : number) : Observable {
10 | let openSubscriber = Subscriber.create(
11 | () => this.webSocket.send({ productId : productId }));
12 |
13 | return this.webSocket.createObservableSocket('ws://localhost:8000', openSubscriber)
14 | .map(message => JSON.parse(message));
15 | }
16 | }
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/services/services.ts:
--------------------------------------------------------------------------------
1 | import { BidService } from './bid.service';
2 | import { ProductService } from './product.service';
3 | import { WebSocketService } from './websocket.service';
4 |
5 | export const ONLINE_AUCTION_SERVICES = [
6 | BidService,
7 | ProductService,
8 | WebSocketService
9 | ];
--------------------------------------------------------------------------------
/chapter08/0.auction/client/app/services/websocket.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { Subscriber } from 'rxjs/Subscriber';
4 |
5 | @Injectable()
6 | export class WebSocketService {
7 | private ws : WebSocket;
8 |
9 | createObservableSocket (url : string, openSubscriber : Subscriber) : Observable {
10 | this.ws = new WebSocket(url);
11 |
12 | return new Observable(observer => {
13 | this.ws.onmessage = event => observer.next(event.data);
14 | this.ws.onerror = event => observer.error(event);
15 | this.ws.onclose = event => observer.complete();
16 | this.ws.onopen = event => {
17 | openSubscriber.next();
18 | openSubscriber.complete();
19 | };
20 |
21 | return () => this.ws.close();
22 | });
23 | }
24 |
25 | send (message : any) {
26 | this.ws.send(JSON.stringify(message));
27 | }
28 | }
--------------------------------------------------------------------------------
/chapter08/0.auction/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH8 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter08/0.auction/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "outDir" : "build",
7 | "target" : "ES5",
8 | "lib": ["es2015", "dom"]
9 | },
10 | "exclude" : [
11 | "node_modules",
12 | "client"
13 | ]
14 | }
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/client/app/custom-observable.service.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Rx';
2 |
3 | export class CustomObservableService {
4 | createObservableService () : Observable {
5 | return new Observable((observer) => {
6 | setInterval(() => {
7 | observer.next(new Date())
8 | }, 1000);
9 | });
10 | }
11 | }
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/client/app/product.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Http } from '@angular/http';
3 | import { Observable } from 'rxjs/Observable';
4 | import 'rxjs/add/operator/map';
5 |
6 | @Injectable()
7 | export class ProductService {
8 | constructor (private http : Http) {}
9 |
10 | getProductByID (productID : string) : Observable {
11 | return this.http.get(`/products/${productID}`)
12 | .map(res => res.json());
13 | }
14 | }
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/client/app/websocket-observable.service.ts:
--------------------------------------------------------------------------------
1 | import { Observable } from 'rxjs/Observable';
2 |
3 | export class WebSocketService {
4 | ws : WebSocket;
5 |
6 | createObservableSocket (url : string) : Observable {
7 | this.ws = new WebSocket(url);
8 |
9 | return new Observable((observer) => {
10 | this.ws.onmessage = (event) => observer.next(event.data);
11 | this.ws.onerror = (event) => observer.error(event);
12 | this.ws.onclose = (event) => observer.complete();
13 | });
14 | }
15 |
16 | sendMessage (message : any) {
17 | this.ws.send(message);
18 | }
19 | }
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Http Samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/client/simple-websocket-client.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/server/hello-server-json.ts:
--------------------------------------------------------------------------------
1 | import * as http from 'http';
2 |
3 | const server = http.createServer((request, response) => {
4 | response.writeHead(200, { 'Content-Type' : 'application/json' });
5 | response.end('{ "message" : "Hello JSON!" }');
6 | });
7 |
8 | const port = 8000;
9 |
10 | server.listen(port);
11 | console.log('Listening on http://localhost:' + port);
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/server/hello-server.ts:
--------------------------------------------------------------------------------
1 | import * as http from 'http';
2 |
3 | const server = http.createServer((request, response) => {
4 | response.writeHead(200, { 'Content-Type' : 'text/plain' });
5 | response.end('Hello World!');
6 | });
7 |
8 | const port = 8000;
9 |
10 | server.listen(port);
11 | console.log('Listening on http://localhost:' + port);
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/server/my-express-server.ts:
--------------------------------------------------------------------------------
1 | import * as express from 'express';
2 |
3 | const app = express();
4 |
5 | app.get('/', (req, res) => res.send('Hello from Express'));
6 | app.get('/products', (req, res) => res.send('Got a request for products'));
7 | app.get('/reviews', (req, res) => res.send('Got a request for reviews'));
8 |
9 | const server = app.listen(8000, 'localhost', () => {
10 | const { address, port } = server.address();
11 | console.log('Listening on %s %s', address, port);
12 | });
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/server/simple-websocket-server.ts:
--------------------------------------------------------------------------------
1 | import * as express from 'express';
2 | import * as path from 'path';
3 | import { Server } from 'ws';
4 |
5 | const app = express();
6 |
7 | // HTTP Server
8 | app.get('/', (req, res) => {
9 | res.sendFile(path.resolve(__dirname, '..', 'client/simple-websocket-client.html'));
10 | });
11 |
12 | const httpServer = app.listen(8000, 'localhost', () => {
13 | const { port } = httpServer.address();
14 | console.log('HTTP Server is listening on %s', port);
15 | });
16 |
17 | // WebSocket Server
18 | const wsServer : Server = new Server({ port : 8085 });
19 | console.log('WebSocket server is listening on port 8085');
20 |
21 | wsServer.on('connection', websocket => {
22 | websocket.send('This message was pushed by the WebSocket server.');
23 | });
--------------------------------------------------------------------------------
/chapter08/1.http_websocket_samples/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "outDir" : "build",
7 | "target" : "ES5",
8 | "lib": ["es2015"]
9 | },
10 | "exclude" : [
11 | "node_modules",
12 | "client"
13 | ]
14 | }
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/components/application/application.component.spec.ts:
--------------------------------------------------------------------------------
1 | import ApplicationComponent from './application.component';
2 |
3 | describe('ApplicationComponent', () => {
4 | it('is successfully instantiated', () => {
5 | const app = new ApplicationComponent();
6 | expect(app instanceof ApplicationComponent).toEqual(true);
7 | });
8 | });
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | templateUrl : 'app/components/application/application.component.html',
6 | styleUrls : ['app/components/application/application.component.css'],
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/services/bid.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { WebSocketService } from './websocket.service';
3 | import { Observable, Subscriber } from 'rxjs/Rx';
4 |
5 | @Injectable()
6 | export class BidService {
7 | constructor (private webSocket : WebSocketService) {}
8 |
9 | watchProduct (productId : number) : Observable {
10 | let openSubscriber = Subscriber.create(
11 | () => this.webSocket.send({ productId : productId }));
12 |
13 | return this.webSocket.createObservableSocket('ws://localhost:8000', openSubscriber)
14 | .map(message => JSON.parse(message));
15 | }
16 | }
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/services/services.ts:
--------------------------------------------------------------------------------
1 | import { BidService } from './bid.service';
2 | import { ProductService } from './product.service';
3 | import { WebSocketService } from './websocket.service';
4 |
5 | export const ONLINE_AUCTION_SERVICES = [
6 | BidService,
7 | ProductService,
8 | WebSocketService
9 | ];
--------------------------------------------------------------------------------
/chapter09/0.auction/client/app/services/websocket.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { Subscriber } from 'rxjs/Subscriber';
4 |
5 | @Injectable()
6 | export class WebSocketService {
7 | private ws : WebSocket;
8 |
9 | createObservableSocket (url : string, openSubscriber : Subscriber) : Observable {
10 | this.ws = new WebSocket(url);
11 |
12 | return new Observable(observer => {
13 | this.ws.onmessage = event => observer.next(event.data);
14 | this.ws.onerror = event => observer.error(event);
15 | this.ws.onclose = event => observer.complete();
16 | this.ws.onopen = event => {
17 | openSubscriber.next();
18 | openSubscriber.complete();
19 | };
20 |
21 | return () => this.ws.close();
22 | });
23 | }
24 |
25 | send (message : any) {
26 | this.ws.send(JSON.stringify(message));
27 | }
28 | }
--------------------------------------------------------------------------------
/chapter09/0.auction/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH9 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/chapter09/0.auction/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "outDir" : "build",
7 | "target" : "ES5",
8 | "lib": ["es2015", "dom"]
9 | },
10 | "exclude" : [
11 | "node_modules",
12 | "client"
13 | ]
14 | }
--------------------------------------------------------------------------------
/chapter09/1.test_weather/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { Routes, RouterModule } from '@angular/router';
2 | import { HomeComponent } from './components/home.component';
3 | import { WeatherComponent } from './components/weather.component';
4 |
5 | export const routes : Routes = [
6 | { path : '', component : HomeComponent },
7 | { path : 'weather', component : WeatherComponent }
8 | ];
9 |
10 | export const routing = RouterModule.forRoot(routes);
11 |
--------------------------------------------------------------------------------
/chapter09/1.test_weather/app/components/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'app',
5 | template : `
6 | Get Weather
7 |
11 |
12 |
13 |
14 | `
15 | })
16 | export class AppComponent {}
--------------------------------------------------------------------------------
/chapter09/1.test_weather/app/components/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'my-home',
5 | template : 'Home Component
',
6 | })
7 | export class HomeComponent {}
--------------------------------------------------------------------------------
/chapter09/1.test_weather/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter09/1.test_weather/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Unit test samples
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
18 |
19 |
20 | Loading...
21 |
22 |
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/components/application/application.component.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding-top: 70px
3 | }
4 | .slide-image {
5 | width: 100%;
6 | }
7 | .carousel-holder {
8 | margin-bottom: 30px;
9 | }
10 | .carousel-control,.item {
11 | border-radius: 4px;
12 | }
13 | .caption {
14 | height: 130px;
15 | overflow: hidden;
16 | }
17 | .caption h4 {
18 | white-space: nowrap;
19 | }
20 | .thumbnail img {
21 | width: 100%;
22 | }
23 | .thumbnail {
24 | padding: 0;
25 | }
26 | .thumbnail .caption-full {
27 | padding: 9px;
28 | color: #333;
29 | }
30 | footer {
31 | margin: 50px 0;
32 | }
33 | .starrating.glyphicon-star {
34 | margin-right: 4px;
35 | }
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/components/application/application.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/components/application/application.component.spec.ts:
--------------------------------------------------------------------------------
1 | import ApplicationComponent from './application.component';
2 |
3 | describe('ApplicationComponent', () => {
4 | it('is successfully instantiated', () => {
5 | const app = new ApplicationComponent();
6 | expect(app instanceof ApplicationComponent).toEqual(true);
7 | });
8 | });
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/components/application/application.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, ViewEncapsulation } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'auction-application',
5 | styles : [require('./application.component.css')],
6 | template : require('./application.component.html'),
7 | encapsulation : ViewEncapsulation.None
8 | })
9 | export default class ApplicationComponent {}
10 |
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/components/carousel/carousel.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/main.ts:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import 'zone.js';
3 | import 'jquery';
4 | import 'bootstrap';
5 | import 'bootstrap/dist/css/bootstrap.min.css';
6 |
7 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
8 | import { AppModule } from './app.module';
9 | import { enableProdMode } from '@angular/core';
10 |
11 | if(webpack.MODE === 'production'){
12 | enableProdMode();
13 | }
14 |
15 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/services/bid.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { WebSocketService } from './websocket.service';
3 | import { Observable } from 'rxjs/Observable';
4 | import { Subscriber } from 'rxjs/Subscriber';
5 |
6 | @Injectable()
7 | export class BidService {
8 | constructor (private webSocket : WebSocketService) {}
9 |
10 | watchProduct (productId : number) : Observable {
11 | let openSubscriber = Subscriber.create(
12 | () => this.webSocket.send({ productId : productId }));
13 |
14 | return this.webSocket.createObservableSocket('ws://localhost:8000', openSubscriber)
15 | .map(message => JSON.parse(message));
16 | }
17 | }
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/services/services.ts:
--------------------------------------------------------------------------------
1 | import { BidService } from './bid.service';
2 | import { ProductService } from './product.service';
3 | import { WebSocketService } from './websocket.service';
4 |
5 | export const ONLINE_AUCTION_SERVICES = [
6 | BidService,
7 | ProductService,
8 | WebSocketService
9 | ];
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/services/websocket.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Observable } from 'rxjs/Observable';
3 | import { Subscriber } from 'rxjs/Subscriber';
4 |
5 | @Injectable()
6 | export class WebSocketService {
7 | private ws : WebSocket;
8 |
9 | createObservableSocket (url : string, openSubscriber : Subscriber) : Observable {
10 | this.ws = new WebSocket(url);
11 |
12 | return new Observable(observer => {
13 | this.ws.onmessage = event => observer.next(event.data);
14 | this.ws.onerror = event => observer.error(event);
15 | this.ws.onclose = event => observer.complete();
16 | this.ws.onopen = event => {
17 | openSubscriber.next();
18 | openSubscriber.complete();
19 | };
20 |
21 | return () => this.ws.close();
22 | });
23 | }
24 |
25 | send (message : any) {
26 | this.ws.send(JSON.stringify(message));
27 | }
28 | }
--------------------------------------------------------------------------------
/chapter10/0.auction/client/app/vendor.ts:
--------------------------------------------------------------------------------
1 | import '@angular/common';
2 | import '@angular/core';
3 | import '@angular/forms';
4 | import '@angular/http';
5 | import '@angular/platform-browser';
6 | import '@angular/platform-browser-dynamic';
7 | import '@angular/router';
8 |
9 | import 'rxjs';
10 | import 'reflect-metadata';
11 | import 'zone.js';
12 | import 'jquery';
13 | import 'bootstrap';
14 | import 'bootstrap/dist/css/bootstrap.min.css';
--------------------------------------------------------------------------------
/chapter10/0.auction/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | CH10 : Online Auction
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/chapter10/0.auction/client/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function (config) {
2 | config.set({
3 | browsers : ['Chrome', 'Firefox'],
4 | frameworks : ['jasmine'],
5 | reporters : ['mocha'],
6 | singleRun : true,
7 | preprocessors : { './karma-test-runner.js' : ['webpack'] },
8 | files : [{ pattern : './karma-test-runner.js', watched : false }],
9 | webpack : require('./webpack.config.js'),
10 | webpackServer : { noInfo : true }
11 | });
12 | };
--------------------------------------------------------------------------------
/chapter10/0.auction/client/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "sourceMap" : true,
7 | "target" : "ES5",
8 | "lib": ["es2015", "dom"]
9 | },
10 | "exclude" : [
11 | "node_modules"
12 | ]
13 | }
--------------------------------------------------------------------------------
/chapter10/0.auction/client/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare const webpack : {
2 | MODE : string
3 | };
--------------------------------------------------------------------------------
/chapter10/0.auction/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "auction_server",
3 | "private": true,
4 | "scripts": {
5 | "dev": "nodemon build/auction.js",
6 | "start": "node build/auction.js"
7 | },
8 | "dependencies": {
9 | "compression": "^1.6.2",
10 | "express": "^4.15.2",
11 | "ws": "^2.3.1"
12 | },
13 | "devDependencies": {
14 | "@types/express": "^4.0.35",
15 | "@types/ws": "^0.0.41",
16 | "nodemon": "^1.11.0",
17 | "typescript": "^2.3.3"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/chapter10/0.auction/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "outDir" : "build",
7 | "target" : "ES5",
8 | "lib": ["es2015", "dom"]
9 | },
10 | "exclude" : [
11 | "node_modules"
12 | ]
13 | }
--------------------------------------------------------------------------------
/chapter10/1.hello_world/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/chapter10/1.hello_world/main.js:
--------------------------------------------------------------------------------
1 | document.write('Hello World!');
--------------------------------------------------------------------------------
/chapter10/1.hello_world/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | module.exports = {
4 | entry : './main',
5 | output : {
6 | path : path.resolve(__dirname, 'dist'),
7 | filename : 'bundle.js'
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/chapter10/2.hello_world_devserver/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/chapter10/2.hello_world_devserver/main.js:
--------------------------------------------------------------------------------
1 | document.write('Hello World!');
--------------------------------------------------------------------------------
/chapter10/2.hello_world_devserver/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hello_world_devserver",
3 | "description": "Hello world with webpack-dev-server",
4 | "scripts": {
5 | "start": "webpack-dev-server"
6 | },
7 | "dependencies": {
8 | "webpack": "^2.5.1",
9 | "webpack-dev-server": "^2.4.5"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/chapter10/2.hello_world_devserver/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 |
3 | module.exports = {
4 | entry : './main',
5 | output : {
6 | path : path.resolve(__dirname, 'dist'),
7 | filename : 'bundle.js'
8 | },
9 | devServer : {
10 | contentBase : '.'
11 | }
12 | };
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { LocationStrategy, HashLocationStrategy } from '@angular/common';
3 | import { HttpModule } from '@angular/http'
4 | import { BrowserModule } from '@angular/platform-browser'
5 | import { RouterModule } from '@angular/router'
6 |
7 | import { ROUTING } from './app.routing';
8 | import { AppComponent } from './components/app.component';
9 | import { AboutComponent } from './components/about.component';
10 | import { HomeComponent } from './components/home.component';
11 |
12 | @NgModule({
13 | imports : [BrowserModule, HttpModule, ROUTING],
14 | declarations : [AppComponent, AboutComponent, HomeComponent],
15 | bootstrap : [AppComponent],
16 | providers : [
17 | { provide : LocationStrategy, useClass : HashLocationStrategy },
18 | ]
19 | })
20 | export class AppModule {}
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { HomeComponent } from './components/home.component';
5 | import { AboutComponent } from './components/about.component';
6 |
7 | export const ROUTES : Routes = [
8 | { path : '', component : HomeComponent },
9 | { path : 'about', component : AboutComponent }
10 | ];
11 |
12 | export const ROUTING : ModuleWithProviders = RouterModule.forRoot(ROUTES);
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/components/about.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'my-about',
5 | template : `
6 | About Component
7 | This is the about component
8 | `
9 | })
10 | export class AboutComponent {}
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/components/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HomeComponent } from './home.component';
3 | import { AboutComponent } from './about.component';
4 |
5 | @Component({
6 | selector : 'app',
7 | template : `
8 | Basic Webpack Starter
9 |
13 |
14 |
15 |
16 | `
17 | })
18 | export class AppComponent {}
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/components/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector : 'my-home',
5 | template : `
6 | Home Component
7 | Welcome to the Angular Webpack Starter project!
8 | `
9 | })
10 | export class HomeComponent {}
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Basic Webpack Starter
6 |
7 |
8 |
9 | Loading...
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | import { AppModule } from './app.module';
3 |
4 | platformBrowserDynamic().bootstrapModule(AppModule);
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/app/vendor.ts:
--------------------------------------------------------------------------------
1 | import '@angular/core';
2 | import '@angular/common';
3 | import '@angular/http';
4 | import '@angular/platform-browser';
5 | import '@angular/platform-browser-dynamic';
6 | import '@angular/router';
7 | import 'zone.js/dist/zone.min';
8 | import 'reflect-metadata/Reflect.js';
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic_webpack_starter",
3 | "description": "A basic Webpack-based starter project for an Angular application",
4 | "private": true,
5 | "scripts": {
6 | "build": "webpack",
7 | "start": "webpack-dev-server --inline --progress --port 8080"
8 | },
9 | "devDependencies": {
10 | "@angular/common": "^4.1.0",
11 | "@angular/compiler": "^4.1.0",
12 | "@angular/core": "^4.1.0",
13 | "@angular/http": "^4.1.0",
14 | "@angular/platform-browser": "^4.1.0",
15 | "@angular/platform-browser-dynamic": "^4.1.0",
16 | "@angular/router": "^4.1.0",
17 | "awesome-typescript-loader": "^3.1.3",
18 | "copy-webpack-plugin": "^4.0.1",
19 | "reflect-metadata": "^0.1.10",
20 | "rxjs": "^5.4.0",
21 | "typescript": "^2.3.3",
22 | "webpack": "^2.5.1",
23 | "webpack-dev-server": "^2.4.5",
24 | "zone.js": "^0.8.10"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/chapter10/3.basic_webpack_starter/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions" : {
3 | "emitDecoratorMetadata" : true,
4 | "experimentalDecorators" : true,
5 | "module" : "commonjs",
6 | "sourceMap" : true,
7 | "target" : "ES5",
8 | "lib": ["es2015", "dom"]
9 | },
10 | "exclude" : [
11 | "node_modules"
12 | ]
13 | }
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { LocationStrategy, HashLocationStrategy } from '@angular/common';
3 | import { HttpModule } from '@angular/http'
4 | import { BrowserModule } from '@angular/platform-browser'
5 | import { RouterModule } from '@angular/router'
6 |
7 | import { ROUTING } from './app.routing';
8 | import { AppComponent } from './components/app.component';
9 | import { AboutComponent } from './components/about.component';
10 | import { HomeComponent } from './components/home.component';
11 |
12 | @NgModule({
13 | imports : [BrowserModule, HttpModule, ROUTING],
14 | declarations : [AppComponent, AboutComponent, HomeComponent],
15 | bootstrap : [AppComponent],
16 | providers : [
17 | { provide : LocationStrategy, useClass : HashLocationStrategy },
18 | ]
19 | })
20 | export class AppModule {}
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/app.routing.ts:
--------------------------------------------------------------------------------
1 | import { ModuleWithProviders } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { HomeComponent } from './components/home.component';
5 | import { AboutComponent } from './components/about.component';
6 |
7 | export const ROUTES : Routes = [
8 | { path : '', component : HomeComponent },
9 | { path : 'about', component : AboutComponent }
10 | ];
11 |
12 | export const ROUTING : ModuleWithProviders = RouterModule.forRoot(ROUTES);
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/components/about.component.css:
--------------------------------------------------------------------------------
1 | .aboutRoot {
2 | background-color : pink;
3 | }
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/components/about.component.html:
--------------------------------------------------------------------------------
1 |
2 |
About Component
3 |
This is the about component
4 |
Angular Webpack Starter
2 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/components/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { HomeComponent } from './home.component';
3 | import { AboutComponent } from './about.component';
4 |
5 | @Component({
6 | selector : 'app',
7 | template : require('./app.component.html')
8 | })
9 | export class AppComponent {}
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/components/home.component.css:
--------------------------------------------------------------------------------
1 | .homeRoot {
2 | background-color : cyan;
3 | }
--------------------------------------------------------------------------------
/chapter10/4.angular_webpack_starter/app/components/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
Home Component
3 |
Welcome to the Angular Webpack Starter project!
4 |
2 |
3 |
10 |
2 |
3 |
4 |
{{ product.price | currency }}
5 |
6 |
{{ product.description }}
7 |
8 |
11 |
2 |
6 |
7 | {{ rating | number :'.0-2' }} stars
8 |
9 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/app/services/bid.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { BidService } from './bid.service';
4 | import { WebsocketService } from './websocket.service';
5 |
6 | describe('BidService', () => {
7 | beforeEach(() => {
8 | TestBed.configureTestingModule({
9 | providers : [BidService, WebsocketService]
10 | });
11 | });
12 |
13 | it('should be created', inject([BidService], (service : BidService) => {
14 | expect(service).toBeTruthy();
15 | }));
16 | });
17 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/app/services/bid.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { WebsocketService } from 'app/services/websocket.service';
3 | import { Observable } from 'rxjs/Observable';
4 | import { Subscriber } from 'rxjs/Subscriber';
5 |
6 | @Injectable()
7 | export class BidService {
8 | constructor (private webSocket : WebsocketService) {}
9 |
10 | watchProduct (productId : number) : Observable {
11 | const openSubscriber = Subscriber.create(
12 | () => this.webSocket.send({ productId : productId }));
13 |
14 | return this.webSocket.createObservableSocket('ws://localhost:8000', openSubscriber)
15 | .map(message => JSON.parse(message));
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/app/services/websocket.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, inject } from '@angular/core/testing';
2 |
3 | import { WebsocketService } from './websocket.service';
4 |
5 | describe('WebsocketService', () => {
6 | beforeEach(() => {
7 | TestBed.configureTestingModule({
8 | providers : [WebsocketService]
9 | });
10 | });
11 |
12 | it('should be created', inject([WebsocketService], (service : WebsocketService) => {
13 | expect(service).toBeTruthy();
14 | }));
15 | });
16 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/app/services/websocket.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { Subscriber } from 'rxjs/Subscriber';
3 | import { Observable } from 'rxjs/Observable';
4 |
5 | @Injectable()
6 | export class WebsocketService {
7 | private ws : WebSocket;
8 |
9 | createObservableSocket (url : string, openSubscriber : Subscriber) : Observable {
10 | this.ws = new WebSocket(url);
11 | return new Observable(observer => {
12 | this.ws.onmessage = event => observer.next(event.data);
13 | this.ws.onerror = event => observer.error(event);
14 | this.ws.onclose = event => observer.complete();
15 | this.ws.onopen = event => {
16 | openSubscriber.next();
17 | openSubscriber.complete();
18 | };
19 |
20 | return () => this.ws.close();
21 | });
22 | }
23 |
24 | send (message : any) {
25 | this.ws.send(JSON.stringify(message));
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/chapter10/auction-cli/src/assets/.gitkeep
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/chapter10/auction-cli/src/favicon.ico
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | AuctionCli
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule);
12 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "baseUrl": "",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "baseUrl": "",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/chapter10/auction-cli/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "baseUrl": "src",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2016",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/.editorconfig:
--------------------------------------------------------------------------------
1 | # Editor configuration, see http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | indent_style = space
7 | indent_size = 2
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 |
8 | # dependencies
9 | /node_modules
10 |
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 |
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 |
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 |
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 |
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { BasicCliPage } from './app.po';
2 |
3 | describe('basic-cli App', () => {
4 | let page: BasicCliPage;
5 |
6 | beforeEach(() => {
7 | page = new BasicCliPage();
8 | });
9 |
10 | it('should display message saying app works', () => {
11 | page.navigateTo();
12 | expect(page.getParagraphText()).toEqual('app works!');
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/e2e/app.po.ts:
--------------------------------------------------------------------------------
1 | import { browser, by, element } from 'protractor';
2 |
3 | export class BasicCliPage {
4 | navigateTo() {
5 | return browser.get('/');
6 | }
7 |
8 | getParagraphText() {
9 | return element(by.css('app-root h1')).getText();
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/e2e",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "types": [
8 | "jasmine",
9 | "node"
10 | ]
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | beforeLaunch: function() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | },
27 | onPrepare() {
28 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/app/app.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/chapter10/basic-cli/src/app/app.component.css
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
3 |
4 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-root',
5 | templateUrl: './app.component.html',
6 | styleUrls: ['./app.component.css']
7 | })
8 | export class AppComponent {
9 | title = 'app works!';
10 | }
11 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { BrowserModule } from '@angular/platform-browser';
2 | import { NgModule } from '@angular/core';
3 | import { FormsModule } from '@angular/forms';
4 | import { HttpModule } from '@angular/http';
5 |
6 | import { AppComponent } from './app.component';
7 |
8 | @NgModule({
9 | declarations: [
10 | AppComponent
11 | ],
12 | imports: [
13 | BrowserModule,
14 | FormsModule,
15 | HttpModule
16 | ],
17 | providers: [],
18 | bootstrap: [AppComponent]
19 | })
20 | export class AppModule { }
21 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/chapter10/basic-cli/src/assets/.gitkeep
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | production: false
8 | };
9 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/chapter10/basic-cli/src/favicon.ico
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | BasicCli
6 |
7 |
8 |
9 |
10 |
11 |
12 | Loading...
13 |
14 |
15 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | if (environment.production) {
8 | enableProdMode();
9 | }
10 |
11 | platformBrowserDynamic().bootstrapModule(AppModule);
12 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "module": "es2015",
6 | "baseUrl": "",
7 | "types": []
8 | },
9 | "exclude": [
10 | "test.ts",
11 | "**/*.spec.ts"
12 | ]
13 | }
14 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "module": "commonjs",
6 | "target": "es5",
7 | "baseUrl": "",
8 | "types": [
9 | "jasmine",
10 | "node"
11 | ]
12 | },
13 | "files": [
14 | "test.ts"
15 | ],
16 | "include": [
17 | "**/*.spec.ts",
18 | "**/*.d.ts"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/chapter10/basic-cli/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "./dist/out-tsc",
5 | "baseUrl": "src",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "moduleResolution": "node",
9 | "emitDecoratorMetadata": true,
10 | "experimentalDecorators": true,
11 | "target": "es5",
12 | "typeRoots": [
13 | "node_modules/@types"
14 | ],
15 | "lib": [
16 | "es2016",
17 | "dom"
18 | ]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/chapterA/A.1 template literal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
21 |
22 |
--------------------------------------------------------------------------------
/chapterA/A.10 generator.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
26 |
27 |
--------------------------------------------------------------------------------
/chapterA/A.13 static variable.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
--------------------------------------------------------------------------------
/chapterA/A.14 getter setter.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
--------------------------------------------------------------------------------
/chapterA/A.2 optional parameters.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
17 |
--------------------------------------------------------------------------------
/chapterA/A.3 variable Hoisting.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
--------------------------------------------------------------------------------
/chapterA/A.4 variable Scope.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/chapterA/A.5 variables with let.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/chapterA/A.6 this and that.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/chapterA/A.7 fat arrow.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/chapterA/A.9 spread.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/chapterA/module/billing.js:
--------------------------------------------------------------------------------
1 | function validateBillingInfo () {
2 | console.log('Validating billing info...');
3 | }
4 |
5 | export function processPayment () {
6 | console.log('processing payment...');
7 | }
8 |
--------------------------------------------------------------------------------
/chapterA/module/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
25 |
26 |
--------------------------------------------------------------------------------
/chapterA/module/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "module",
3 | "scripts": {
4 | "start": "http-server"
5 | },
6 | "dependencies": {
7 | "es6-module-loader": "^0.17.11",
8 | "http-server": "^0.10.0",
9 | "traceur": "^0.0.111"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/chapterA/module/shipping.js:
--------------------------------------------------------------------------------
1 | import { processPayment } from 'billing.js';
2 |
3 | export function ship () {
4 | processPayment();
5 | console.log('Shipping products...');
6 | }
7 |
8 | function calculateShippingCost () {
9 | console.log('Calculating shipping cost');
10 | }
--------------------------------------------------------------------------------
/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/cover.jpg
--------------------------------------------------------------------------------
/cover_3D.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/han41858/Angular-Development-with-TypeScript/371f51d1c93f7978cad1bfdd9f2f48944b8678ee/cover_3D.png
--------------------------------------------------------------------------------