hecmec / angular10-app

Angular 10 Example App, Angular CLI, Bootstrap, PWA, SSR, Angular Universal,Routing, Lazy loading, REST API, Components, Services, Reactive Forms

Angular 10 Application

Angular 10.0.2 + Angular CLI + Angular Universal
Lazy Loading + SSR + PWA + SEO + google Analytics + API REST (Node.js)
Prototype bootstrap
LIVE DEMO

Lighthouse Audit

Table of contents

• Status
• Quick start
• Front-end
• Back-end
• Author
• Documentation

Status

Front-end : What's included

Dependencies

• Angular : 10.0.2
• Angular CLI : 10.0.1
• Angular Universal : 10.0.1
• Bootstrap : 4.5.0
• Fontawesome : 5.13.1
• jquery : 3.5.1

Features

• Routing
• Lazy Loading
• Server Side Rendering
• Progressive Web App
• Responsive Layout
• Search Engine Optimization (SEO)
• Components
• Services
• inheritance
• Search / Grid / Pagination
• Leaflet open-source JavaScript library

Back-end : What's included

Dependencies

• Node.js : 12.18.1
• Express.js : 4.17.1
• pg-promise : 10.5.7

Features

• PostgreSQL
• Database Creation
• Domains Creation
• Tables Creation
• Importing Data
• Exporting Data
• RESTful API

Quick start

# clone the repo
git clone https://github.com/ganatan/angular10-app.git

# change directory
cd angular10-app

# 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

Settings

• you can select one of these Datasources

• Change settings in src/app/modules/application/movies-images-list

• File config/config.service.ts

• default: LOCAL JSON

• LOCAL REST API CRUD : http://localhost:5200

Tests

• npm run lint
• npm run test
• npm run e2e

Use Chrome version 83 min

Compilation

• npm run build ( without SSR)
• npm run build:ssr ( with SSR)

Production

• npm run serve:ssr
• in your browser http://localhost:4000

Prototype Bootstrap

• change directory cd ui
• launch html pages in your browser

Back-end

Installation

• change directory cd api
• npm install (installing dependencies)
• npm outdated (verifying dependencies)

Database Creation

• change login and password for postgreSQL in file config.json

• login":"postgres"

• password":"your_password"

• npm run app (database creation)

Developpement

• npm run start
• in your browser http://localhost:5200

Tests API

• in your browser http://localhost:5200/movies

Author

• Updated : 02/07/2020
• Author : danny

Documentation

English Tutorials

• Installation - https://www.ganatan.com/tutorials/build-full-web-application-with-angular
• Tutorials Step by Step - https://www.ganatan.com/tutorials/en

Tutoriels en français

• Installation - https://www.ganatan.com/tutorials/creer-application-web-complete-avec-angular
• Tutoriels Etapes par étapes - https://www.ganatan.com/tutorials