├── frontend-angular ├── src │ ├── app │ │ ├── features │ │ │ ├── home │ │ │ │ ├── home.css │ │ │ │ ├── home.html │ │ │ │ ├── home.ts │ │ │ │ └── home.spec.ts │ │ │ ├── about │ │ │ │ ├── about.css │ │ │ │ ├── skill │ │ │ │ │ ├── skill.css │ │ │ │ │ ├── skill.html │ │ │ │ │ ├── skill.ts │ │ │ │ │ └── skill.spec.ts │ │ │ │ ├── experience │ │ │ │ │ ├── experience.css │ │ │ │ │ ├── experience.html │ │ │ │ │ ├── experience.ts │ │ │ │ │ └── experience.spec.ts │ │ │ │ ├── about.html │ │ │ │ ├── about.ts │ │ │ │ └── about.spec.ts │ │ │ ├── contact │ │ │ │ ├── contact.css │ │ │ │ ├── mailing │ │ │ │ │ ├── mailing.css │ │ │ │ │ ├── mailing.html │ │ │ │ │ ├── mailing.ts │ │ │ │ │ └── mailing.spec.ts │ │ │ │ ├── mapping │ │ │ │ │ ├── mapping.css │ │ │ │ │ ├── mapping.html │ │ │ │ │ ├── mapping.ts │ │ │ │ │ └── mapping.spec.ts │ │ │ │ ├── website │ │ │ │ │ ├── website.css │ │ │ │ │ ├── website.html │ │ │ │ │ ├── website.ts │ │ │ │ │ └── website.spec.ts │ │ │ │ ├── contact.html │ │ │ │ ├── contact.ts │ │ │ │ └── contact.spec.ts │ │ │ ├── login │ │ │ │ ├── login.css │ │ │ │ ├── login.html │ │ │ │ ├── login.ts │ │ │ │ └── login.spec.ts │ │ │ ├── signup │ │ │ │ ├── signup.css │ │ │ │ ├── signup.html │ │ │ │ ├── signup.ts │ │ │ │ └── signup.spec.ts │ │ │ └── not-found │ │ │ │ ├── not-found.css │ │ │ │ ├── not-found.html │ │ │ │ ├── not-found.ts │ │ │ │ └── not-found.spec.ts │ │ ├── app.css │ │ ├── app.config.ts │ │ ├── app.ts │ │ ├── app.html │ │ ├── app.spec.ts │ │ └── app.routes.ts │ ├── environments │ │ ├── environment.ts │ │ └── environment.development.ts │ ├── styles.css │ ├── main.ts │ └── index.html ├── public │ └── favicon.ico ├── .editorconfig ├── tsconfig.spec.json ├── tsconfig.app.json ├── README.md ├── .gitignore ├── nginx.conf ├── tsconfig.json ├── LICENSE ├── package.json ├── eslint.config.js └── angular.json ├── frontend-react ├── src │ ├── app │ │ ├── modules │ │ │ └── general │ │ │ │ ├── home │ │ │ │ ├── home.css │ │ │ │ └── home.js │ │ │ │ ├── about │ │ │ │ ├── about.css │ │ │ │ └── about.js │ │ │ │ ├── contact │ │ │ │ ├── contact.css │ │ │ │ ├── mailing │ │ │ │ │ ├── mailing.css │ │ │ │ │ └── mailing.js │ │ │ │ ├── mapping │ │ │ │ │ ├── mapping.css │ │ │ │ │ └── mapping.js │ │ │ │ ├── website │ │ │ │ │ ├── website.css │ │ │ │ │ └── website.js │ │ │ │ ├── contact.js │ │ │ │ └── contact-routing.js │ │ │ │ ├── login │ │ │ │ ├── login.css │ │ │ │ └── login.js │ │ │ │ ├── signup │ │ │ │ ├── signup.css │ │ │ │ └── signup.js │ │ │ │ └── not-found │ │ │ │ ├── not-found.css │ │ │ │ └── not-found.js │ │ ├── app.css │ │ ├── app.test.js │ │ ├── app-routing.js │ │ └── app.js │ ├── index.css │ ├── setupTests.js │ ├── reportWebVitals.js │ └── index.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── .gitignore ├── server.js ├── .eslintrc.json ├── nginx.conf └── package.json ├── img └── ganatan-about-github.png └── README.md /frontend-angular/src/app/features/home/home.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/home/home.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/about/about.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/login/login.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/signup/signup.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/not-found/not-found.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mailing/mailing.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mapping/mapping.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/website/website.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.html: -------------------------------------------------------------------------------- 1 |

home works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.html: -------------------------------------------------------------------------------- 1 |

login works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.html: -------------------------------------------------------------------------------- 1 |

signup works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.html: -------------------------------------------------------------------------------- 1 |

