first commit
This commit is contained in:
parent
e60f567622
commit
64695153fc
|
|
@ -0,0 +1,17 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.ts]
|
||||
quote_type = single
|
||||
ij_typescript_use_double_quotes = false
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
__screenshots__/
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||
"recommendations": ["angular.ng-template"]
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "ng serve",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: start",
|
||||
"url": "http://localhost:4200/"
|
||||
},
|
||||
{
|
||||
"name": "ng test",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"preLaunchTask": "npm: test",
|
||||
"url": "http://localhost:9876/debug.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
{
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "start",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "npm",
|
||||
"script": "test",
|
||||
"isBackground": true,
|
||||
"problemMatcher": {
|
||||
"owner": "typescript",
|
||||
"pattern": "$tsc",
|
||||
"background": {
|
||||
"activeOnStart": true,
|
||||
"beginsPattern": {
|
||||
"regexp": "(.*?)"
|
||||
},
|
||||
"endsPattern": {
|
||||
"regexp": "bundle generation complete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
# Demo
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.1.
|
||||
|
||||
## Development server
|
||||
|
||||
To start a local development server, run:
|
||||
|
||||
```bash
|
||||
ng serve
|
||||
```
|
||||
|
||||
Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the project run:
|
||||
|
||||
```bash
|
||||
ng build
|
||||
```
|
||||
|
||||
This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"cli": {
|
||||
"packageManager": "npm",
|
||||
"analytics": "cf70d0cb-eff0-4008-94a5-b7d15515d20c"
|
||||
},
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"demo": {
|
||||
"projectType": "application",
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular/build:application",
|
||||
"options": {
|
||||
"browser": "src/main.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "public"
|
||||
}
|
||||
],
|
||||
"styles": [
|
||||
"src/styles.css"
|
||||
],
|
||||
"server": "src/main.server.ts",
|
||||
"outputMode": "server",
|
||||
"ssr": {
|
||||
"entry": "src/server.ts"
|
||||
}
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "500kB",
|
||||
"maximumError": "1MB"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "4kB",
|
||||
"maximumError": "8kB"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"optimization": false,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular/build:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"buildTarget": "demo:build:production"
|
||||
},
|
||||
"development": {
|
||||
"buildTarget": "demo:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular/build:unit-test"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"name": "demo",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"build": "ng build",
|
||||
"watch": "ng build --watch --configuration development",
|
||||
"test": "ng test",
|
||||
"serve:ssr:demo": "node dist/demo/server/server.mjs"
|
||||
},
|
||||
"prettier": {
|
||||
"printWidth": 100,
|
||||
"singleQuote": true,
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.html",
|
||||
"options": {
|
||||
"parser": "angular"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"private": true,
|
||||
"packageManager": "npm@11.6.0",
|
||||
"dependencies": {
|
||||
"@angular/common": "^21.0.0",
|
||||
"@angular/compiler": "^21.0.0",
|
||||
"@angular/core": "^21.0.0",
|
||||
"@angular/forms": "^21.0.0",
|
||||
"@angular/platform-browser": "^21.0.0",
|
||||
"@angular/platform-server": "^21.0.0",
|
||||
"@angular/router": "^21.0.0",
|
||||
"@angular/ssr": "^21.0.1",
|
||||
"express": "^5.1.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular/build": "^21.0.1",
|
||||
"@angular/cli": "^21.0.1",
|
||||
"@angular/compiler-cli": "^21.0.0",
|
||||
"@types/express": "^5.0.1",
|
||||
"@types/node": "^20.17.19",
|
||||
"jsdom": "^27.1.0",
|
||||
"typescript": "~5.9.2",
|
||||
"vitest": "^4.0.8"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -0,0 +1,12 @@
|
|||
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
||||
import { provideServerRendering, withRoutes } from '@angular/ssr';
|
||||
import { appConfig } from './app.config';
|
||||
import { serverRoutes } from './app.routes.server';
|
||||
|
||||
const serverConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideServerRendering(withRoutes(serverRoutes))
|
||||
]
|
||||
};
|
||||
|
||||
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideRouter(routes), provideClientHydration(withEventReplay())
|
||||
]
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<main class="m-2">
|
||||
<!--
|
||||
<app-product-component></app-product-component>
|
||||
<app-phones></app-phones>
|
||||
|
||||
<app-progress-bar></app-progress-bar>
|
||||
|
||||
<app-user-card-component></app-user-card-component>
|
||||
|
||||
<app-form-profile></app-form-profile>
|
||||
-->
|
||||
<app-template-driven-form></app-template-driven-form>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { RenderMode, ServerRoute } from '@angular/ssr';
|
||||
|
||||
export const serverRoutes: ServerRoute[] = [
|
||||
{
|
||||
path: '**',
|
||||
renderMode: RenderMode.Prerender
|
||||
}
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { TestBed } from '@angular/core/testing';
|
||||
import { App } from './app';
|
||||
|
||||
describe('App', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [App],
|
||||
}).compileComponents();
|
||||
});
|
||||
|
||||
it('should create the app', () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
const app = fixture.componentInstance;
|
||||
expect(app).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should render title', async () => {
|
||||
const fixture = TestBed.createComponent(App);
|
||||
await fixture.whenStable();
|
||||
const compiled = fixture.nativeElement as HTMLElement;
|
||||
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Component, signal } from '@angular/core';
|
||||
import { ProductComponent } from './product-component/product-component';
|
||||
import { Phones } from "./phones/phones";
|
||||
import { ProgressBar } from "./progress-bar/progress-bar";
|
||||
import { UserCardComponent } from './user-card-component/user-card-component';
|
||||
import { FormProfile } from './form-profile/form-profile';
|
||||
import { TemplateDrivenForm } from './template-driven-form/template-driven-form';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
imports: [TemplateDrivenForm],
|
||||
templateUrl: './app.html',
|
||||
styleUrl: './app.css'
|
||||
})
|
||||
export class App {
|
||||
protected readonly title = signal('demo');
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<h1>Current Customer</h1>
|
||||
<p>Name: {{ myProfile.name }}</p>
|
||||
<p>Phone number: {{ myProfile.phoneNumber }}</p>
|
||||
<p>email: {{ myProfile.email }}</p>
|
||||
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name:</label>
|
||||
<input type="text" class="form-control" id="name" [(ngModel)]="myProfile.name"/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="phoneNonber" class="form-label">Phone Number:</label>
|
||||
<input type="text" class="form-control" id="phoneNumber" [(ngModel)]="myProfile.phoneNumber"/>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email address</label>
|
||||
<input type="email" class="form-control" id="emai" [value]="myProfile.email"/>
|
||||
</div>
|
||||
|
||||
<button (click)="updateEmail($event)" class="btn btn-primary">Set Email</button>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FormProfile } from './form-profile';
|
||||
|
||||
describe('FormProfile', () => {
|
||||
let component: FormProfile;
|
||||
let fixture: ComponentFixture<FormProfile>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [FormProfile]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(FormProfile);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { Profile } from './profile';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form-profile',
|
||||
imports: [FormsModule],
|
||||
templateUrl: './form-profile.html',
|
||||
styleUrl: './form-profile.css',
|
||||
})
|
||||
export class FormProfile {
|
||||
|
||||
myProfile: Profile = {
|
||||
name: 'Federico Volpini',
|
||||
phoneNumber: '329 0761705',
|
||||
email: 'federico.volpini@isti.cnr.it'
|
||||
}
|
||||
|
||||
updateEmail($event: any) {
|
||||
console.log($event)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export type Profile = {
|
||||
name: string,
|
||||
phoneNumber: string
|
||||
email: string
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
export type PhoneType = "home" | "work" | "partner"
|
||||
|
||||
export type Phone ={
|
||||
value: string,
|
||||
type: PhoneType
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<h1>Phones</h1>
|
||||
<ul class="list-group">
|
||||
@for (p of phones; track $index){
|
||||
<li class="list-group-item d-flex align-items-center justify-content-between">
|
||||
<h3 class="m-0">{{ $index + 1 }} - {{ p.value }}</h3>
|
||||
@if (p.type == "home"){
|
||||
<p class="m-0 ml-3"><span class="badge text-bg-danger">Warning! this is a {{p.type}} phone </span></p>
|
||||
} @else {
|
||||
<p class="m-0 ml-3"><span class="badge text-bg-primary">{{p.type}}</span></p>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { Phones } from './phones';
|
||||
|
||||
describe('Phones', () => {
|
||||
let component: Phones;
|
||||
let fixture: ComponentFixture<Phones>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [Phones]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(Phones);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Phone, PhoneType } from './phone';
|
||||
|
||||
@Component({
|
||||
selector: 'app-phones',
|
||||
imports: [],
|
||||
templateUrl: './phones.html',
|
||||
styleUrl: './phones.css',
|
||||
})
|
||||
export class Phones {
|
||||
phones: Phone[] = [
|
||||
{
|
||||
value: "329 0371705",
|
||||
type: "home"
|
||||
},
|
||||
{
|
||||
value: "050 621 3140",
|
||||
type: "work"
|
||||
},
|
||||
{
|
||||
value: "380 2951205",
|
||||
type: "partner"
|
||||
},
|
||||
{
|
||||
value: "050 37565",
|
||||
type: "home"
|
||||
},
|
||||
{
|
||||
value: "380 12345678",
|
||||
type: "work"
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,11 @@
|
|||
<li class="card text-center m-2 p-2">
|
||||
<div class="card-header">
|
||||
<h1>{{ product().name }}</h1>
|
||||
</div>
|
||||
<div class=""card-body>
|
||||
<p class="mt-2">Onky <em><strong>{{ product().price}}€</strong></em></p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-success" (click)="addToCart()">Add to Cart</button>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProductCardComponent } from './product-card-component';
|
||||
|
||||
describe('ProductCardComponent', () => {
|
||||
let component: ProductCardComponent;
|
||||
let fixture: ComponentFixture<ProductCardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProductCardComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProductCardComponent);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { Component, input, output} from '@angular/core';
|
||||
import { Product } from '../product-component/product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-card-component',
|
||||
imports: [],
|
||||
templateUrl: './product-card-component.html',
|
||||
styleUrl: './product-card-component.css',
|
||||
})
|
||||
export class ProductCardComponent {
|
||||
product = input.required<Product>()
|
||||
addProductEvent = output<Product>()
|
||||
|
||||
addToCart(){
|
||||
console.log("addToCart", this.product())
|
||||
this.addProductEvent.emit(this.product())
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<section class="text-center">
|
||||
<h2>Cart</h2>
|
||||
<p>Products count: {{ p_count }}, Total price: {{ total }}€</p>
|
||||
<h2>Product List</h2>
|
||||
</section>
|
||||
<ul class="d-flex align-items-center justify-content-center">
|
||||
@for (p of products; track $index) {
|
||||
<app-product-card-component (addProductEvent)="addProduct(p)" [product]="p"></app-product-card-component>
|
||||
}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProductComponent } from './product-component';
|
||||
|
||||
describe('ProductComponent', () => {
|
||||
let component: ProductComponent;
|
||||
let fixture: ComponentFixture<ProductComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProductComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProductComponent);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ProductCardComponent } from '../product-card-component/product-card-component';
|
||||
import { Product } from './product';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-component',
|
||||
imports: [ProductCardComponent],
|
||||
templateUrl: './product-component.html',
|
||||
styleUrl: './product-component.css',
|
||||
})
|
||||
|
||||
export class ProductComponent {
|
||||
|
||||
cart: Product[] = []
|
||||
|
||||
products: Product[] = [
|
||||
{ name: "Laptop", price: 999},
|
||||
{ name: "Smartphone", price: 199},
|
||||
{ name: "Table", price: 299},
|
||||
]
|
||||
|
||||
p_count = 0
|
||||
total = 0
|
||||
|
||||
addProduct(event: Product) {
|
||||
console.log("addProduct",event)
|
||||
this.cart.push(event)
|
||||
|
||||
this.p_count += 1
|
||||
this.total += event.price
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export type Product = {
|
||||
name: string,
|
||||
price: number
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.p-bar-container{
|
||||
width:80%;
|
||||
height:2.5em;
|
||||
border: 1px solid gray;
|
||||
border-radius:1em;
|
||||
}
|
||||
|
||||
.p-bar{
|
||||
height:100%;
|
||||
background-color: navy;
|
||||
border-radius:1em;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<div class="d-flex align-items-center justify-content-center">
|
||||
<button (click)="decreaseP()" class="btn btn-primary">-10%</button>
|
||||
<p class="m-0 mx-3">{{ percentage()/100 | percent: ".0" }}</p>
|
||||
<button (click)="increaseP()" class="btn btn-primary">+10%</button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
<div class="p-bar-container">
|
||||
<div [class]="`p-bar text-bg-${statusClass()}`" [style.width.%]="percentage()"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center mt-3">
|
||||
<p><span [className]="`badge text-bg-${statusClass()}`">{{ status() }}</span></p>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProgressBar } from './progress-bar';
|
||||
|
||||
describe('ProgressBar', () => {
|
||||
let component: ProgressBar;
|
||||
let fixture: ComponentFixture<ProgressBar>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [ProgressBar]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ProgressBar);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { Component, signal, WritableSignal } from '@angular/core';
|
||||
import { PercentPipe } from '@angular/common'
|
||||
import { statusClass, statusType } from './status';
|
||||
|
||||
@Component({
|
||||
selector: 'app-progress-bar',
|
||||
imports: [PercentPipe],
|
||||
templateUrl: './progress-bar.html',
|
||||
styleUrl: './progress-bar.css',
|
||||
})
|
||||
export class ProgressBar {
|
||||
percentage= signal(0)
|
||||
status: WritableSignal<statusType> = signal("CRITICAL")
|
||||
statusClass: WritableSignal<statusClass> = signal("danger")
|
||||
|
||||
increaseP(){
|
||||
if(this.percentage() == 100)
|
||||
return
|
||||
this.percentage.update(p => p + 10)
|
||||
this.updateStatus()
|
||||
}
|
||||
decreaseP(){
|
||||
if(this.percentage() == 0)
|
||||
return
|
||||
this.percentage.update(p => p - 10)
|
||||
this.updateStatus()
|
||||
}
|
||||
|
||||
updateStatus(){
|
||||
this.statusClass.update(s => s = this.percentage() > 70 ? "success" : (this.percentage() > 30 ? "warning" : "danger"))
|
||||
this.status.update(s => s = this.percentage() > 70 ? "OK" : (this.percentage() > 30 ? "ATTENTION" : "CRITICAL"))
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type statusType = "CRITICAL" | "ATTENTION" | "OK"
|
||||
export type statusClass = "danger" | "warning" | "success"
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.is-invalid{
|
||||
background-color: pink
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="container mt-4">
|
||||
<form #customerForm="ngForm" (ngSubmit)="onSubmit(customerForm)">
|
||||
<div class="mb-3">
|
||||
<label for="firstName" class="form-label">First Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
[class.is-invcalid]="customerForm.submitted && firstName.errors?.['required']"
|
||||
name="firstName"
|
||||
id="firstName"
|
||||
placeholder="Insert first name"
|
||||
required
|
||||
pattern="[A-Z]{2}[0-9]{3}[A-Z]{2}"
|
||||
#firstName="ngModel"
|
||||
ngModel
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TemplateDrivenForm } from './template-driven-form';
|
||||
|
||||
describe('TemplateDrivenForm', () => {
|
||||
let component: TemplateDrivenForm;
|
||||
let fixture: ComponentFixture<TemplateDrivenForm>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [TemplateDrivenForm]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(TemplateDrivenForm);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormsModule, NgForm } from '@angular/forms';
|
||||
import { NgClass } from "../../../node_modules/@angular/common/types/_common_module-chunk";
|
||||
|
||||
@Component({
|
||||
selector: 'app-template-driven-form',
|
||||
imports: [FormsModule],
|
||||
templateUrl: './template-driven-form.html',
|
||||
styleUrl: './template-driven-form.css',
|
||||
})
|
||||
export class TemplateDrivenForm {
|
||||
|
||||
onSubmit(form: NgForm) {
|
||||
console.log(form.valid)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<h1>Profiles</h1>
|
||||
@for (p of users; track $index){
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h1> {{ p.name | titlecase }} </h1>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>BirthDate: <em>{{ p.birthDate | date }}</em></p>
|
||||
<p>Balance: <em>{{ p.balance | currency: "EUR" }}</em></p>
|
||||
<p>status: <span [class]="`badge text-bg-${p.status == 'active' ? 'success' : 'danger'}`">{{ p.status | userStatus }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserCardComponent } from './user-card-component';
|
||||
|
||||
describe('UserCardComponent', () => {
|
||||
let component: UserCardComponent;
|
||||
let fixture: ComponentFixture<UserCardComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserCardComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UserCardComponent);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { User } from './user';
|
||||
import { CurrencyPipe, DatePipe, TitleCasePipe } from '@angular/common';
|
||||
import { UserStatusPipe } from '../user-status-pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-card-component',
|
||||
imports: [TitleCasePipe, DatePipe, CurrencyPipe, UserStatusPipe],
|
||||
templateUrl: './user-card-component.html',
|
||||
styleUrl: './user-card-component.css',
|
||||
})
|
||||
export class UserCardComponent {
|
||||
users: User[] = [
|
||||
{
|
||||
name: 'federico volpini',
|
||||
birthDate: new Date('1979-10-18'),
|
||||
balance: 1000,
|
||||
status: 'active'
|
||||
},
|
||||
{
|
||||
name: 'giuseppe lipari',
|
||||
birthDate: new Date('1986-04-30'),
|
||||
balance: 2000,
|
||||
status: 'inactive'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export type accountStatus = "active" | "inactive"
|
||||
|
||||
export type User = {
|
||||
name: string,
|
||||
birthDate: Date,
|
||||
balance: number,
|
||||
status: accountStatus
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<h1>{{ name }}</h1>
|
||||
<img [src]="icon" alt="Icon">
|
||||
<div>
|
||||
<button (click)="counter.decrease()">-</button>
|
||||
<p>{{ counter.value() }}</p>
|
||||
<button (click)="counter.increase()">+</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UserCard } from './user-card';
|
||||
|
||||
describe('UserCard', () => {
|
||||
let component: UserCard;
|
||||
let fixture: ComponentFixture<UserCard>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UserCard]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UserCard);
|
||||
component = fixture.componentInstance;
|
||||
await fixture.whenStable();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Component, signal } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-card',
|
||||
imports: [],
|
||||
templateUrl: './user-card.html',
|
||||
styleUrl: './user-card.css',
|
||||
})
|
||||
export class UserCard {
|
||||
name: string = "Angular"
|
||||
icon: string = "assets/img.jpg"
|
||||
|
||||
counter = {
|
||||
value: signal(0),
|
||||
increase: function(){
|
||||
this.value.update( v => v + 1 )
|
||||
},
|
||||
decrease: function(){
|
||||
this.value.update( v => v > 0 ? v - 1 : v )
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { UserStatusPipe } from './user-status-pipe';
|
||||
|
||||
describe('UserStatusPipe', () => {
|
||||
it('create an instance', () => {
|
||||
const pipe = new UserStatusPipe();
|
||||
expect(pipe).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Pipe, PipeTransform } from '@angular/core';
|
||||
import { accountStatus } from './user-card-component/user';
|
||||
|
||||
@Pipe({
|
||||
name: 'userStatus',
|
||||
})
|
||||
export class UserStatusPipe implements PipeTransform {
|
||||
|
||||
transform(value: accountStatus, ...args: unknown[]): string {
|
||||
return value == 'active' ? `Active user` : `Inactive user`
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Demo</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
|
||||
</head>
|
||||
<body>
|
||||
<app-root></app-root>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
|
||||
import { App } from './app/app';
|
||||
import { config } from './app/app.config.server';
|
||||
|
||||
const bootstrap = (context: BootstrapContext) =>
|
||||
bootstrapApplication(App, config, context);
|
||||
|
||||
export default bootstrap;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { App } from './app/app';
|
||||
|
||||
bootstrapApplication(App, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import {
|
||||
AngularNodeAppEngine,
|
||||
createNodeRequestHandler,
|
||||
isMainModule,
|
||||
writeResponseToNodeResponse,
|
||||
} from '@angular/ssr/node';
|
||||
import express from 'express';
|
||||
import { join } from 'node:path';
|
||||
|
||||
const browserDistFolder = join(import.meta.dirname, '../browser');
|
||||
|
||||
const app = express();
|
||||
const angularApp = new AngularNodeAppEngine();
|
||||
|
||||
/**
|
||||
* Example Express Rest API endpoints can be defined here.
|
||||
* Uncomment and define endpoints as necessary.
|
||||
*
|
||||
* Example:
|
||||
* ```ts
|
||||
* app.get('/api/{*splat}', (req, res) => {
|
||||
* // Handle API request
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
/**
|
||||
* Serve static files from /browser
|
||||
*/
|
||||
app.use(
|
||||
express.static(browserDistFolder, {
|
||||
maxAge: '1y',
|
||||
index: false,
|
||||
redirect: false,
|
||||
}),
|
||||
);
|
||||
|
||||
/**
|
||||
* Handle all other requests by rendering the Angular application.
|
||||
*/
|
||||
app.use((req, res, next) => {
|
||||
angularApp
|
||||
.handle(req)
|
||||
.then((response) =>
|
||||
response ? writeResponseToNodeResponse(response, res) : next(),
|
||||
)
|
||||
.catch(next);
|
||||
});
|
||||
|
||||
/**
|
||||
* Start the server if this module is the main entry point, or it is ran via PM2.
|
||||
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
||||
*/
|
||||
if (isMainModule(import.meta.url) || process.env['pm_id']) {
|
||||
const port = process.env['PORT'] || 4000;
|
||||
app.listen(port, (error) => {
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
|
||||
*/
|
||||
export const reqHandler = createNodeRequestHandler(app);
|
||||
|
|
@ -0,0 +1 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": [
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true,
|
||||
"experimentalDecorators": true,
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "preserve"
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
},
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"vitest/globals"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue