SlideShare une entreprise Scribd logo
vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1
Angular 4
Production de
composants
info@vertika.org
-- Angular 4 -- -- 2by Jean Garutti
je m’entoure de composants
info@vertika.org
-- 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
info@vertika.org
-- Angular 4 -- -- 4by Jean Garutti
4 – dans le Projet
info@vertika.org
-- Angular 4 -- -- 5by Jean Garutti
 > ng g component my-new-component
nom du composant
ng invoque le CLI Angular
g ( raccourci de générer ),
vous pouvez utiliser le mot complet
générer
Créer un Composant
info@vertika.org
-- 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
info@vertika.org
-- Angular 4 -- -- 7by Jean Garutti
les composants
sont les
éléments de base
de votre application.
Créer un Composant
info@vertika.org
-- 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
info@vertika.org
-- 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
info@vertika.org
-- Angular 4 -- -- 10by Jean Garutti
 > ng g component my-new-component
1. installing component
2. create srcappmy-new-componentmy-new-
component.component.css
3. create srcappmy-new-componentmy-new-
component.component.html
4. create srcappmy-new-componentmy-new-
component.component.spec.ts
5. create srcappmy-new-componentmy-new-
component.component.ts
6. update srcappapp.module.ts
7. garutti@GARUTTI-PC C:Program
FilesnodejsPROJECT-NAME
Créer un Composant
info@vertika.org
-- Angular 4 -- -- 11by Jean Garutti
6. @NgModule({
7. declarations: [
8. AppComponent,
9. MyNewComponentComponent
10. ],
11. imports: [
12. BrowserModule
13. ],
14. providers: [],
15. bootstrap: [AppComponent]
16.})
17.export class AppModule { }
Composant ajouté
info@vertika.org
-- Angular 4 -- -- 12by Jean Garutti
 en 7 langues
 en présentiel
ou e-learning
 par des experts
Inscrivez-vous
aux cours Angular 4
info@vertika.org
-- Angular 4 -- -- 13by Jean Garutti

Contenu connexe

PPT
Angular 4 - creer pipes services -- Français
PPT
Angular 4 - ngfor -- Français
PPT
Angular 4 - directives d'attribut -- Français
PPT
Angular 4 - regles -- Français
PPT
Angular 4 - event binding -- Français
PPT
Angular 4 - shadow dom -- Français
PPT
Angular 4 - directives structurelles -- Français
PPT
Angular 4 - architecture -- français
Angular 4 - creer pipes services -- Français
Angular 4 - ngfor -- Français
Angular 4 - directives d'attribut -- Français
Angular 4 - regles -- Français
Angular 4 - event binding -- Français
Angular 4 - shadow dom -- Français
Angular 4 - directives structurelles -- Français
Angular 4 - architecture -- français

Tendances (12)

PPT
Angular 4 - pöurquoi --Français
PPT
Angular 4 - installation d'Angular -- Français
PPT
Angular 4 - decorateurs -- Français
PPT
Angular 4 - css Français
PPT
Angular 4 - property binding- slsh-fr
PPT
Angular 4 - interpolation -- Français
PPT
Angular 4 - ngIf -- Fra,çais
PPT
Angular 4 - creer projet par CLI -- français
PPT
Angular 4 - directives -- Français
PPT
Angular 4 - explorer un projet par CLI-- Français
PPT
Angular 4 - template -- Français
PDF
Geek Time December 2016 : Swagger II
Angular 4 - pöurquoi --Français
Angular 4 - installation d'Angular -- Français
Angular 4 - decorateurs -- Français
Angular 4 - css Français
Angular 4 - property binding- slsh-fr
Angular 4 - interpolation -- Français
Angular 4 - ngIf -- Fra,çais
Angular 4 - creer projet par CLI -- français
Angular 4 - directives -- Français
Angular 4 - explorer un projet par CLI-- Français
Angular 4 - template -- Français
Geek Time December 2016 : Swagger II
Publicité

En vedette (20)

PDF
Meet up paris 13 of jun 2017
PDF
Devoxx 2015, Atelier Ionic - 09/04/2015
PPTX
Radio cognitive et intelligence artificielle
PDF
Algea - 04 - conclusion
PPTX
Introduction gestion de projet
PDF
Mobilization 2017: Don't lose your users because of endless quality issues
PDF
Les virus
PDF
03 programmation mobile - android - (stockage, multithreads, web services)
PPTX
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
PPTX
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...
PDF
02 programmation mobile - android - (activity, view, fragment)
PDF
Andcx formation-android-avance-creation-d-applications-complexes
PDF
04 programmation mobile - android - (db, receivers, services...)
PPTX
1cours virologie généralités (1)
PPTX
Android à domicile
PDF
Support de la formation Android 5 , Avancé
PPTX
Android Studio, premier contact
PDF
Devoxx 2015, ionic chat
PDF
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
PDF
01 programmation mobile - android - (introduction)
Meet up paris 13 of jun 2017
Devoxx 2015, Atelier Ionic - 09/04/2015
Radio cognitive et intelligence artificielle
Algea - 04 - conclusion
Introduction gestion de projet
Mobilization 2017: Don't lose your users because of endless quality issues
Les virus
03 programmation mobile - android - (stockage, multithreads, web services)
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...
02 programmation mobile - android - (activity, view, fragment)
Andcx formation-android-avance-creation-d-applications-complexes
04 programmation mobile - android - (db, receivers, services...)
1cours virologie généralités (1)
Android à domicile
Support de la formation Android 5 , Avancé
Android Studio, premier contact
Devoxx 2015, ionic chat
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
01 programmation mobile - android - (introduction)
Publicité

Similaire à Angular 4 - creer composants -- français (7)

