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
composer create-project --prefer-dist laravel/laravel . "5.8.*"
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root DB_PASSWORD=
'mysql' => [
'driver' => 'mysql',
'url' => env('DATABASE_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'laravel_Db'),
'username' => env('DB_USERNAME', 'root'),
'password' => env('DB_PASSWORD', ''),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
php artisan migrate
'mysql' => [
'driver' => 'mysql',
'url' => env('DATABASE_URL'),
'host' => env('DB_HOST', '127.0.0.1'),
'port' => env('DB_PORT', '3306'),
'database' => env('DB_DATABASE', 'laravel_db'),
'username' => env('DB_USERNAME', 'laravel'),
'password' => env('DB_PASSWORD', 'laravel'),
'unix_socket' => env('DB_SOCKET', ''),
'charset' => 'utf8mb4',
'collation' => 'utf8mb4_unicode_ci',
'prefix' => '',
'prefix_indexes' => true,
'strict' => true,
'engine' => null,
'options' => extension_loaded('pdo_mysql') ? array_filter([
PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
]) : [],
],
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel_db DB_USERNAME=root DB_PASSWORD=
# แสดง Version ของ PHP php -version PHP 7.3.12 (cli) (built: Nov 19 2019 13:58:02) ( ZTS MSVC15 (Visual C++ 2017) x64 ) Copyright (c) 1997-2018 The PHP Group Zend Engine v3.3.12, Copyright (c) 1998-2018 Zend Technologies # แสดง Version ของ Composer composer --version Composer version 1.9.1 2019-11-01 17:20:17
# แสดง Version ของ npm npm -v # Upgrade npm เป็น Version ล่าสุด npm install -g npm@latest
# แสดง Version ของ node.js node -v # Upgrade node.js เป็น Version ล่าสุด npm install -g node