angular-app
angular-app copied to clipboard
Angular 18 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl
Angular 14 / Bootstrap 5 & CRUD REST API
![]() it's a repo designed to create a Web Application with Angular 14
|
Live Demo
Here is a working live demo : https://angular.ganatan.com/
Lighthouse Audit
Table of contents
- Status
- Quick start
- Front-end
- Back-end
- Author
- Documentation
Front-end : What's included
Dependencies
- [x] Angular : 14.1.3
- [x] Angular CLI : 14.1.3
- [x] Angular Universal : 14.1.0
- [x] Bootstrap : 5.2.0
- [x] Fontawesome : 6.1.1
Features
- [x] Routing
- [x] Lazy Loading
- [x] Server Side Rendering
- [x] Progressive Web App
- [x] Responsive Layout
- [x] Search Engine Optimization (SEO)
- [x] Components
- [x] Services
- [x] Reactive Form
- [x] Template Driven Forms
- [x] Search / Grid / Pagination
Quick start
# select a repo from github or gitlab
# download the example or clone the repo from github
git clone https://github.com/ganatan/angular-app.git
# download the example or clone the repo from gitlab
git clone https://gitlab.com/ganatan/angular-app.git
# change directory
cd angular-app
cd frontend
# install the repo with npm
npm install
# start the server
npm start
in your browser go to http://localhost:4200
Front-end
Installation
-
npm install
(installing dependencies) -
npm outdated
(verifying dependencies)
Developpement
-
npm run start
- in your browser http://localhost:4200
Linter
-
npm run lint
Tests
-
npm run test
-
npm run coverage
Compilation
-
npm run build
( without SSR) -
npm run build:ssr
( with SSR)
Production
-
npm run serve:ssr
- in your browser http://localhost:4000
Bootstrap UI
-
change directory
cd ui - Launch html pages in your browser
Back-end
Back-end : What's included
Tools
-
[x] mysql-express-batch (with Node.js)
-
[x] mysql-sql (with SQL Scripts)
-
[x] postgresql-express-batch (with Node.js)
-
[x] postgresql-express-crud (with Node.js and Express)
-
[x] postgresql-sql (with SQL Scripts)
Features
- [x] Database Creation
- [x] Domains Creation (only PostgreSQL)
- [x] Tables Creation
- [x] Importing Data
- [x] Exporting Data
- [x] Serving RESTful CRUD API
Database Creation with PostgreSQL
Use the SQL scripts in postgresql-sql
- [x] create-database.sql
- [x] create-domains.sql
- [x] create-tables.sql
- [x] insert-data.sql
Database Creation with MySQL
Use the SQL scripts in mysql-sql
- [x] create-database.sql
- [x] create-tables.sql
- [x] insert-data.sql
Database Creation with Node.js and PostgreSQL
PostgreSQL Password
- Change settings in postgresql-express-batch/app/config
- File config/config.json
- dbUser: "postgres"
- dbPassword: "Trustno1" ! Change the Fox Mulder password by your password
# select the repo
cd postgresql-express-batch
# install the repo with npm
npm install
# create database and import JSON data
npm run create
# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export
# Check the new files (for example movies.json)
Database Creation with Node.js and MySQL
MySQL Password
- Change settings in mysql-express-batch/app/config
- File config/config.json
- dbUser: "root"
- dbPassword: "Trustno1" ! Change the Fox Mulder password by your password
# select the repo
cd mysql-express-batch
# install the repo with npm
npm install
# create database and import JSON data
npm run create
# For the fun delete All data/export Files
# Export JSON data in data/export
npm run export
# Check the new files (for example movies.json)
Serving CRUD REST API with Node.js & Express & PostgreSQL
PostgreSQL Password
- Change settings in postgresql-express-crud/app/config
- File config/config.json
- dbUser: "postgres"
- dbPassword: "Trustno1" ! Change the Fox Mulder password by your password
# select the repo
cd postgresql-express-crud
# install the repo with npm
npm install
# Serve CRUD REST API : development mode with nodemon
npm run dev
# Serve CRUD REST API : local mode
npm run start
# Serve CRUD REST API : production mode
npm run prod
# Serve CRUD REST API : production mode with pm2 (process manager)
pm2 start process.config.js --env prod
Tests API & PostgreSQL
- in your browser http://localhost:5004/movies
- in your browser http://localhost:5004/shows
- in your browser http://localhost:5004/continents
- in your browser http://localhost:5004/countries
- in your browser http://localhost:5004/cities
Author
- Author : danny
Documentation
English Tutorials
- Step by Step - https://www.ganatan.com/tutorials/en
Tutoriels en français
- Etapes par étapes - https://www.ganatan.com/tutorials