skill works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | export const environment = {}; 2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.html: -------------------------------------------------------------------------------- 1 |

mailing works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.html: -------------------------------------------------------------------------------- 1 |

mapping works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.html: -------------------------------------------------------------------------------- 1 |

website works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.html: -------------------------------------------------------------------------------- 1 |

not-found works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | font-weight: 400; 4 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.html: -------------------------------------------------------------------------------- 1 |

experience works!

2 | -------------------------------------------------------------------------------- /frontend-angular/src/environments/environment.development.ts: -------------------------------------------------------------------------------- 1 | export const environment = {}; 2 | -------------------------------------------------------------------------------- /frontend-react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: black; 3 | font-weight: 400; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /frontend-react/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /img/ganatan-about-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-routing/HEAD/img/ganatan-about-github.png -------------------------------------------------------------------------------- /frontend-react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-routing/HEAD/frontend-react/public/favicon.ico -------------------------------------------------------------------------------- /frontend-react/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-routing/HEAD/frontend-react/public/logo192.png -------------------------------------------------------------------------------- /frontend-react/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-routing/HEAD/frontend-react/public/logo512.png -------------------------------------------------------------------------------- /frontend-angular/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ganatan/angular-react-routing/HEAD/frontend-angular/public/favicon.ico -------------------------------------------------------------------------------- /frontend-angular/src/app/app.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | 5 | .app { 6 | font-family: Arial, Helvetica, sans-serif; 7 | max-width: 500px; 8 | margin: auto; 9 | } -------------------------------------------------------------------------------- /frontend-react/src/app/app.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: blue; 3 | } 4 | 5 | .app { 6 | font-family: Arial, Helvetica, sans-serif; 7 | max-width: 500px; 8 | margin: auto; 9 | } -------------------------------------------------------------------------------- /frontend-angular/src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { App } from './app/app'; 4 | 5 | bootstrapApplication(App, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | imports: [], 6 | templateUrl: './home.html', 7 | styleUrl: './home.css', 8 | }) 9 | export class Home { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-login', 5 | imports: [], 6 | templateUrl: './login.html', 7 | styleUrl: './login.css', 8 | }) 9 | export class Login { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-skill', 5 | imports: [], 6 | templateUrl: './skill.html', 7 | styleUrl: './skill.css', 8 | }) 9 | export class Skill { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-signup', 5 | imports: [], 6 | templateUrl: './signup.html', 7 | styleUrl: './signup.css', 8 | }) 9 | export class Signup { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/about/about.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './about.css'; 3 | 4 | class About extends React.Component { 5 | render() { 6 | return ( 7 |

about works!

8 | ) 9 | } 10 | } 11 | 12 | export default About; 13 | -------------------------------------------------------------------------------- /frontend-react/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/home/home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './home.css'; 3 | 4 | class Home extends React.Component { 5 | 6 | render() { 7 | return ( 8 |

home works!

9 | ) 10 | } 11 | 12 | } 13 | 14 | export default Home; 15 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/login/login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './login.css'; 4 | 5 | class Login extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

login works!

10 | ) 11 | } 12 | 13 | } 14 | export default Login; 15 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mailing', 5 | imports: [], 6 | templateUrl: './mailing.html', 7 | styleUrl: './mailing.css', 8 | }) 9 | export class Mailing { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-mapping', 5 | imports: [], 6 | templateUrl: './mapping.html', 7 | styleUrl: './mapping.css', 8 | }) 9 | export class Mapping { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-website', 5 | imports: [], 6 | templateUrl: './website.html', 7 | styleUrl: './website.css', 8 | }) 9 | export class Website { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/signup/signup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './signup.css'; 4 | 5 | class Signup extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

signup works!

10 | ) 11 | } 12 | 13 | } 14 | export default Signup; 15 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-not-found', 5 | imports: [], 6 | templateUrl: './not-found.html', 7 | styleUrl: './not-found.css', 8 | }) 9 | export class NotFound { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-experience', 5 | imports: [], 6 | templateUrl: './experience.html', 7 | styleUrl: './experience.css', 8 | }) 9 | export class Experience { 10 | 11 | } 12 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mailing/mailing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './mailing.css'; 4 | 5 | class Mailing extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

mailing works!

10 | ) 11 | } 12 | 13 | } 14 | export default Mailing; 15 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/mapping/mapping.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './mapping.css'; 4 | 5 | class Mapping extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

mapping works!

10 | ) 11 | } 12 | 13 | } 14 | export default Mapping; 15 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/website/website.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './website.css'; 4 | 5 | class Website extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

Website works!

10 | ) 11 | } 12 | 13 | } 14 | export default Website; 15 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.html: -------------------------------------------------------------------------------- 1 |
2 |

about works!

3 | 7 |

Child Routes Result

