https://github.com/loiane/modern-angular

Modern Angular application to showcase stand-alone components, typed forms, signals and newer features
https://github.com/loiane/modern-angular

angular angular-signals angularv14 angularv15 angularv16 angularv17 signals standalone-components typed-form

Last synced: about 2 months ago
JSON representation

Modern Angular application to showcase stand-alone components, typed forms, signals and newer features

• Host: GitHub
• URL: https://github.com/loiane/modern-angular
• Owner: loiane
• License: apache-2.0
• Created: 2023-08-22T15:09:46.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-26T13:38:41.000Z (5 months ago)
• Last Synced: 2024-05-02T05:39:39.242Z (5 months ago)
• Topics: angular, angular-signals, angularv14, angularv15, angularv16, angularv17, signals, standalone-components, typed-form
• Language: TypeScript
• Homepage:
• Size: 832 KB
• Stars: 52
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular Shop

![Angular Build](https://github.com/loiane/angular-shop/actions/workflows/angular.yml/badge.svg?branch=main)

Sample project created to showcase the latest and modern Angular features:

- Standalone Components and API (Angular v14 and v15)

- Typed Forms (Angular v14)

- Signals (Angular v16)

- Input Validation (Angular v16)

- New Control Flow (Angular v17)

## Branches

- [classic](https://github.com/loiane/angular-shop/tree/classic): code with ngModules and RxJS for computed properties

- [main](https://github.com/loiane/angular-shop/tree/main): latest code with all features mentioned above

- [standalone-components](https://github.com/loiane/angular-shop/tree/standalone-components): standalone components and types forms

- [signals](https://github.com/loiane/angular-shop/tree/signals): standalone + signals

## ⌨️ Editor / IDE

- Visual Studio Code

- Angular Extensions [link](https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack)

## Screenshots

Main page with products list:



  



Cart page:



  



## Executing the code locally

You need to have Node.js / NPM installed locally.

1. Install all the required dependencies:

```

npm install

```

2. Execute the project:

```

npm run start

```

This command will run the Angular project with a proxy to the Java server, without requiring CORS.

Open your browser and access **http://localhost:4200** (Angular default port).