{"id":21538155,"url":"https://github.com/tonylapoche/template-angular-18","last_synced_at":"2026-05-21T04:02:46.135Z","repository":{"id":262316290,"uuid":"886858826","full_name":"TonyLaPoche/template-angular-18","owner":"TonyLaPoche","description":"Projet template d'une application angular version 18 avec les fondamentaux côté architecture (selon moi)","archived":false,"fork":false,"pushed_at":"2024-11-11T18:56:25.000Z","size":128,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T20:54:21.532Z","etag":null,"topics":["angular","angular-template","frontend","junior-developer","template-project","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TonyLaPoche.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-11T18:25:17.000Z","updated_at":"2024-11-13T17:13:45.000Z","dependencies_parsed_at":"2024-11-11T19:51:08.284Z","dependency_job_id":null,"html_url":"https://github.com/TonyLaPoche/template-angular-18","commit_stats":null,"previous_names":["tonylapoche/template-angular-18"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/TonyLaPoche/template-angular-18","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyLaPoche%2Ftemplate-angular-18","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyLaPoche%2Ftemplate-angular-18/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyLaPoche%2Ftemplate-angular-18/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyLaPoche%2Ftemplate-angular-18/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TonyLaPoche","download_url":"https://codeload.github.com/TonyLaPoche/template-angular-18/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TonyLaPoche%2Ftemplate-angular-18/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33288125,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-21T02:57:32.698Z","status":"ssl_error","status_checked_at":"2026-05-21T02:57:31.990Z","response_time":62,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-template","frontend","junior-developer","template-project","typescript"],"created_at":"2024-11-24T04:10:49.886Z","updated_at":"2026-05-21T04:02:46.105Z","avatar_url":"https://github.com/TonyLaPoche.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projet Template-Angular\n\n## Description\n\nCe projet est une application front-end développée avec Angular 18, avec une structure de code simplifiée et plus performante. La séparation par\ndossiers (`Core`, `Shared`, `Environment`, `Views`) facilite la gestion de responsabilités et la réutilisabilité des\ncomposants et services.\n\n## Table des matières\n\n- [Installation](#installation)\n- [Lancement](#lancement)\n- [Structure du projet](#structure-du-projet)\n- [Pratiques de développement](#pratiques-de-développement)\n- [Auteurs](#auteurs)\n\n## Installation\n\n1. **Cloner le dépôt :**\n\n   ```bash\n   git clone https://github.com/TonyLaPoche/template-angular-18.git\n   cd template-app\n   ```\n\n2. **Installer les dépendances :**\n\n   ```bash\n   npm install\n   ```\n\n## Lancement\n\nPour lancer le serveur de développement, exécutez la commande suivante :\n\n```bash\nng serve\n```\nou\n\n```bash\nng serve --serve # lance votre navigateur par défaut sur `http://localhost:4200`\n```\n\nPuis, rendez-vous sur `http://localhost:4200` dans votre navigateur pour voir l'application.\n\n## Structure du projet\n\nLa structure du projet est optimisée pour tirer parti des composants autonomes d’Angular 18. Chaque composant, service,\nou directive est indépendant et peut être importé directement où il est nécessaire, sans besoin de modules explicites.\n\n```\nsrc/\n├── app/\n│   ├── core/                 # Services, guards, interceptors et éléments globaux de l'application\n│   ├── shared/               # Composants, directives, pipes réutilisables\n│   ├── environment/          # Configurations d'environnement (dev, prod)\n│   ├── views/                # Composants principaux de chaque vue de l'application\n│   └── main.ts               # Point d'entrée de l'application\n├── assets/                   # Images, fichiers statiques\n├── environments/             # Variables d'environnement\n└── index.html                # Fichier HTML racine\n```\n\n### Détail des dossiers\n\n- **Core**: Ce dossier contient tous les services essentiels, guards, et interceptors, accessibles à l'ensemble de l'\n  application. Ces éléments sont conçus pour être injectés comme des singletons et restent au niveau global. \n\n  Structure du dossier :\n  ```\n  core/\n  ├── services/               # Services globaux (ex : AuthService, ApiService)\n  ├── guards/                 # Guards de navigation (AuthGuard)\n  └── interceptors/           # Intercepteurs HTTP (ErrorInterceptor, TokenInterceptor)\n  ```\n\n- **Shared**: Ce dossier regroupe tous les composants, directives, et pipes réutilisables qui peuvent être partagés dans\n  l’application. Chacun de ces éléments est autonome (`standalone`), ce qui permet une importation directe dans\n  n’importe quel composant ou vue.\n\n  Structure du dossier :\n  ```\n  shared/\n  ├── components/             # Composants réutilisables (ex : ButtonComponent, CardComponent)\n  ├── directives/             # Directives personnalisées (ex : HighlightDirective)\n  └── pipes/                  # Pipes personnalisés (ex : DatePipe)\n  ```\n\n- **Environment**: Ce dossier contient les configurations d'environnement spécifiques pour différents contextes d'\n  exécution, comme le développement et la production.\n\n  Structure du dossier :\n  ```\n  environments/\n  ├── environment.ts          # Variables pour l'environnement de développement\n  └── environment.prod.ts     # Variables pour l'environnement de production\n  ```\n\n- **Views**: Le dossier `views` contient les composants des pages principales de l'application, organisés par\n  fonctionnalité ou vue. Chaque vue est un composant autonome, chargé en lazy-loading pour optimiser les performances.\n\n  Structure du dossier :\n  ```\n  views/\n  ├── home/                   # Exemple de vue (page d'accueil)\n  │   ├── home.component.ts\n  │   └── home.component.html\n  ├── about/                  # Exemple de vue (page \"à propos\")\n  │   ├── about.component.ts\n  │   └── about.component.html\n  ```\n\n## Pratiques de développement\n\n- **Utilisation des Composants Autonomes** : Angular 18 introduit des composants autonomes qui permettent d'éviter\n  l’utilisation de modules pour une structure plus flexible. Les composants autonomes utilisent la\n  syntaxe `standalone: true` dans leur déclaration, ce qui facilite leur réutilisation sans nécessiter de module\n  contenant.\n\n  Exemple :\n  ```typescript\n  import { Component } from '@angular/core';\n\n  @Component({\n    selector: 'app-example',\n    standalone: true,\n    templateUrl: './example.component.html',\n    styleUrls: ['./example.component.css'],\n  })\n  export class ExampleComponent {}\n  ```\n\n- **Lazy Loading** : Chaque vue est chargée dynamiquement (lazy loading) pour réduire le temps de chargement initial et\n  améliorer les performances.\n\n  Exemple de lazy loading pour un composant autonome :\n  ```typescript\n  const routes: Routes = [\n    {\n      path: 'home',\n      loadComponent: () =\u003e import('./views/home/home.component').then(m =\u003e m.HomeComponent)\n    }\n  ];\n  ```\n\n- **Dépendances partagées** : Utilisez le dossier `Shared` pour les composants, directives, et pipes réutilisables. Cela\n  simplifie leur importation directe dans les vues autonomes et centralise les ressources réutilisables.\n\n- **Structure Orientée Fonctionnalités** : Les composants dans `views` sont organisés par page ou fonctionnalité pour\n  une séparation claire des responsabilités et une gestion modulaire.\n\n## Auteurs\n\n- **Terrade Antoine** alias **[TonyLaPoche](https://www.linkedin.com/in/antoine-terrade-web/)**\n- **Contact** : [terrade.antoine.pro@gmail.com](mailto:terrade.antoine.pro@gmail.com)\n\n---\n\nEn suivant cette architecture et ces pratiques, le projet Angular 18 devient plus léger et modulable, avec des\ncomposants autonomes qui optimisent les performances et simplifient la gestion des dépendances. Pour en savoir plus sur\nles composants autonomes et les autres nouveautés d'Angular 18, consultez\nla [documentation officielle d'Angular](https://angular.io/docs).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonylapoche%2Ftemplate-angular-18","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftonylapoche%2Ftemplate-angular-18","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftonylapoche%2Ftemplate-angular-18/lists"}