8 | 9 |
-------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/not-found/not-found.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './not-found.css'; 4 | 5 | class Notfound extends React.Component { 6 | 7 | render() { 8 | return ( 9 |

not-found works!

10 | ) 11 | } 12 | 13 | } 14 | export default Notfound; 15 | -------------------------------------------------------------------------------- /frontend-react/src/app/app.test.js: -------------------------------------------------------------------------------- 1 | import { render } from '@testing-library/react'; 2 | import { BrowserRouter } from 'react-router-dom'; 3 | 4 | import App from './App'; 5 | 6 | it('renders App with Routes', () => { 7 | render( 8 | 9 | 10 | 11 | ); 12 | expect(true).toStrictEqual(true); 13 | }); 14 | 15 | -------------------------------------------------------------------------------- /frontend-angular/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularStarter 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.html: -------------------------------------------------------------------------------- 1 |
2 |

contact works!

3 | 8 |

Child Routes Result

9 | 10 |
-------------------------------------------------------------------------------- /frontend-angular/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | ij_typescript_use_double_quotes = false 14 | 15 | [*.md] 16 | max_line_length = off 17 | trim_trailing_whitespace = false 18 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-about', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './about.html', 9 | styleUrl: './about.css', 10 | }) 11 | export class About { 12 | 13 | } -------------------------------------------------------------------------------- /frontend-react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /frontend-react/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const path = require('path'); 3 | const app = express(); 4 | 5 | app.use(express.static(path.join(__dirname, 'build'))); 6 | 7 | app.get('/*', function (req, res) { 8 | res.sendFile(path.join(__dirname, 'build', 'index.html')); 9 | }); 10 | 11 | const port = 3000; 12 | app.listen(port, () => { 13 | console.log(`Example app listening on port ${port}`) 14 | }) 15 | 16 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-contact', 8 | imports: [CommonModule, RouterLink, RouterOutlet], 9 | templateUrl: './contact.html', 10 | styleUrl: './contact.css', 11 | }) 12 | export class Contact { 13 | 14 | } -------------------------------------------------------------------------------- /frontend-react/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; 2 | import { provideRouter } from '@angular/router'; 3 | 4 | import { routes } from './app.routes'; 5 | 6 | export const appConfig: ApplicationConfig = { 7 | providers: [ 8 | provideBrowserGlobalErrorListeners(), 9 | provideZoneChangeDetection({ eventCoalescing: true }), 10 | provideRouter(routes), 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /frontend-angular/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/spec", 7 | "types": [ 8 | "jasmine" 9 | ] 10 | }, 11 | "include": [ 12 | "src/**/*.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { RouterLink, RouterOutlet } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | imports: [CommonModule, RouterLink, RouterOutlet], 8 | templateUrl: './app.html', 9 | styleUrl: './app.css', 10 | }) 11 | export class App { 12 | title = 'angular-routing'; 13 | footerUrl = 'https://www.ganatan.com'; 14 | footerLink = 'www.ganatan.com'; 15 | } -------------------------------------------------------------------------------- /frontend-angular/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "extends": "./tsconfig.json", 5 | "compilerOptions": { 6 | "outDir": "./out-tsc/app", 7 | "types": [] 8 | }, 9 | "include": [ 10 | "src/**/*.ts" 11 | ], 12 | "exclude": [ 13 | "src/**/*.spec.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /frontend-angular/README.md: -------------------------------------------------------------------------------- 1 | 2 | ### Installation 3 | * `npm install` (installing dependencies) 4 | * `npm outdated` (verifying dependencies) 5 | 6 | ### Developpement 7 | * `npm run start` 8 | * in your browser [http://localhost:4200](http://localhost:4200) 9 | w 10 | ## Linter 11 | * `npm run lint` 12 | 13 | ## Tests 14 | * `npm run test` 15 | * `npm run coverage` 16 | 17 | ### Compilation 18 | * `npm run build` ( without SSR) 19 | 20 | ### Production 21 | * `npm run serve` 22 | * in your browser [http://localhost:4000](http://localhost:4000) 23 | 24 | 25 | ### Author 26 | * Author : danny 27 | -------------------------------------------------------------------------------- /frontend-react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/home/home.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Home } from './home'; 4 | 5 | describe('Home', () => { 6 | let component: Home; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Home], 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(Home); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/skill/skill.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Skill } from './skill'; 4 | 5 | describe('Skill', () => { 6 | let component: Skill; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Skill], 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(Skill); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/login/login.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Login } from './login'; 4 | 5 | describe('Login', () => { 6 | let component: Login; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Login], 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Login); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/signup/signup.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Signup } from './signup'; 4 | 5 | describe('Signup', () => { 6 | let component: Signup; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Signup], 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Signup); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './app/app'; 5 | import reportWebVitals from './reportWebVitals'; 6 | import { BrowserRouter } from "react-router-dom"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById('root')); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mapping/mapping.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Mapping } from './mapping'; 4 | 5 | describe('Mapping', () => { 6 | let component: Mapping; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Mapping], 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(Mapping); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/website/website.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Website } from './website'; 4 | 5 | describe('Website', () => { 6 | let component: Website; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Website], 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(Website); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/mailing/mailing.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Mailing } from './mailing'; 4 | 5 | describe('Mailing', () => { 6 | let component: Mailing; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Mailing], 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(Mailing); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/not-found/not-found.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NotFound } from './not-found'; 4 | 5 | describe('NotFound', () => { 6 | let component: NotFound; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [NotFound], 12 | }) 13 | .compileComponents(); 14 | 15 | fixture = TestBed.createComponent(NotFound); 16 | component = fixture.componentInstance; 17 | fixture.detectChanges(); 18 | }); 19 | 20 | it('should create', () => { 21 | expect(component).toBeTruthy(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/experience/experience.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Experience } from './experience'; 4 | 5 | describe('Experience', () => { 6 | let component: Experience; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | imports: [Experience], 12 | }).compileComponents(); 13 | 14 | fixture = TestBed.createComponent(Experience); 15 | component = fixture.componentInstance; 16 | fixture.detectChanges(); 17 | }); 18 | 19 | it('should create', () => { 20 | expect(component).toBeTruthy(); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | import ContactRouting from './contact-routing'; 5 | import './contact.css'; 6 | 7 | class Contact extends React.Component { 8 | 9 | render() { 10 | return ( 11 |
12 |

contact works!

13 |
    14 |
  • Mailing
    • 15 |
  • Mapping
    • 16 |
  • Website
    • 17 |
18 |

Child Routes Result

19 | 20 |
21 | ) 22 | } 23 | 24 | } 25 | export default Contact; 26 | -------------------------------------------------------------------------------- /frontend-angular/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{ title }}

