Skip to content

Commit 822c047

Browse files
author
Plotnikova Darya
committed
Add injection token task
1 parent 3cae317 commit 822c047

22 files changed

Lines changed: 342 additions & 0 deletions

‎apps/dependency-injection/injection-token/.eslintrc.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"extends": ["../../../.eslintrc.json"],
3+
"ignorePatterns": ["!**/*"],
4+
"overrides": [
5+
{
6+
"files": ["*.ts"],
7+
"rules": {},
8+
"extends": [
9+
"plugin:@nx/angular",
10+
"plugin:@angular-eslint/template/process-inline-templates"
11+
]
12+
},
13+
{
14+
"files": ["*.html"],
15+
"extends": ["plugin:@nx/angular-template"],
16+
"rules": {}
17+
}
18+
]
19+
}

‎apps/dependency-injection/injection-token/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# InjectionToken
2+
3+
> author: thomas-laforge
4+
5+
### Run Application
6+
7+
```bash
8+
npx nx serve angular-injection-token
9+
```
10+
11+
### Documentation and Instruction
12+
13+
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/39-injection-token/).

‎apps/dependency-injection/injection-token/jest.config.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* eslint-disable */
2+
export default {
3+
displayName: 'angular-injection-token',
4+
preset: '../../../jest.preset.js',
5+
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
6+
coverageDirectory: '../../../coverage/apps/angular/39-injection-token',
7+
transform: {
8+
'^.+\\.(ts|mjs|js|html)$': [
9+
'jest-preset-angular',
10+
{
11+
tsconfig: '<rootDir>/tsconfig.spec.json',
12+
stringifyContentPathRegex: '\\.(html|svg)$',
13+
},
14+
],
15+
},
16+
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
17+
snapshotSerializers: [
18+
'jest-preset-angular/build/serializers/no-ng-attributes',
19+
'jest-preset-angular/build/serializers/ng-snapshot',
20+
'jest-preset-angular/build/serializers/html-comment',
21+
],
22+
};

‎apps/dependency-injection/injection-token/project.json‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
{
2+
"name": "angular-injection-token",
3+
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
4+
"projectType": "application",
5+
"prefix": "app",
6+
"sourceRoot": "apps/angular/39-injection-token/src",
7+
"tags": [],
8+
"targets": {
9+
"build": {
10+
"executor": "@angular-devkit/build-angular:browser",
11+
"outputs": ["{options.outputPath}"],
12+
"options": {
13+
"outputPath": "dist/apps/angular/39-injection-token",
14+
"index": "apps/angular/39-injection-token/src/index.html",
15+
"main": "apps/angular/39-injection-token/src/main.ts",
16+
"polyfills": ["zone.js"],
17+
"tsConfig": "apps/angular/39-injection-token/tsconfig.app.json",
18+
"assets": [
19+
"apps/angular/39-injection-token/src/favicon.ico",
20+
"apps/angular/39-injection-token/src/assets"
21+
],
22+
"styles": ["apps/angular/39-injection-token/src/styles.scss"],
23+
"scripts": []
24+
},
25+
"configurations": {
26+
"production": {
27+
"budgets": [
28+
{
29+
"type": "initial",
30+
"maximumWarning": "500kb",
31+
"maximumError": "1mb"
32+
},
33+
{
34+
"type": "anyComponentStyle",
35+
"maximumWarning": "2kb",
36+
"maximumError": "4kb"
37+
}
38+
],
39+
"outputHashing": "all"
40+
},
41+
"development": {
42+
"buildOptimizer": false,
43+
"optimization": false,
44+
"vendorChunk": true,
45+
"extractLicenses": false,
46+
"sourceMap": true,
47+
"namedChunks": true
48+
}
49+
},
50+
"defaultConfiguration": "production"
51+
},
52+
"serve": {
53+
"executor": "@angular-devkit/build-angular:dev-server",
54+
"configurations": {
55+
"production": {
56+
"buildTarget": "angular-injection-token:build:production"
57+
},
58+
"development": {
59+
"buildTarget": "angular-injection-token:build:development"
60+
}
61+
},
62+
"defaultConfiguration": "development",
63+
"continuous": true
64+
},
65+
"extract-i18n": {
66+
"executor": "@angular-devkit/build-angular:extract-i18n",
67+
"options": {
68+
"buildTarget": "angular-injection-token:build"
69+
}
70+
},
71+
"test": {
72+
"options": {
73+
"passWithNoTests": true
74+
},
75+
"configurations": {
76+
"ci": {
77+
"ci": true,
78+
"coverage": true
79+
}
80+
}
81+
}
82+
}
83+
}

‎apps/dependency-injection/injection-token/src/app/app.component.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component } from '@angular/core';
2+
import { RouterLink, RouterOutlet } from '@angular/router';
3+
4+
@Component({
5+
imports: [RouterOutlet, RouterLink],
6+
selector: 'app-root',
7+
template: `
8+
<div class="mb-5 flex gap-4">
9+
<button class="rounded-md border px-4 py-2" routerLink="video">
10+
Video
11+
</button>
12+
<button class="rounded-md border px-4 py-2" routerLink="phone">
13+
Phone
14+
</button>
15+
</div>
16+
<router-outlet />
17+
`,
18+
host: {
19+
class: 'p-10 flex flex-col',
20+
},
21+
})
22+
export class AppComponent {}

‎apps/dependency-injection/injection-token/src/app/app.config.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
import { provideRouter } from '@angular/router';
3+
4+
export const appConfig: ApplicationConfig = {
5+
providers: [
6+
provideRouter([
7+
{ path: '', pathMatch: 'full', redirectTo: 'video' },
8+
{ path: 'video', loadComponent: () => import('./video.component') },
9+
{ path: 'phone', loadComponent: () => import('./phone.component') },
10+
]),
11+
],
12+
};

‎apps/dependency-injection/injection-token/src/app/data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const DEFAULT_TIMER = 1000;

‎apps/dependency-injection/injection-token/src/app/phone.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component } from '@angular/core';
2+
import { TimerContainerComponent } from './timer-container.component';
3+
4+
@Component({
5+
selector: 'app-phone',
6+
imports: [TimerContainerComponent],
7+
template: `
8+
<div class="flex gap-2">
9+
Phone Call Timer:
10+
<p class="italic">(should be 2000s)</p>
11+
</div>
12+
<timer-container />
13+
`,
14+
})
15+
export default class PhoneComponent {}

‎apps/dependency-injection/injection-token/src/app/timer-container.component.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component } from '@angular/core';
2+
import { DEFAULT_TIMER } from './data';
3+
import { TimerComponent } from './timer.component';
4+
@Component({
5+
selector: 'timer-container',
6+
imports: [TimerComponent],
7+
template: `
8+
<div class="flex gap-2">
9+
Timer container:
10+
<p class="italic">(timer is {{ timer }}s)</p>
11+
</div>
12+
<timer />
13+
`,
14+
host: {
15+
class: 'border rounded-md flex p-4 gap-10',
16+
},
17+
})
18+
export class TimerContainerComponent {
19+
timer = DEFAULT_TIMER;
20+
}

‎apps/dependency-injection/injection-token/src/app/timer.component.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from '@angular/core';
2+
import { toSignal } from '@angular/core/rxjs-interop';
3+
import { interval } from 'rxjs';
4+
import { DEFAULT_TIMER } from './data';
5+
6+
@Component({
7+
selector: 'timer',
8+
template: `
9+
Timer running {{ timer() }}
10+
`,
11+
})
12+
export class TimerComponent {
13+
timer = toSignal(interval(DEFAULT_TIMER));
14+
}

0 commit comments

Comments
 (0)