http://quentinpigne.github.io/developpement/frontend/angular/index.htmlMise en place d'un projet Organisation des fichiers Vues et manipulations du DOM Injection de dépendances Gestion de l'état Migration de Karma vers Jest Librairies à points d'entrée multiples Angular sans CLIHugofr-FRhttp://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/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/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/dependency_injection/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/dependency_injection/index.htmlEn Angular, les dépendances sont principalement des services, mais elles peuvent aussi être des valeurs telles que des string ou des fonctions. Un Injector global à l’application est créé automatiquement au bootstrap et est en charge d’instancier les dépendances lorsqu’elles sont utilisées en utilisant un provider pour le service ou la valeur. Injection context Multiple providers Références https://angular.io/guide/dependency-injection-overviewhttp://quentinpigne.github.io/developpement/frontend/angular/state_management/index.htmlMon, 01 Jan 0001 00:00:00 +0000http://quentinpigne.github.io/developpement/frontend/angular/state_management/index.htmlNgRx NgXs StateAdapthttp://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/