5 |
6 | 19 |
20 | 21 |
22 |

Routes Result

23 | 24 |
25 | 26 | 29 | 30 |
-------------------------------------------------------------------------------- /frontend-react/src/app/modules/general/contact/contact-routing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Routes, Route } from "react-router-dom"; 3 | 4 | import Mailing from './mailing/mailing'; 5 | import Mapping from './mapping/mapping'; 6 | import Website from './website/website'; 7 | 8 | import Notfound from '../../../modules/general/not-found/not-found'; 9 | 10 | class AppRouting extends React.Component { 11 | 12 | render() { 13 | return ( 14 | 15 | } /> 16 | } /> 17 | } /> 18 | } /> 19 | } /> 20 | 21 | ) 22 | } 23 | 24 | } 25 | 26 | export default AppRouting; -------------------------------------------------------------------------------- /frontend-angular/src/app/features/about/about.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { About } from './about'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('About', () => { 7 | let component: About; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [About], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {}, 17 | }, 18 | ], 19 | }).compileComponents(); 20 | 21 | fixture = TestBed.createComponent(About); 22 | component = fixture.componentInstance; 23 | fixture.detectChanges(); 24 | }); 25 | 26 | it('should create', () => { 27 | expect(component).toBeTruthy(); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /frontend-angular/src/app/features/contact/contact.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Contact } from './contact'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | 6 | describe('Contact', () => { 7 | let component: Contact; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async () => { 11 | await TestBed.configureTestingModule({ 12 | imports: [Contact], 13 | providers: [ 14 | { 15 | provide: ActivatedRoute, 16 | useValue: {}, 17 | }, 18 | ], 19 | }) 20 | .compileComponents(); 21 | 22 | fixture = TestBed.createComponent(Contact); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should create', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-angular/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes auto; 3 | pid /run/nginx.pid; 4 | error_log /var/log/nginx/error.log; 5 | include /etc/nginx/modules-enabled/*.conf; 6 | 7 | events { 8 | worker_connections 768; 9 | } 10 | 11 | http { 12 | sendfile on; 13 | tcp_nopush on; 14 | types_hash_max_size 2048; 15 | 16 | include /etc/nginx/mime.types; 17 | default_type application/octet-stream; 18 | 19 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE 20 | ssl_prefer_server_ciphers on; 21 | 22 | access_log /var/log/nginx/access.log; 23 | gzip on; 24 | include /etc/nginx/conf.d/*.conf; 25 | server { 26 | listen 80 default_server; 27 | listen [::]:80 default_server; 28 | 29 | root /var/www/html; 30 | index index.html index.htm index.nginx-debian.html; 31 | server_name _; 32 | location / { 33 | try_files $uri $uri/ =404; 34 | } 35 | 36 | } 37 | } -------------------------------------------------------------------------------- /frontend-react/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended" 10 | ], 11 | "parserOptions": { 12 | "ecmaFeatures": { 13 | "jsx": true 14 | }, 15 | "ecmaVersion": "latest", 16 | "sourceType": "module" 17 | }, 18 | "plugins": [ 19 | "react" 20 | ], 21 | "rules": { 22 | "react/react-in-jsx-scope": "off", 23 | "linebreak-style": 0, 24 | "no-var": "error", 25 | "prefer-const": "error", 26 | "func-names": "error", 27 | "id-length": "error", 28 | "newline-before-return": "error", 29 | "space-before-blocks": "error", 30 | "no-alert": "error", 31 | "react/prop-types": 0, 32 | "indent": [ 33 | "error", 34 | 2 35 | ] 36 | }, 37 | "settings": { 38 | "react": { 39 | "version": "detect" 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /frontend-angular/src/app/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { App } from './app'; 3 | import { ActivatedRoute } from '@angular/router'; 4 | 5 | describe('App', () => { 6 | beforeEach(async () => { 7 | await TestBed.configureTestingModule({ 8 | imports: [App], 9 | providers: [ 10 | { 11 | provide: ActivatedRoute, 12 | useValue: {}, 13 | }, 14 | ], 15 | }).compileComponents(); 16 | }); 17 | 18 | it('should create the app', () => { 19 | const fixture = TestBed.createComponent(App); 20 | const app = fixture.componentInstance; 21 | expect(app).toBeTruthy(); 22 | }); 23 | 24 | it('should render title', () => { 25 | const fixture = TestBed.createComponent(App); 26 | fixture.detectChanges(); 27 | const compiled = fixture.nativeElement as HTMLElement; 28 | expect(compiled.querySelector('h1')?.textContent).toContain('angular-routing'); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /frontend-react/nginx.conf: -------------------------------------------------------------------------------- 1 | user www-data; 2 | worker_processes auto; 3 | pid /run/nginx.pid; 4 | include /etc/nginx/modules-enabled/*.conf; 5 | 6 | events { 7 | worker_connections 768; 8 | } 9 | 10 | http { 11 | sendfile on; 12 | tcp_nopush on; 13 | tcp_nodelay on; 14 | keepalive_timeout 65; 15 | types_hash_max_size 2048; 16 | include /etc/nginx/mime.types; 17 | default_type application/octet-stream; 18 | 19 | ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE 20 | ssl_prefer_server_ciphers on; 21 | 22 | access_log /var/log/nginx/access.log; 23 | error_log /var/log/nginx/error.log; 24 | 25 | gzip on; 26 | 27 | include /etc/nginx/conf.d/*.conf; 28 | 29 | server { 30 | listen 80 default_server; 31 | listen [::]:80 default_server; 32 | root /var/www/html; 33 | index index.html index.htm index.nginx-debian.html; 34 | 35 | server_name _; 36 | 37 | location / { 38 | try_files $uri $uri/ =404; 39 | } 40 | 41 | } 42 | 43 | } 44 | 45 | -------------------------------------------------------------------------------- /frontend-react/src/app/app-routing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Routes, Route } from "react-router-dom"; 3 | 4 | import Home from './modules/general/home/home'; 5 | import Notfound from './modules/general/not-found/not-found'; 6 | 7 | import About from './modules/general/about/about'; 8 | import Login from './modules/general/login/login'; 9 | import Signup from './modules/general/signup/signup'; 10 | 11 | import Contact from './modules/general/contact/contact'; 12 | 13 | class AppRouting extends React.Component { 14 | 15 | render() { 16 | return ( 17 | 18 | } /> 19 | 20 | } /> 21 | } /> 22 | } /> 23 | 24 | } /> 25 | 26 | } /> 27 | 28 | 29 | ) 30 | } 31 | 32 | } 33 | 34 | export default AppRouting; -------------------------------------------------------------------------------- /frontend-angular/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ 2 | /* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ 3 | { 4 | "compileOnSave": false, 5 | "compilerOptions": { 6 | "strict": true, 7 | "noImplicitOverride": true, 8 | "noPropertyAccessFromIndexSignature": true, 9 | "noImplicitReturns": true, 10 | "noFallthroughCasesInSwitch": true, 11 | "skipLibCheck": true, 12 | "isolatedModules": true, 13 | "experimentalDecorators": true, 14 | "importHelpers": true, 15 | "target": "ES2022", 16 | "module": "preserve" 17 | }, 18 | "angularCompilerOptions": { 19 | "enableI18nLegacyMessageIdFormat": false, 20 | "strictInjectionParameters": true, 21 | "strictInputAccessModifiers": true, 22 | "typeCheckHostBindings": true, 23 | "strictTemplates": true 24 | }, 25 | "files": [], 26 | "references": [ 27 | { 28 | "path": "./tsconfig.app.json" 29 | }, 30 | { 31 | "path": "./tsconfig.spec.json" 32 | } 33 | ] 34 | } 35 | -------------------------------------------------------------------------------- /frontend-angular/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017-2024 Ganatan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /frontend-react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-routing", 3 | "version": "18.3.1", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "6.4.5", 7 | "@testing-library/react": "15.0.7", 8 | "@testing-library/user-event": "14.5.2", 9 | "react": "18.3.1", 10 | "react-dom": "18.3.1", 11 | "react-router-dom": "6.23.1", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "4.0.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --watchAll=false", 19 | "coverage": "react-scripts test --coverage --watchAll=false", 20 | "serve": "node server", 21 | "eject": "react-scripts eject", 22 | "lint": "eslint \"src/**/*.{js,jsx}\"" 23 | }, 24 | "eslintConfig": { 25 | "extends": [ 26 | "react-app", 27 | "react-app/jest" 28 | ] 29 | }, 30 | "browserslist": { 31 | "production": [ 32 | ">0.2%", 33 | "not dead", 34 | "not op_mini all" 35 | ], 36 | "development": [ 37 | "last 1 chrome version", 38 | "last 1 firefox version", 39 | "last 1 safari version" 40 | ] 41 | }, 42 | "devDependencies": { 43 | "eslint": "8.55.0", 44 | "eslint-plugin-react": "7.34.2" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /frontend-angular/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-starter", 3 | "version": "20.0.1", 4 | "scripts": { 5 | "ng": "ng", 6 | "dev": "ng serve --port 4200", 7 | "start": "ng serve --port 4200", 8 | "build": "ng build", 9 | "watch": "ng build --watch --configuration development", 10 | "test": "ng test", 11 | "test:headless": "ng test --watch=false --browsers=ChromeHeadless", 12 | "coverage": "ng test --no-watch --code-coverage", 13 | "lint": "ng lint" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/common": "20.0.1", 18 | "@angular/compiler": "20.0.1", 19 | "@angular/core": "20.0.1", 20 | "@angular/forms": "20.0.1", 21 | "@angular/platform-browser": "20.0.1", 22 | "@angular/router": "20.0.1", 23 | "rxjs": "7.8.2", 24 | "tslib": "2.8.1", 25 | "zone.js": "0.15.1" 26 | }, 27 | "devDependencies": { 28 | "@angular/build": "20.0.1", 29 | "@angular/cli": "20.0.1", 30 | "@angular/compiler-cli": "20.0.1", 31 | "@types/jasmine": "5.1.8", 32 | "angular-eslint": "19.7.1", 33 | "eslint": "9.28.0", 34 | "jasmine-core": "5.7.1", 35 | "karma": "6.4.4", 36 | "karma-chrome-launcher": "3.2.0", 37 | "karma-coverage": "2.2.1", 38 | "karma-jasmine": "5.1.0", 39 | "karma-jasmine-html-reporter": "2.1.0", 40 | "typescript": "5.8.3", 41 | "typescript-eslint": "8.33.1" 42 | } 43 | } -------------------------------------------------------------------------------- /frontend-react/src/app/app.js: -------------------------------------------------------------------------------- 1 | import './app.css'; 2 | import React from 'react'; 3 | import AppRouting from './app-routing'; 4 | import { Link } from "react-router-dom"; 5 | 6 | class App extends React.Component { 7 | 8 | constructor(props) { 9 | super(props); 10 | this.title = 'react-routing'; 11 | this.footerUrl = 'https://www.ganatan.com'; 12 | this.footerLink = 'www.ganatan.com'; 13 | } 14 | 15 | render() { 16 | return ( 17 |
18 |
19 |
20 |

{this.title}

21 |
22 | 35 |
36 |
37 |

Routes Result

38 | 39 |
40 | 43 |
44 | ) 45 | } 46 | 47 | } 48 | 49 | 50 | export default App; 51 | -------------------------------------------------------------------------------- /frontend-angular/src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | import { Home } from './features/home/home'; 4 | import { Login } from './features/login/login'; 5 | import { Signup } from './features/signup/signup'; 6 | import { NotFound } from './features/not-found/not-found'; 7 | import { About } from './features/about/about'; 8 | import { Contact } from './features/contact/contact'; 9 | 10 | import { Experience } from './features/about/experience/experience'; 11 | import { Skill } from './features/about/skill/skill'; 12 | 13 | import { Mailing } from './features/contact/mailing/mailing'; 14 | import { Mapping } from './features/contact/mapping/mapping'; 15 | import { Website } from './features/contact/website/website'; 16 | 17 | export const routes: Routes = [ 18 | { path: '', component: Home }, 19 | 20 | { path: 'login', component: Login }, 21 | { path: 'signup', component: Signup }, 22 | 23 | { 24 | path: 'about', component: About, 25 | children: [ 26 | { path: '', component: Experience }, 27 | { path: 'experience', component: Experience }, 28 | { path: 'skill', component: Skill }, 29 | ], 30 | }, 31 | { 32 | path: 'contact', component: Contact, 33 | children: [ 34 | { path: '', component: Mailing }, 35 | { path: 'mailing', component: Mailing }, 36 | { path: 'mapping', component: Mapping }, 37 | { path: 'website', component: Website }, 38 | ], 39 | }, 40 | 41 | { path: '**', component: NotFound }, 42 | ]; -------------------------------------------------------------------------------- /frontend-angular/eslint.config.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const eslint = require("@eslint/js"); 3 | const tseslint = require("typescript-eslint"); 4 | const angular = require("angular-eslint"); 5 | 6 | module.exports = tseslint.config( 7 | { 8 | files: ["**/*.ts"], 9 | extends: [ 10 | eslint.configs.recommended, 11 | ...tseslint.configs.recommended, 12 | ...tseslint.configs.stylistic, 13 | ...angular.configs.tsRecommended, 14 | ], 15 | processor: angular.processInlineTemplates, 16 | rules: { 17 | "@angular-eslint/directive-selector": [ 18 | "error", 19 | { 20 | type: "attribute", 21 | prefix: "app", 22 | style: "camelCase", 23 | }, 24 | ], 25 | "@angular-eslint/component-selector": [ 26 | "error", 27 | { 28 | type: "element", 29 | prefix: "app", 30 | style: "kebab-case", 31 | }, 32 | ], 33 | "@angular-eslint/component-class-suffix": [ 34 | "error", 35 | { 36 | suffixes: ["","Component"] 37 | } 38 | ], 39 | "semi": ["error", "always"], 40 | "comma-dangle": ["error", "always-multiline"], 41 | "no-undefined": "error", 42 | "no-var": "error", 43 | "prefer-const": "error", 44 | "func-names": "error", 45 | "id-length": "error", 46 | "newline-before-return": "error", 47 | "space-before-blocks": "error", 48 | "no-alert": "error" 49 | }, 50 | }, 51 | { 52 | files: ["**/*.html"], 53 | extends: [ 54 | ...angular.configs.templateRecommended, 55 | ...angular.configs.templateAccessibility, 56 | ], 57 | rules: {}, 58 | } 59 | ); 60 | -------------------------------------------------------------------------------- /frontend-react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | react-routing 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /frontend-angular/angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-starter": { 7 | "projectType": "application", 8 | "schematics": {}, 9 | "root": "", 10 | "sourceRoot": "src", 11 | "prefix": "app", 12 | "architect": { 13 | "build": { 14 | "builder": "@angular/build:application", 15 | "options": { 16 | "browser": "src/main.ts", 17 | "polyfills": [ 18 | "zone.js" 19 | ], 20 | "tsConfig": "tsconfig.app.json", 21 | "assets": [ 22 | { 23 | "glob": "**/*", 24 | "input": "public" 25 | } 26 | ], 27 | "styles": [ 28 | "src/styles.css" 29 | ] 30 | }, 31 | "configurations": { 32 | "production": { 33 | "budgets": [ 34 | { 35 | "type": "initial", 36 | "maximumWarning": "500kB", 37 | "maximumError": "1MB" 38 | }, 39 | { 40 | "type": "anyComponentStyle", 41 | "maximumWarning": "4kB", 42 | "maximumError": "8kB" 43 | } 44 | ], 45 | "outputHashing": "all" 46 | }, 47 | "development": { 48 | "optimization": false, 49 | "extractLicenses": false, 50 | "sourceMap": true, 51 | "fileReplacements": [ 52 | { 53 | "replace": "src/environments/environment.ts", 54 | "with": "src/environments/environment.development.ts" 55 | } 56 | ] 57 | } 58 | }, 59 | "defaultConfiguration": "production" 60 | }, 61 | "serve": { 62 | "builder": "@angular/build:dev-server", 63 | "configurations": { 64 | "production": { 65 | "buildTarget": "angular-starter:build:production" 66 | }, 67 | "development": { 68 | "buildTarget": "angular-starter:build:development" 69 | } 70 | }, 71 | "defaultConfiguration": "development" 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular/build:extract-i18n" 75 | }, 76 | "test": { 77 | "builder": "@angular/build:karma", 78 | "options": { 79 | "polyfills": [ 80 | "zone.js", 81 | "zone.js/testing" 82 | ], 83 | "tsConfig": "tsconfig.spec.json", 84 | "assets": [ 85 | { 86 | "glob": "**/*", 87 | "input": "public" 88 | } 89 | ], 90 | "styles": [ 91 | "src/styles.css" 92 | ] 93 | } 94 | }, 95 | "lint": { 96 | "builder": "@angular-eslint/builder:lint", 97 | "options": { 98 | "lintFilePatterns": [ 99 | "src/**/*.ts", 100 | "src/**/*.html" 101 | ] 102 | } 103 | } 104 | } 105 | } 106 | }, 107 | "cli": { 108 | "schematicCollections": [ 109 | "angular-eslint" 110 | ] 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular 20 & React 18 Examples Routing 2 | 3 | 4 | 5 | 28 | 29 |
6 | 7 | Ganatan Angular Example routing 9 | 10 | 11 | it's part of a repo series designed 12 | 13 | to create a **Web Application with Angular 20** 14 | 15 | 16 | * Featuring [**Angular 20.0.1**](https://github.com/angular/angular/releases) & [**Angular CLI 20.0.1**](https://github.com/angular/angular-cli/releases/) 17 | 18 | 19 | * See the [**Live demo**](#angular-live-demo), Test the repo with [**Quick start**](#angular-quick-start) and for more information Read the step by step [**Tutorial**](#angular-tutorial) or read the [**Getting started**](#angular-getting-started) 20 | 21 | 22 | to create a **Web Application with React 18** 23 | 24 | * Featuring [**React 18.3.1**](https://github.com/facebook/react/releases) & [**Create-react-app 5.0.1**](https://github.com/facebook/create-react-app/releases) 25 | 26 | 27 |
30 | 31 | # [Angular Live Demo](#angular-live-demo) 32 | Here is a working live demo : https://angular.ganatan.com 33 | 34 |

35 |

36 | 37 | Angular 15 Example 38 | Application 39 | 40 |

41 |

42 | 43 | 44 | 45 | # [Angular Quick start](#angular-quick-start) 46 | 47 | ```bash 48 | # choose a repo 49 | # download the example or clone the repo from github 50 | git clone https://github.com/ganatan/angular-react-routing.git 51 | 52 | # download the example or clone the repo from gitlab 53 | git clone https://gitlab.com/ganatan/angular-react-routing.git 54 | 55 | # change directory 56 | cd angular-react-routing 57 | cd frontend-angular 58 | 59 | # install the repo with npm 60 | npm install 61 | 62 | # start the server 63 | npm start 64 | 65 | ``` 66 | in your browser go to [http://localhost:4200](http://localhost:4200) 67 | 68 | 69 | # [React Quick start](#react-quick-start) 70 | 71 | ```bash 72 | # choose a repo 73 | # download the example or clone the repo from github 74 | git clone https://github.com/ganatan/angular-react-routing.git 75 | 76 | # download the example or clone the repo from gitlab 77 | git clone https://gitlab.com/ganatan/angular-react-routing.git 78 | 79 | # change directory 80 | cd angular-react-routing 81 | cd frontend-react 82 | 83 | # install the repo with npm 84 | npm install 85 | 86 | # start the server 87 | npm start 88 | 89 | ``` 90 | in your browser go to [http://localhost:3000](http://localhost:3000) 91 | 92 | 93 | 94 | # [Angular Tutorial](#angular-quick-start) 95 | 96 | Here is a step by step Tutorial : https://www.ganatan.com/tutorials/routing-with-angular 97 | 98 |

99 | 100 | Demo example 101 | 102 |

103 | 104 | # [Angular Getting started](#angular-getting-started) 105 | 106 | 107 | ## Installation 108 | * `npm install` (installing dependencies) 109 | * `npm outdated` (verifying dependencies) 110 | 111 | ## Development 112 | * `npm run start` 113 | * in your browser go to [http://localhost:4200](http://localhost:4200) 114 | 115 | ## Production 116 | * `npm run build` 117 | 118 | ## Linter 119 | * `npm run lint` 120 | 121 | ## Tests 122 | * `npm run test` 123 | * `npm run coverage` 124 | 125 | 126 | 127 | # [React Getting started](#react-getting-started) 128 | 129 | 130 | ## Installation 131 | * `npm install` (installing dependencies) 132 | * `npm outdated` (verifying dependencies) 133 | 134 | ## Development 135 | * `npm run start` 136 | * in your browser go to [http://localhost:3000](http://localhost:3000) 137 | 138 | ## Production 139 | * `npm run build` 140 | 141 | ## Linter 142 | * `npm run lint` 143 | 144 | ## Tests 145 | * `npm run test` 146 | * `npm run coverage` 147 | 148 | 149 | 150 | 151 | # [Author](#author) 152 | * Author : danny 153 | 154 | ## [English Tutorials](#english-tutorials) 155 | - Installation - https://www.ganatan.com/tutorials/routing-with-angular 156 | - step-by-step Tutorials - https://www.ganatan.com/tutorials/en 157 | 158 | ## [Tutoriels en français](#french-tutorials) 159 | - Installation - https://www.ganatan.com/tutorials/routing-avec-angular 160 | - Tutoriels Etape par étape - https://www.ganatan.com/tutorials --------------------------------------------------------------------------------