{"id":13406872,"url":"https://github.com/johnpapa/angular-preload-and-interceptors","last_synced_at":"2025-04-05T14:05:24.074Z","repository":{"id":42901249,"uuid":"252249810","full_name":"johnpapa/angular-preload-and-interceptors","owner":"johnpapa","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-30T22:01:38.000Z","size":1724,"stargazers_count":105,"open_issues_count":6,"forks_count":48,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T13:06:56.295Z","etag":null,"topics":["angular","http","javascript","typescript"],"latest_commit_sha":null,"homepage":null,"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/johnpapa.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}},"created_at":"2020-04-01T18:02:03.000Z","updated_at":"2024-12-17T16:19:50.000Z","dependencies_parsed_at":"2024-03-19T05:49:18.837Z","dependency_job_id":null,"html_url":"https://github.com/johnpapa/angular-preload-and-interceptors","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fangular-preload-and-interceptors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fangular-preload-and-interceptors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fangular-preload-and-interceptors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnpapa%2Fangular-preload-and-interceptors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnpapa","download_url":"https://codeload.github.com/johnpapa/angular-preload-and-interceptors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247345850,"owners_count":20924102,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","http","javascript","typescript"],"created_at":"2024-07-30T19:02:41.686Z","updated_at":"2025-04-05T14:05:24.057Z","avatar_url":"https://github.com/johnpapa.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Tour of Heroes - Angular Preload and Http Interceptors Demo\n\nThis project was created to help represent a fundamental app written with Angular that demonstrates preload strategies, guards, and http interceptors. The heroes and villains theme is used throughout the app.\n\nby [John Papa](http://twitter.com/john_papa)\n\n## Getting Started\n\n1. Clone this repository\n\n   ```bash\n   git clone https://github.com/johnpapa/angular-preload-and-interceptors.git tour\n   cd tour\n   ```\n\n1. Install the npm packages\n\n   ```bash\n   npm run full-stack\n   ```\n\n## What's in the App\n\nHere is a list of the features in this app:\n\n- [x] Start from the official quick-start and CLI\n- [x] Client side routing\n  - [x] Three main routes Heroes, Villains, About\n  - [x] Handles an erroneous route, leading to a PageNotFound component\n  - [x] Active route is highlighted in the nav menu\n  - [x] Routing should use html5 mode, not hash routes\n  - [x] Routing guards\n  - [x] Preload strategies\n- [x] API\n  - [x] JSON server as a backend\n  - [x] App served on one port which can access API on another port proxy or CORS)\n  - [x] HTTP - Uses most common client http libraries for each framework\n  - [x] HTTP interceptors\n  - [x] API routes are restricted to those who sign in except `movies`\n  - [x] API route `movies` is readonly to all (no sign in required)\n- [x] Auth\n  - [x] Sign in and sign out with json-server-auth\n- [x] Styling\n  - [x] Bulma\n  - [x] SASS\n  - [x] Font Awesome\n  - [x] Same exact css in every app\n- [x] Editing - Heroes and Villains will be editable (add, update, delete)\n- [x] State/Store - Uses a store for state management\n- [x] Web development server handles fallback routing\n- [x] Generic components\n  - [x] Modal\n  - [x] Button Tool\n  - [x] Card\n  - [x] Header bar\n  - [x] List header\n  - [x] Nav bar\n- [x] Props in and emit events out\n- [x] Environment variable for the API location\n\n### Why JSON Server?\n\nThe app uses a JSON server for a backend by default. This allows you to run the code without needing any database engines or cloud accounts. It also supports authorized routes, which this app takes advantage of. iEnjoy!\n\n### Interceptors\n\nSequence is super important with interceptors. The flow in sequence for requests, and then in the opposite order for responses.\n\n```typescript\nexport const httpInterceptorProviders = [\n  /**\n   *  Log Http:\n   *    This logs all HTTP traffic.\n   *    Should be first-ish so it can log the Http call happening in and out (last).\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: LogHttpInterceptor, multi: true },\n  /**\n   * ReadOnly:\n   *    Do this before we add headers, get busy, or make the call.\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: ReadOnlyInterceptor, multi: true },\n  /**\n   * SSL, Auth, CSRF:\n   *    Now that it has passed the readonly test, we want to stuff headers and proceed.\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: EnsureSSLInterceptor, multi: true },\n  { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },\n  { provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true },\n  /**\n   *  Log headers:\n   *    Must come after the headers are stuffed.\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: LogHeadersInterceptor, multi: true },\n  /**\n   *  Busy:\n   *    Should be first so it can turn on first, and off last.\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: BusyInterceptor, multi: true },\n  /**\n   * Transform Response:\n   *    this could happen anywhere in this particular stream,\n   *    as long as it happens after the first Http log.\n   *    Why? Because the interceptors are FIFO\n   */\n  { provide: HTTP_INTERCEPTORS, useClass: TransformResponseInterceptor, multi: true },\n];\n```\n\n## Problems or Suggestions\n\n[Open an issue here](/issues)\n\n## Resources\n\n- [VS Code](https://code.visualstudio.com/?WT.mc_id=javascript-0000-jopapa)\n- [Azure Free Trial](https://azure.microsoft.com/free/?WT.mc_id=javascript-0000-jopapa)\n- [VS Code Extension for Node on Azure](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack\u0026WT.mc_id=javascript-0000-jopapa)\n- [VS Code Extension Marketplace](https://marketplace.visualstudio.com/vscode?WT.mc_id=javascript-0000-jopapa)\n- [VS Code - macOS keys](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf?WT.mc_id=javascript-0000-jopapa)\n- [VS Code - Windows keys](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf?WT.mc_id=javascript-0000-jopapa)\n- [Debugging Angular in VS Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=javascript-0000-jopapa)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpapa%2Fangular-preload-and-interceptors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnpapa%2Fangular-preload-and-interceptors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnpapa%2Fangular-preload-and-interceptors/lists"}