ng build --prod ng build --prod --base-href=/project-name/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailComponent } from './product-detail/product-detail.component';
import { CartComponent } from './cart/cart.component';
@NgModule({
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
ProductDetailComponent,
CartComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'product/:productId', component: ProductDetailComponent },
{ path: 'cart', component: CartComponent}
]),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
[
{
"type": "Overnight",
"price": "25.99"
},{
"type": "2-Day",
"price": "9.99"
},{
"type": "Postal",
"price": "2.99"
}
]
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {
constructor() { }
}
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CartService {
items = [];
addItem(product) {
this.items.push(product);
}
getItems() {
return this.items;
}
clearItems() {
this.items = [];
}
constructor() { }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
@NgModule({
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent }
]),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
<app-top-bar></app-top-bar> <app-product-list></app-product-list> <router-outlet></router-outlet>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product-alerts',
templateUrl: './product-alerts.component.html',
styleUrls: ['./product-alerts.component.css']
})
export class ProductAlertsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<p>
<button>Notify Me</button>
</p>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
title = 'Product List';
constructor() { }
ngOnInit() {
}
}
<h1>{{title}}</h1>
ng generate component top-bar ng generate component product-list
# npm install -g # In global mode (ie, with -g or --global appended to the command), # it installs the current package context (ie, the current working directory) as a global package. npm install -g @angular/cli
# new (n) Creates a new workspace and an initial Angular app. ng new my-app # serve (s) Builds and serves your app, rebuilding on file changes. cd my-app ng serve --open
