();
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Components
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-footer',
8 | templateUrl: 'app/footer/footer.component.html'
9 | })
10 | export class FooterComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/main.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5 |
6 | import { AppModule } from './app.module';
7 |
8 | const platform = platformBrowserDynamic();
9 |
10 | platform.bootstrapModule(AppModule);
11 |
12 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { Component } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-navbar',
8 | templateUrl: 'app/navbar/navbar.component.html'
9 | })
10 | export class NavbarComponent { }
11 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/product/product-grid.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_7/4.ecommerce-cart-view/app/product/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
2 |
3 |
4 |
6 |
7 |
10 |
11 |
12 |
2 |
3 |
4 |
5 |
{{category.title}}
6 |
{{category.desc}}
7 |
8 |
9 |
10 |
2 |
3 |
{{category.title}}
4 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Components
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-footer',
8 | templateUrl: 'app/footer/footer.component.html'
9 | })
10 | export class FooterComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/main.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
5 |
6 | import { AppModule } from './app.module';
7 |
8 | const platform = platformBrowserDynamic();
9 |
10 | platform.bootstrapModule(AppModule);
11 |
12 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { Component } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-navbar',
8 | templateUrl: 'app/navbar/navbar.component.html'
9 | })
10 | export class NavbarComponent { }
11 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/product/product-grid.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_7/5.ecommerce-checkout-view/app/product/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
7 | Child
8 |
`,
9 | styles: [`
10 | .child {
11 | background: red;
12 | color: yellow;
13 | }
14 | `]
15 | })
16 | export class ChildComponent { }
--------------------------------------------------------------------------------
/chapter_8/1.view-encapsulation/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/1.view-encapsulation/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/1.view-encapsulation/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/1.view-encapsulation/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/2.after-content/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 |
8 | `
9 | })
10 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/2.after-content/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule],
10 | declarations: [AppComponent, ParentComponent, ChildComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/2.after-content/app/child.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-child',
5 | template: `
6 |
7 | Child is {{status}}
8 |
`,
9 | styles: [`
10 | .child {
11 | background: red;
12 | color: yellow;
13 | }
14 | `]
15 | })
16 | export class ChildComponent {
17 | @Input() status: string = 'Not Ready';
18 | }
--------------------------------------------------------------------------------
/chapter_8/2.after-content/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/2.after-content/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/2.after-content/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/2.after-content/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/3.after-view/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 | `
8 | })
9 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/3.after-view/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule],
10 | declarations: [AppComponent, ParentComponent, ChildComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/3.after-view/app/child.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-child',
5 | template: `
6 |
7 | Child is {{status}}
8 |
`,
9 | styles: [`
10 | .child {
11 | background: red;
12 | color: yellow;
13 | }
14 | `]
15 | })
16 | export class ChildComponent {
17 | @Input() status: string = 'Not Ready';
18 | }
--------------------------------------------------------------------------------
/chapter_8/3.after-view/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/3.after-view/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/3.after-view/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/3.after-view/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 | `
8 | })
9 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule],
10 | declarations: [AppComponent, ParentComponent, ChildComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/4.parent-child-input-binding/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 | `
8 | })
9 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 | import {NgInit} from './ng-init.directive';
8 |
9 | @NgModule({
10 | imports: [BrowserModule],
11 | declarations: [AppComponent, ParentComponent, ChildComponent, NgInit],
12 | bootstrap: [AppComponent]
13 | })
14 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/app/child.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-child',
5 | template: `
6 |
7 | {{desc}}
8 |
`,
9 | styles: [`
10 | .child {
11 | background: red;
12 | color: yellow;
13 | }
14 | `]
15 | })
16 | export class ChildComponent {
17 | @Input() desc: string;
18 |
19 | setDesc(value: string) {
20 | this.desc = value;
21 | }
22 | }
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/app/ng-init.directive.ts:
--------------------------------------------------------------------------------
1 | import {Directive, Input} from '@angular/core';
2 |
3 | @Directive({
4 | selector: '[ngInit]'
5 | })
6 | export class NgInit {
7 | @Input() ngInit;
8 |
9 | ngOnInit() {
10 | if(this.ngInit) {
11 | this.ngInit();
12 | }
13 | }
14 | }
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/5.parent-child-local-variable/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 | `
8 | })
9 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule],
10 | declarations: [AppComponent, ParentComponent, ChildComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/app/child.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, Input, OnInit} from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-child',
5 | template: `
6 |
7 | {{desc}}
8 |
`,
9 | styles: [`
10 | .child {
11 | background: red;
12 | color: yellow;
13 | }
14 | `]
15 | })
16 | export class ChildComponent implements OnInit {
17 | @Input() desc: string = "You are mine";
18 |
19 | ngOnInit(): void {
20 | this.desc = "You are checked";
21 | }
22 | }
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/6.parent-child-viewchild/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/app/app.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'my-app',
5 | template: `
6 |
7 | `
8 | })
9 | export class AppComponent { }
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 |
4 | import {AppComponent} from './app.component';
5 | import {ParentComponent} from './parent.component';
6 | import {ChildComponent} from './child.component';
7 |
8 | @NgModule({
9 | imports: [BrowserModule],
10 | declarations: [AppComponent, ParentComponent, ChildComponent],
11 | bootstrap: [AppComponent]
12 | })
13 | export class AppModule { }
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/app/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 |
3 | import {AppModule} from './app.module';
4 |
5 | platformBrowserDynamic().bootstrapModule(AppModule);
6 |
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/styles.css:
--------------------------------------------------------------------------------
1 | /* Master Styles */
2 | body {
3 | margin: 2em;
4 | }
5 |
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/chapter_8/7.parent-child-service/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160725163759",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160909174046"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 | "projects": {
3 | "default": "ecommerce-a99fc"
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'my-app',
8 | templateUrl: 'app/app.component.html',
9 | })
10 | export class AppComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/cart/cart-item-count.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/cart/cart-menu.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Cart, CartService} from './cart.service';
10 |
11 | @Component({
12 | selector: 'db-cart-menu',
13 | templateUrl: 'app/cart/cart-menu.component.html'
14 | })
15 | export class CartMenuComponent {
16 |
17 | private cart: Cart;
18 |
19 | constructor(private cartService: CartService) {
20 | this.cart = this.cartService.cart;
21 | }
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/category/category-card.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
{{category.title}}
6 |
{{category.desc}}
7 |
8 |
9 |
10 |
3 |
{{category.title}}
4 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/category/category-slide.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input, Output, EventEmitter} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Category} from './category.service';
10 |
11 | @Component({
12 | selector: 'db-category-slide',
13 | templateUrl: 'app/category/category-slide.component.html'
14 | })
15 | export class CategorySlideComponent {
16 | @Input() category: Category;
17 | @Output() select: EventEmitter = new EventEmitter();
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Components
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-footer',
8 | templateUrl: 'app/footer/footer.component.html'
9 | })
10 | export class FooterComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/main.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
5 |
6 | /*
7 | * The app module
8 | */
9 | import {AppModule} from './app.module';
10 |
11 | /*
12 | * Bootstrap out application
13 | */
14 | platformBrowserDynamic().bootstrapModule(AppModule);
15 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { Component } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-navbar',
8 | templateUrl: 'app/navbar/navbar.component.html'
9 | })
10 | export class NavbarComponent { }
11 |
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/product/product-grid.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/product/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
2 |
3 |
5 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/app/product/product-search.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from '@angular/core';
5 | import {Router} from '@angular/router';
6 |
7 | @Component({
8 | selector: 'db-product-search',
9 | templateUrl: 'app/product/product-search.component.html'
10 | })
11 | export class ProductSearchComponent {
12 |
13 | constructor(private router: Router) {}
14 |
15 | searchProduct(value: string) {
16 | this.router.navigate(['/products'], { queryParams: { search: value} });
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/database.rules.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | ".read": true,
4 | ".write": "auth != null",
5 | "products": {
6 | ".indexOn": ["categoryId", "title"]
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/firebase.json:
--------------------------------------------------------------------------------
1 | {
2 | "database": {
3 | "rules": "database.rules.json"
4 | },
5 | "hosting": {
6 | "public": ".",
7 | "rewrites": [
8 | {
9 | "source": "**",
10 | "destination": "/index.html"
11 | }
12 | ]
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
--------------------------------------------------------------------------------
/chapter_9/ecommerce-firebase/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160602141332",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160807145350"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'my-app',
8 | templateUrl: 'app/app.component.html',
9 | })
10 | export class AppComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/cart/cart-item-count.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/cart/cart-menu.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Cart, CartService} from './cart.service';
10 |
11 | @Component({
12 | selector: 'db-cart-menu',
13 | templateUrl: 'app/cart/cart-menu.component.html'
14 | })
15 | export class CartMenuComponent {
16 |
17 | private cart: Cart;
18 |
19 | constructor(private cartService: CartService) {
20 | this.cart = this.cartService.cart;
21 | }
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/category/category-card.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
{{category.title}}
6 |
{{category.desc}}
7 |
8 |
9 |
10 |
3 |
{{category.title}}
4 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/category/category-slide.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input, Output, EventEmitter} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Category} from './category.service';
10 |
11 | @Component({
12 | selector: 'db-category-slide',
13 | templateUrl: 'app/category/category-slide.component.html'
14 | })
15 | export class CategorySlideComponent {
16 | @Input() category: Category;
17 | @Output() select: EventEmitter = new EventEmitter();
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Components
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-footer',
8 | templateUrl: 'app/footer/footer.component.html'
9 | })
10 | export class FooterComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/main.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
5 |
6 | /*
7 | * The app module
8 | */
9 | import {AppModule} from './app.module';
10 |
11 | /*
12 | * Bootstrap out application
13 | */
14 | platformBrowserDynamic().bootstrapModule(AppModule);
15 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { Component } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-navbar',
8 | templateUrl: 'app/navbar/navbar.component.html'
9 | })
10 | export class NavbarComponent { }
11 |
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/product/product-grid.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/product/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
2 |
3 |
5 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/app/product/product-search.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from '@angular/core';
5 | import {Router} from '@angular/router';
6 |
7 | @Component({
8 | selector: 'db-product-search',
9 | templateUrl: 'app/product/product-search.component.html'
10 | })
11 | export class ProductSearchComponent {
12 |
13 | constructor(private router: Router) {}
14 |
15 | searchProduct(value: string) {
16 | this.router.navigate(['/products'], { queryParams: { search: value} });
17 | }
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "emitDecoratorMetadata": true,
8 | "experimentalDecorators": true,
9 | "removeComments": false,
10 | "noImplicitAny": false
11 | }
12 | }
--------------------------------------------------------------------------------
/chapter_9/ecommerce-observable/typings.json:
--------------------------------------------------------------------------------
1 | {
2 | "globalDependencies": {
3 | "core-js": "registry:dt/core-js#0.0.0+20160602141332",
4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
5 | "node": "registry:dt/node#6.0.0+20160807145350"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/app.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/app.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'my-app',
8 | templateUrl: 'app/app.component.html',
9 | })
10 | export class AppComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/cart/cart-item-count.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/cart/cart-menu.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Cart, CartService} from './cart.service';
10 |
11 | @Component({
12 | selector: 'db-cart-menu',
13 | templateUrl: 'app/cart/cart-menu.component.html'
14 | })
15 | export class CartMenuComponent {
16 |
17 | private cart: Cart;
18 |
19 | constructor(private cartService: CartService) {
20 | this.cart = this.cartService.cart;
21 | }
22 | }
23 |
24 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/category/category-card.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
{{category.title}}
6 |
{{category.desc}}
7 |
8 |
9 |
10 |
3 |
{{category.title}}
4 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/category/category-slide.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {Component, Input, Output, EventEmitter} from '@angular/core';
5 |
6 | /*
7 | * Components
8 | */
9 | import {Category} from './category.service';
10 |
11 | @Component({
12 | selector: 'db-category-slide',
13 | templateUrl: 'app/category/category-slide.component.html'
14 | })
15 | export class CategorySlideComponent {
16 | @Input() category: Category;
17 | @Output() select: EventEmitter = new EventEmitter();
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/footer/footer.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/footer/footer.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Components
3 | */
4 | import {Component} from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-footer',
8 | templateUrl: 'app/footer/footer.component.html'
9 | })
10 | export class FooterComponent {
11 | }
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/main.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
5 |
6 | /*
7 | * The app module
8 | */
9 | import {AppModule} from './app.module';
10 |
11 | /*
12 | * Bootstrap out application
13 | */
14 | platformBrowserDynamic().bootstrapModule(AppModule);
15 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/navbar/navbar.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Angular Imports
3 | */
4 | import { Component } from '@angular/core';
5 |
6 | @Component({
7 | selector: 'db-navbar',
8 | templateUrl: 'app/navbar/navbar.component.html'
9 | })
10 | export class NavbarComponent { }
11 |
12 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/product/product-grid.component.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/chapter_9/ecommerce-promise/app/product/product-list.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
2 |
3 |
4 |
6 |
7 |
10 |
11 |
12 |