PDF
Chapitre 1-Composants et Modules.pdf
PDF
Chapitre 1-Composants et Modules.pdf
PDF
Chapitre3_Angular_part1 ANGULAR ISTIC SI.pdf
PDF
Support cours angular
PPTX
Angular2 / Typescript symposium Versusmind
PDF
4._Directives_Angular_Web_Avancé.pdf.pdf
PDF
Cours 2 les composants
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
Chapitre3_Angular_part1 ANGULAR ISTIC SI.pdf
Support cours angular
Angular2 / Typescript symposium Versusmind
4._Directives_Angular_Web_Avancé.pdf.pdf
Cours 2 les composants

Dernier (20)

PPTX
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
PDF
🎓 Le Secret des Profs Captivants - 💡 Pourquoi l’oral est stratégique en class...
PPTX
Presentation_carte_arduino_uno_1_Entree_Sortie_numerique.pptx
PPT
مبادئ و هدف الحركة الكشفية عرض تقديمي.ppt
PDF
Il y a et les lieux de la ville (négation avec les indéfinis)
PPT
diaporama pictogrammes de securité2.ppt
PPT
Etalonnage de débitmètres.Champ d'application
PPT
Les moyens de transport-2023.ppt french language teaching ppt
PPTX
le-present-de-lindicatif-ou-le-subjonctif-present-exercice-grammatical-feuill...
PPTX
le subjonctif présent, Conjugaison français
PDF
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
PPTX
Présentation Personal Branding J2025.pptx_20250218_132749_0000.pptx_20250610_...
PPTX
Présentation Projet Entreprise Minimaliste Moderne Sobre Blanc Noir.pptx
PPT
calcul---électrique--et--chutes de tension.ppt
PPTX
Conception de documents et d'interfaces numériques.pptx
PPTX
Le rendez-vous de l'été.pptx Film français
PPTX
Le rendez-vous de l'été.pptx Film français
PPTX
GESTION PHYTO_10-1_ SESAME PRPS BF JUIN 2020.pptx
PPTX
SESSION2-SUPPORT-DE-COURS-FLEC-(Future leader en énergie au Cameroun)-CECOSDA...
PPTX
Fondamentaux du LMD.pptx pour les etudiants
Copie de Présentation Personal Branding J2025.pptx_20250610_120558_0000.pptx
🎓 Le Secret des Profs Captivants - 💡 Pourquoi l’oral est stratégique en class...
Presentation_carte_arduino_uno_1_Entree_Sortie_numerique.pptx
مبادئ و هدف الحركة الكشفية عرض تقديمي.ppt
Il y a et les lieux de la ville (négation avec les indéfinis)
diaporama pictogrammes de securité2.ppt
Etalonnage de débitmètres.Champ d'application
Les moyens de transport-2023.ppt french language teaching ppt
le-present-de-lindicatif-ou-le-subjonctif-present-exercice-grammatical-feuill...
le subjonctif présent, Conjugaison français
Avis Digital Marketing Elite: Mon Retour d'Expérience Après 3 Mois d'Utilisation
Présentation Personal Branding J2025.pptx_20250218_132749_0000.pptx_20250610_...
Présentation Projet Entreprise Minimaliste Moderne Sobre Blanc Noir.pptx
calcul---électrique--et--chutes de tension.ppt
Conception de documents et d'interfaces numériques.pptx
Le rendez-vous de l'été.pptx Film français
Le rendez-vous de l'été.pptx Film français
GESTION PHYTO_10-1_ SESAME PRPS BF JUIN 2020.pptx
SESSION2-SUPPORT-DE-COURS-FLEC-(Future leader en énergie au Cameroun)-CECOSDA...
Fondamentaux du LMD.pptx pour les etudiants

Angular 4 - creer composants -- français

  • 1. vertika.org by Jean Garutti -- Angular 4 -- 08/28/17 -- 1 Angular 4 Production de composants
  • 2. info@vertika.org -- Angular 4 -- -- 2by Jean Garutti je m’entoure de composants
  • 3. info@vertika.org -- 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
  • 4. info@vertika.org -- Angular 4 -- -- 4by Jean Garutti 4 – dans le Projet
  • 5. info@vertika.org -- Angular 4 -- -- 5by Jean Garutti  > ng g component my-new-component nom du composant ng invoque le CLI Angular g ( raccourci de générer ), vous pouvez utiliser le mot complet générer Créer un Composant
  • 6. info@vertika.org -- 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
  • 7. info@vertika.org -- Angular 4 -- -- 7by Jean Garutti les composants sont les éléments de base de votre application. Créer un Composant
  • 8. info@vertika.org -- 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
  • 9. info@vertika.org -- 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
  • 10. info@vertika.org -- Angular 4 -- -- 10by Jean Garutti  > ng g component my-new-component 1. installing component 2. create srcappmy-new-componentmy-new- component.component.css 3. create srcappmy-new-componentmy-new- component.component.html 4. create srcappmy-new-componentmy-new- component.component.spec.ts 5. create srcappmy-new-componentmy-new- component.component.ts 6. update srcappapp.module.ts 7. garutti@GARUTTI-PC C:Program FilesnodejsPROJECT-NAME Créer un Composant
  • 11. info@vertika.org -- Angular 4 -- -- 11by Jean Garutti 6. @NgModule({ 7. declarations: [ 8. AppComponent, 9. MyNewComponentComponent 10. ], 11. imports: [ 12. BrowserModule 13. ], 14. providers: [], 15. bootstrap: [AppComponent] 16.}) 17.export class AppModule { } Composant ajouté
  • 12. info@vertika.org -- Angular 4 -- -- 12by Jean Garutti  en 7 langues  en présentiel ou e-learning  par des experts Inscrivez-vous aux cours Angular 4
  • 13. info@vertika.org -- Angular 4 -- -- 13by Jean Garutti