angular 4 - creer composants -- français
TRANSCRIPT
![Page 1: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/1.jpg)
vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1
Angular 4
Production de composants
![Page 3: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/3.jpg)
-- Angular 4 -- -- 3by Jean Garutti
Angular 4 – céer des composants
la création de composants
c’est le cœur d’Angular
Jean Garutti – vertika.org
![Page 5: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/5.jpg)
-- Angular 4 -- -- 5by Jean Garutti
> ng g component my-new-component
nom du composantng invoque le CLI Angularg ( raccourci de générer ),
vous pouvez utiliser le mot complet générer
Créer un Composant
![Page 6: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/6.jpg)
-- Angular 4 -- -- 6by Jean Garutti
> ng g component my-new-component nom du composant
Le component est le type d'élément que vous allez générer Cela aurait pu être la directive, le
pipe, le service, la classe, la guard, l'interface, l'énumération, le module)
Créer un Composant
![Page 7: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/7.jpg)
-- Angular 4 -- -- 7by Jean Garutti
les composants
sont les éléments de base de votre application.
Créer un Composant
![Page 8: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/8.jpg)
-- Angular 4 -- -- 8by Jean Garutti
Chaque composant comporte un template associé, une feuille de style et une classe avec une
logique.
TypeScript
Créer un Composant
![Page 9: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/9.jpg)
-- Angular 4 -- -- 9by Jean Garutti
> ng g component my-new-component nom du composant
À l'intérieur de /src/app/app.module.ts, il importe le nouveau composant et l'ajoute aux déclarations.
Créer un Composant
![Page 10: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/10.jpg)
-- Angular 4 -- -- 10by Jean Garutti
> ng g component my-new-component
1. installing component2. create src\app\my-new-component\my-new-
component.component.css3. create src\app\my-new-component\my-new-
component.component.html4. create src\app\my-new-component\my-new-
component.component.spec.ts5. create src\app\my-new-component\my-new-
component.component.ts6. update src\app\app.module.ts
7. garutti@GARUTTI-PC C:\Program Files\nodejs\PROJECT-NAME
Créer un Composant
![Page 11: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/11.jpg)
-- Angular 4 -- -- 11by Jean Garutti
6. @NgModule({7. declarations: [8. AppComponent,9. MyNewComponentComponent10. ],11. imports: [12. BrowserModule13. ],14. providers: [],15. bootstrap: [AppComponent]16.})17.export class AppModule { }
Composant ajouté
![Page 12: Angular 4 - creer composants -- français](https://reader031.vdocuments.pub/reader031/viewer/2022021500/5a6ebbeb7f8b9a70728b6097/html5/thumbnails/12.jpg)
-- Angular 4 -- -- 12by Jean Garutti
en 7 langues en présentiel ou e-learning
par des experts
Inscrivez-vous aux cours Angular 4