Dans ce didacticiel, nous allons utiliser les dernières versions de Bootstrap 4 et Angular 7 pour créer une application Angular et styliser l'interface avec Bootstrap.

Si vous avez déjà essayé de créer une application Web avec Angular 7, il est temps de passer à la vitesse supérieure. Voyons comment intégrer des styles Bootstrap CSS et des fichiers JavaScript à un projet Angular généré à l'aide de la CLI angulaire, et comment utiliser les contrôles de formulaire et les classes pour créer de superbes formulaires et comment styliser des tableaux HTML à l'aide de Styles de table .

Pour la partie angulaire, nous allons créer une application simple côté client pour créer et répertorier les contacts. Chaque contact a un identifiant, un nom, un email et une description, et nous allons utiliser un simple service de données qui stocke les contacts dans un tableau TypeScript. Vous pouvez utiliser une API avancée en mémoire à la place. (Consultez « Un guide complet sur le routage en angulaire ».)

Note : Vous pouvez obtenir le code source de ce didacticiel auprès de ce GitHub référentiel et voir l'exemple en direct sur ici .

Conditions préalables

Avant de commencer à créer l'application de démonstration, voyons les conditions requises pour ce didacticiel.

Fondamentalement, vous aurez besoin de la

• Node.js et NPM installés (vous pouvez simplement vous rendre sur le site officiel et télécharger les fichiers binaires de votre système),
• Connaissance de TypeScript,
• Expérience professionnelle de Angular,
• Connaissance de base de CSS et HTML

Installer Angular CLI

Commençons par installer la dernière version de Angular CLI. Dans votre terminal, exécutez la commande suivante:

 $ npm install -g @ angular / cli

Au moment de l'écriture, v7.0.3 de Angular CLI est installé. Si la CLI est déjà installée, vous pouvez vous assurer que vous avez la dernière version en utilisant cette commande:

 $ ng --version

Création d’un projet

Une fois que vous avez installé Angular CLI, utilisons-le pour générer un projet Angular 7 en exécutant la commande suivante:

 $ ng new angular-bootstrap-demo

La CLI vous demandera ensuite:

Souhaitez-vous ajouter le routage angulaire?

Appuyez sur Y . Ensuite, il vous demandera:

Quel format de feuille de style voulez-vous utiliser?

Choisissez “CSS”.

Ajouter Bootstrap

Après avoir créé le projet, vous devez installer Bootstrap 4 et l'intégrer. votre projet Angular.

Commencez par naviguer dans le dossier racine de votre projet:

 $ cd angular-bootstrap-demo

Ensuite, installez Bootstrap 4 et jQuery à partir de npm:

 $ npm install --save bootstrap jquery

(Dans ce cas, bootstrap v4.2.1 et jQuery v3.3.1 sont installés.)

