Le Guide Angular | Marmicode
👨🏻🍳 Nos Workshops
✉️Besoin d'aide ?
🔍Code Review
Rechercher…
Le Guide Angular par Marmicode
Pourquoi Angular ?
ECMAScript 6+
TypeScript
Tools
Angular
Bootstrap
Composants
Container vs. Presentational Components
Interaction entre Composants
Change Detection
Project Structure & Modules
Dependency Injection
Qu'est-ce que la "Dependency Injection" ?
Injection d'un Service Angular
Services & Providers
Portée des Services
Tree-Shakable Services
Class vs Injection Token
Exemple
Callback Hell vs. Promise vs. Async / Await
Observables
Http
State Management
GraphQL
Formulaires
Directives
Pipes
Routing
Testing
Sécurité
Animation
Internationalisation
Quelques Liens
Cookbook
Autres Ressources
Stay Tuned
🎁-20% sur nos workshops avec le code GUIDEANGULAR
🐦Suivez-moi !
📺Cours Vidéo
📬Newsletter
📝Blog
Nos Services
Formation Angular
Atelier Unit-Testing Angular
Atelier Architecture Angular
Consultation à Distance & Code Review
Nos Guides
Guide Agile
Guide API ReST
Guide NodeJS
Propulsé par
GitBook
Class vs Injection Token
Une dépendance peut être de type
string
ou "objet literal" ou même sans type. Cf.
https://angular.io/api/core/InjectionToken
.
Pour des raisons de lisibilité et de maintenabilité, évitez l'utilisation d'
InjectionToken
et préférez l'utilisation de classes.
Au lieu de :
1
export
const
API_BASE_URL
=
new
InjectionToken
<
string
>
(
'ApiBaseUrl'
);
2
3
@
NgModule
({
4
providers
:
[
5
{
6
provide
:
API_BASE_URL
,
7
useValue
:
'https://api.wishtack.io/api/v2'
8
}
9
]
10
})
11
export
class
AppModule
{
12
}
13
14
@
Component
({
15
...
16
})
17
export
class
AppComponent
{
18
19
constructor
(
@
Inject
(
API_BASE_URL
)
apiBaseUrl
:
string
)
{
20
}
21
22
}
Copied!
... préférez donc l'approche ci-dessous afin de bénéficier sans effort du "typing" TypeScript et éviter l'utilisation du décorateur
@Inject()
.
1
export
class
Config
{
2
readonly
apiBaseUrl
:
string
;
3
}
4
5
@
Injectable
()
6
export
class
CustomConfig
extends
Config
{
7
apiBaseUrl
=
'https://api.wishtack.io/api/v2'
;
8
}
9
10
@
NgModule
({
11
providers
:
[
12
{
13
provide
:
Config
,
14
useClass
:
CustomConfig
15
}
16
]
17
})
18
export
AppModule
{
19
}
20
21
@
Component
({
22
...
23
})
24
export
class
AppComponent
{
25
26
constructor
(
config
:
Config
)
{
27
this
.
apiBaseUrl
=
config
.
apiBaseUrl
;
28
}
29
30
}
Copied!
Précédent
Tree-Shakable Services
Suivant
Exemple
Dernière mise à jour
4yr ago
Copier le lien