http://quentinpigne.github.io/tags/angular/index.htmlHugofr-FRhttp://quentinpigne.github.io/developpement/frontend/angular/dependency_injection/injection_context/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/dependency_injection/injection_context/index.htmlRéférences https://angular.io/guide/dependency-injection-contexthttp://quentinpigne.github.io/developpement/frontend/angular/project-setup/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/project-setup/index.htmlCréation du projet Un projet Angular peut se présenter sous deux structures différentes. Une structure “classique” qui ne comprend qu’un unique projet ou bien un workspace pouvant contenir plusieurs applications ou librairies (aussi appelé “monorepo”) Structure ‘classique’ ng new [application-name] --routing --style scss --prefix [prefix] Workspace vide + application (monorepo) ng new [project-name] --create-application false ng generate application [application-name] --routing --style scss --prefix [prefix] Info Si le projet est créé dans un dépôt Git existant, il faut utiliser l’option --skip-git afin de spécifier au CLI d’Angular de ne pas initialiser de dépôt Git.http://quentinpigne.github.io/developpement/frontend/angular/state_management/ngrx/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/state_management/ngrx/index.htmlRéférences https://ngrx.io/docs https://github.com/ngrxhttp://quentinpigne.github.io/developpement/frontend/angular/dependency_injection/multiple_providers/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/dependency_injection/multiple_providers/index.htmlLe multi-providing en Angular est la capacité du framework à fournir plusieurs dépendances au sein du même token. const SOME_TOKEN: InjectionToken = new InjectionToken('SomeToken'); var injector = Injector.create([ { provide: SOME_TOKEN, useValue: 'dependency one', multi: true }, { provide: SOME_TOKEN, useValue: 'dependency two', multi: true } ]); var dependencies = injector.get(SOME_TOKEN); // dependencies == ['dependency one', 'dependency two'] Références https://blog.thoughtram.io/angular2/2015/11/23/multi-providers-in-angular-2.html#other-multi-providershttp://quentinpigne.github.io/developpement/frontend/angular/state_management/ngxs/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/state_management/ngxs/index.htmlRéférences https://ngxs.io/ https://github.com/ngxshttp://quentinpigne.github.io/developpement/frontend/angular/files-organization/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/files-organization/index.htmlsrc +-- app | +-- modules | | +-- home | | | +-- components | | | | +-- ... | | | +-- pages | | | | +-- ... | | | +-- home-store | | | | home.actions.ts | | | | home.reducers.ts | | | | home.effects.ts | | | | home.selectors.ts | | | | home.state.ts | | | | home-store.module.ts | | | home.routing.module.ts | | | home.module.ts | +-- core | | +-- core-store | | | +-- actions | | | | user.actions.ts | | | | index.ts | | | +-- reducers | | | | user.reducer.ts | | | | index.ts | | | +-- effects | | | | user.effects.ts | | | +-- selectors | | | | user.selectors.ts | | | core-store.module.ts | | +-- shell | | | +-- components | | | | +-- header | | | | | header.component.[ts|spec.ts|html|scss] | | | | +-- footer | | | | | footer.component.[ts|spec.ts|html|scss] | | | shell.module.ts | | | shell.component.[ts|spec.ts|html|scss] | | +-- authentication | | +-- services | | +-- ... | | core.module.ts | +-- shared | | +-- componentes | | +-- directives | | +-- pipes | | shared.module.ts | app.module.ts | app-routing.module.ts | app.component.ts | app.component.spec.ts | app.component.scss | app.component.html +-- assets +-- environments | environment.prod.ts | environment.ts index.html main.ts polyfills.ts styles.scss test.ts Modules Les modules sont un groupements de pages similaires fonctionnellement. Ils servent au découpage de l’application en vue du Lazy-loadinghttp://quentinpigne.github.io/developpement/frontend/angular/state_management/state-adapt/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/state_management/state-adapt/index.htmlRéférences https://state-adapt.github.io/angular https://github.com/state-adapt/state-adapthttp://quentinpigne.github.io/developpement/frontend/angular/dom_manipulation/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/dom_manipulation/index.htmlVues en Angular En Angular, une vue (View) est le plus petit groupe d’éléments qui sont créés et détruits ensemble et dont le rendu est défini par une ou plusieurs directives. La philosophie d’Angular encourage les dévelopeurs à voir l’application comme une composition de vues, et non un assemblage d’éléments HTML. Une vue est définie par une classe Component et son template associé. Elle est représentée par une instance de ViewRef associée à un composant. Une vue qui est directement issue d’un composant est appelée HostView. Une hiérarchie de vues est ainsi établie.http://quentinpigne.github.io/developpement/frontend/angular/karma2jest/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/karma2jest/index.htmlAngular est fourni par défaut avec Karma. Il est cependant très simple de passer de Karma à Jest. Supprimer Karma Commencer par supprimer les fichiers src/karma.conf.js et src/test.ts. Puis dans le fichier package.json, supprimer les dépendances suivantes dans devDependencies: "karma": "*", "karma-chrome-launcher": "*", "karma-coverage-istanbul-reporter": "*", "karma-jasmine": "*", "karma-jasmine-html-reporter": "*", Installer Jest Installer Jest dans le projet à l’aide de la commande suivante : npm i -D jest @types/jest ts-jest @angular-builders/jest Ajouter un fichier nommé jest.config.js dans le même dossier que package.jsonhttp://quentinpigne.github.io/developpement/frontend/angular/multi-entrypoints/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/multi-entrypoints/index.htmlPoints d’entrée multiples Références https://sandroroth.com/blog/angular-libraryhttp://quentinpigne.github.io/developpement/frontend/angular/without-cli/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/without-cli/index.htmlRéférences https://prog.world/angular-without-cli-tutorial/