Enfin, ouvrez le fichier angular.json . et ajoutez les chemins des fichiers Bootstrap CSS et JS ainsi que jQuery aux tableaux de styles et sous la build :

 "architecte" : {
  "construire": {
    [...]
    "styles": [
      "src/styles.css", 
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

Découvrez comment ajouter Bootstrap à un projet Angular 6 pour connaître les options d'intégration de Bootstrap à Angular.

Ajout d'un service de données

Après avoir créé un projet et ajouté Bootstrap 4, nous Créez un service angulaire qui servira à fournir des données de démonstration à afficher dans notre application.

Dans votre terminal, exécutez la commande suivante pour générer un service:

 $ ng génère des données de service.

Ceci créera deux fichiers src / app / data.service.spec.ts et src / app / data.service.ts .

Ouvrir src /app/data.service.ts et remplacez son contenu par le texte suivant:

 import {Injectable} from '@ angular / core';

@Injectable ({
  FourniDans: 'root'
})
classe d'exportation DataService {

  contacts = [
    {id: 1, name: "Contact 001", description: "Contact 001 des", email: "c001@email.com"},
    {id: 2, name: "Contact 002", description: "Contact 002 des", email: "c002@email.com"},
    {id: 3, name: "Contact 003", description: "Contact 003 des", email: "c003@email.com"},
    {id: 4, name: "Contact 004", description: "Contact 004 des", email: "c004@email.com"}
  ];

  constructeur () {}

  public getContacts (): Array {
    retourner this.contacts;
  }
  public createContact (contact: {id, nom, description, email}) {
    this.contacts.push (contact);
  }
}

Nous ajoutons un tableau contacts avec des contacts de démonstration, une méthode getContacts () qui renvoie les contacts et une createContact () qui ajoute un nouveau contact. dans le tableau contacts .

Ajout de composants

Après avoir créé le service de données, nous devons ensuite créer certains composants pour notre application. Dans votre terminal, exécutez:

 $ ng generate composant home
$ ng générer un composant contact-create
$ ng générer la liste de contacts du composant

Nous allons ensuite ajouter ces composants au module de routage pour permettre la navigation dans notre application. Ouvrez le fichier src / app / app-routing.module.ts et remplacez son contenu par le suivant:

 import {NgModule} depuis '@ angular / core';
importer {Routes, RouterModule} depuis '@ angular / router';
importer {ContactListComponent} depuis './contact-list/contact-list.component';
import {ContactCreateComponent} de './contact-create/contact-create.component';
importer {HomeComponent} de './home/home.component';

routes const: Routes = [
  {path:  "", pathMatch:  "full",redirectTo:  "home"},
  {path: "home", component: HomeComponent},
  {path: "contact-create", component: ContactCreateComponent},
  {path: "contact-list", component: ContactListComponent}  
];

@NgModule ({
  importations: [RouterModule.forRoot(routes)],
  exportations: [RouterModule]
})
classe d'exportation AppRoutingModule {}

Nous utilisons la propriété redirectTo du chemin du routeur pour rediriger les utilisateurs vers la page d'accueil lorsqu'ils visitent notre application.

Ajout de composants d'en-tête et de pied de page

Ensuite, créons l'en-tête et le pied de page. composants:

 $ ng générer un en-tête de composant
$ ng générer un pied de page de composant

Ouvrez le fichier src / app / header / header.component.html et ajoutez le code suivant:

Une barre de navigation sera créée avec Bootstrap 4 et nous utiliserons la directive routerLink pour établir une liaison avec différents composants.

Utilisez les outils .navbar . .navbar-expand {-sm | -md | -lg | -xl} et .navbar-dark pour créer des barres de navigation Bootstrap. (Pour plus d'informations sur les barres de navigation, consultez la documentation de Bootstrap sur « Navbar ».

Ouvrez ensuite le fichier src / app / header / header.component.css et ajoutez-le. :

 .nav-item {
    rembourrage: 2px;
    marge gauche: 7px;
}

Ouvrez ensuite le fichier src / app / footer / footer.component.html et ajoutez:

Ouvrez le fichier src / app / footer / footer.component.css et ajoutez:

 footer {
    position: absolue;
    à droite: 0;
    en bas: 0;
    gauche: 0;
    rembourrage: 1rem;
    text-align: center;
}

Ouvrez ensuite le fichier src / app / app.component.html et remplacez-le par le contenu suivant:

Nous créons un shell d’application en utilisant les composants d’en-tête et de pied de page, ce qui signifie qu’ils seront présents sur chaque page de notre application. La seule partie qui sera modifiée est ce qui sera inséré dans la prise du routeur (pour plus d'informations, consultez « The Application Shell » sur le site Web Angular).

Ajout d'un Bootstrap Jumbotron

Selon Documents Bootstrap :

"Un Jumbotron est un composant léger et flexible qui peut éventuellement étendre la fenêtre d'affichage dans son intégralité pour mettre en valeur les principaux messages marketing de votre site."

Ajoutons un composant Jumbotron à notre page d'accueil. Ouvrez le fichier src / app / home / home.component.html et ajoutez:

  
 Angular Bootstrap Demo 
  

     Cette démonstration montre comment intégrer Bootstrap 4 à Angular 7.
  
   Voir le tutoriel 

La classe .jumbotron est utilisée pour créer un Jumbotron Bootstrap.

Ajout d'un composant de liste: utilisation d'une table Bootstrap

Créons maintenant un composant à une liste de données à partir du service de données. et utilisez un tableau Bootstrap 4 pour afficher les données tabulaires.

Ouvrez d’abord le fichier src / app / contact-list / contact-list.component.ts et injectez le service de données, puis appelez le fichier . ] getContacts () pour obtenir des données lorsque le composant est initialisé:

 import {Component, OnInit} à partir de '@ angular / core';
importer {DataService} de '../data.service';

@Composant({
  sélecteur: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
La classe d'exportation ContactListComponent implémente OnInit {

  Contacts;
  selectedContact;
  
  constructeur (public dataService: DataService) {}

  ngOnInit () {
    this.contacts = this.dataService.getContacts ();
  }
  public selectContact (contact) {
    this.selectedContact = contact;
  }
}

Nous avons ajouté deux variables contacts et selectedContact qui contiennent l'ensemble des contacts et le contact sélectionné. Et une méthode selectContact () qui assigne le contact sélectionné à la variable selectedContact .

Ouvrez le src / app / contact-list / contact-list.component. fichier html et ajoutez:

  

    

      

        
 # 
        
 Nom 
        
 E-mail 
        
 Actions 
      
    
    

      

    
        
 {{contact.id}} 
        
  {{contact.name}} 
        
  {{contact .email}} 
        

            Afficher les détails 
        
      
    
  
  

      

         # {{selectedContact.id}}
      
      

        
 {{selectedContact.name}} 
        

           {{selectedContact.description}}
        
      
    
    

Nous parcourons simplement le tableau de contacts et affichons les détails de chaque contact ainsi qu'un bouton pour sélectionner un contact. Si le contact est sélectionné, une carte Bootstrap 4 contenant plus d'informations s'affiche.

Voici la définition d'une carte tirée de Bootstrap 4 docs :

"Une carte . est un conteneur de contenu flexible et extensible. Il comprend des options pour les en-têtes et les pieds de page, une grande variété de contenu, des couleurs d’arrière-plan contextuelles et de puissantes options d’affichage. Si vous connaissez bien Bootstrap 3, les cartes remplacent nos anciens panneaux, puits et miniatures. Des fonctionnalités similaires à celles de ces composants sont disponibles en tant que classes de modification pour les cartes. ”

Nous utilisons les classes .table et .table-hover pour créer des tables de style Bootstrap, les . ] .card .card-block .card-title et . Classes pour créer des cartes. (Pour plus d'informations, consultez Tableaux et Cartes .)

Ajout d'un composant Create: utilisation de contrôles et de classes de formulaire Bootstrap

Ajoutons maintenant un formulaire à notre ] composant contact-create . Premièrement, nous devons importer le FormsModule dans notre principal module d’application. Ouvrez le fichier src / app / app.module.ts importez FormsModule à partir de @ angular / forms et ajoutez-le aux importations de @ . ] array:

 import {BrowserModule} depuis '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
import {AppRoutingModule} depuis './app-routing.module';
importer {FormsModule} à partir de '@ angular / forms';

/ * ... * /

@NgModule ({
  déclarations: [
  /* ... */
  ],
  importations: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Ouvrez ensuite le fichier src / app / contact-create / contact-create.component.ts et remplacez son contenu par le texte suivant:

 import {Component, OnInit} from '@angular /coeur';
importer {DataService} de '../data.service';

@Composant({
  sélecteur: 'app-contact-create',
  templateUrl: './contact-create.component.html',
  styleUrls: ['./contact-create.component.css']
})
La classe d'exportation ContactCreateComponent implémente OnInit {

  contact: {id, nom, description, email} = {id: null, nom: "", description: "", email: ""};
  
  constructeur (public dataService: DataService) {}

  ngOnInit () {
  }
  
  Créer un contact(){
    console.log (this.contact);
    this.dataService.createContact (this.contact);
    this.contact = {id: null, nom: "", description: "", email: ""};

  }
}

Ouvrez ensuite le fichier src / app / contact-create / contact-create.component.html et ajoutez le code suivant:

  


    


      

        

          

             ID 
            
             Entrez l'identifiant de votre contact 

             Contact Nom 
            
             Entrez le nom de votre contact 

             E-mail du contact 
            
             Entrez l'adresse de votre contact 

             Description du contact 
                                  
             Entrez la description de votre contact 

          
        
         Créer un contact 
      
    
  

Nous utilisons les classes .form-group .form-control pour créer un formulaire de style Bootstrap (consultez la section « Forms » pour plus d'informations. ).

Nous utilisons la directive ngModel pour lier les champs de formulaire à la variable des composants. Pour que la liaison de données fonctionne correctement, vous devez attribuer un nom à chaque champ de formulaire.

Lectures recommandées : Gestion des points de contrôle d'image avec Angular de Tamas Piros

Exécution de l'application Angular

À cette étape, exécutons l'application et voyons si tout fonctionne comme prévu. Rendez-vous sur votre terminal, assurez-vous d'être dans le dossier racine de votre projet, puis exécutez la commande suivante:

 $ ng serve

Un serveur de développement live-reload sera exécuté à partir de l'adresse http: // localhost: 4200 . Ouvrez votre navigateur Web et accédez à cette adresse. Vous devriez voir l’interface suivante:

Si vous accédez à la page Contacts, vous devriez voir:

Si vous accédez à la page "Créer un contact", vous devriez voir:

Conclusion

Dans ce tutoriel, nous avons vu comment créer une application Angular simple avec une interface Bootstrap. Vous pouvez trouver le code source complet sur GitHub et voir l'exemple direct ici .

(dm, il)