Java, UX, HTML, CSS, WEB-design

Стилизация приложения Angular с помощью Bootstrap

Краткое описание по статье Стилизация приложения Angular с помощью Bootstrap

Название: Стилизация приложения Angular с помощью Bootstrap . Краткое описание: ⭐ Ахмед Буше . Дата публикации: 25.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


  • Ахмед Бушефра

  • 0 Комментарии

Стилизация приложения Angular с помощью Bootstrap

  • 9 минут чтения

  • Приложения, CSS, Angular, JavaScript

Краткое резюме ↬

В этом руководстве мы будем использовать последние версии Bootstrap 4 и Angular 7 для создания приложения Angular и оформления интерфейса с помощью Bootstrap.

Если вы уже пробовали создавать веб-приложения с помощью Angular 7, пришло время поднять его на ступеньку выше. Давайте посмотрим, как мы можем интегрировать стили Bootstrap CSS и файлы JavaScript с проектом Angular, созданным с помощью Angular CLI, и как использовать элементы управления и классы форм для создания красивых форм и как стилизовать HTML-таблицы с помощью стилей таблиц.

Что касается Angular, мы создадим простое клиентское приложение для создания и перечисления контактов. У каждого контакта есть идентификатор, имя, адрес электронной почты и описание, и мы будем использовать простую службу данных, которая хранит контакты в массиве TypeScript. Вместо этого вы можете использовать расширенный API в памяти. (Посмотрите «Полное руководство по маршрутизации в Angular».)

Примечание: Вы можете получить исходный код этого руководства из этого репозитория GitHub и посмотреть живой пример здесь.

Требования

Прежде чем мы начнем создавать демонстрационное приложение, давайте рассмотрим требования, необходимые для этого руководства.

В основном вам понадобится следующее:

  • Node.js и NPM установлены (вы можете просто зайти на официальный сайт и загрузить бинарные файлы для своей системы),
  • Знакомство с TypeScript,
  • Опыт работы с Angular,
  • Базовые знания CSS и HTML.

Еще после прыжка! Продолжить чтение ниже ↓

Установка Angular CLI

Начнем с установки последней версии Angular CLI. В терминале выполните следующую команду:

$ npm install -g @angular/cli

На момент написания, v7.0.3 Angular CLI установлен. Если у вас уже установлен CLI, вы можете убедиться, что у вас установлена ​​последняя версия, с помощью этой команды:

$ ng --version

Создание проекта

После того, как вы установили Angular CLI, давайте используем его для создания проекта Angular 7, выполнив следующую команду:

$ ng new angular-bootstrap-demo

Затем CLI спросит вас:

Хотите добавить маршрутизацию Angular?

Нажмите Д. Далее он спросит вас:

Какой формат таблицы стилей вы хотели бы использовать?

Выберите «CSS».

Добавление начальной загрузки

После создания проекта вам необходимо установить Bootstrap 4 и интегрировать его с вашим проектом Angular.

Сначала перейдите в корневую папку вашего проекта:

$ cd angular-bootstrap-demo

Затем установите Bootstrap 4 и jQuery из npm:

$ npm install --save bootstrap jquery

(В таком случае, загрузчик v4.2.1 и jQuery v3.3.1 установлены.)

Наконец, откройте angular.json файл и добавьте пути к файлам Bootstrap CSS и JS, а также jQuery в styles и scripts массивы под build цель:

"architect": {
  "build": {
    [...], 
    "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"
      ]
    },

Узнайте, как добавить Bootstrap в проект Angular 6, чтобы узнать, как интегрировать Bootstrap с Angular.

Добавление службы данных

После создания проекта и добавления Bootstrap 4 мы создадим службу Angular, которая будет использоваться для предоставления некоторых демонстрационных данных для отображения в нашем приложении.

В терминале выполните следующую команду для создания службы:

$ ng generate service data

Это создаст два src/app/data.service.spec.ts и src/app/data.service.ts файлы.

Открытым src/app/data.service.ts и замените его содержимое следующим:

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

@Injectable({
  providedIn: 'root'
})
export class 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"}
  ];

  constructor() { }

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

Мы добавляем contacts массив с некоторыми демонстрационными контактами, getContacts() метод, который возвращает контакты и createContact() которые добавляют новый контакт к contacts множество.

Добавление компонентов

После создания службы данных нам нужно создать некоторые компоненты для нашего приложения. В вашем терминале запустите:

$ ng generate component home
$ ng generate component contact-create
$ ng generate component contact-list

Далее мы добавим эти компоненты в модуль маршрутизации, чтобы включить навигацию в нашем приложении. Открыть src/app/app-routing.module.ts файл и замените его содержимое следующим:

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

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мы используем redirectTo свойство пути маршрутизатора для перенаправления пользователей на домашнюю страницу при посещении нашего приложения.

Далее создадим компоненты верхнего и нижнего колонтитула:

$ ng generate component header
$ ng generate component footer

Открыть src/app/header/header.component.html файл и добавьте следующий код:

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Angular Bootstrap Demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">

      <li class="nav-item">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact-list">Contacts</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contact-create">Create</a>
      </li>

    </ul>
  </div>
</nav>

Панель навигации будет создана с помощью Bootstrap 4, и мы будем использовать routerLink директива для связи с различными компонентами.

Использовать .navbar, .navbar-expand{-sm|-md|-lg|-xl} и .navbar-dark классы для создания панелей навигации Bootstrap. (Для получения дополнительной информации о навигационных панелях ознакомьтесь с документацией Bootstrap на «Navbar».

Далее откройте src/app/header/header.component.css файл и добавить:


.nav-item{
    padding:2px;
    margin-left: 7px;
}

Далее откройте src/app/footer/footer.component.html файл и добавить:

<footer>
  <p  class="text-xs-center">© Copyright 2019. All rights reserved.</p>
</footer>

Открыть src/app/footer/footer.component.css файл и добавить:


footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    text-align: center;
}

Далее откройте src/app/app.component.html файл и замените его содержимое следующим:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

Мы создаем оболочку приложения, используя компоненты верхнего и нижнего колонтитула, что означает, что они будут присутствовать на каждой странице нашего приложения. Единственная часть, которая будет изменена, — это то, что будет вставлено в розетку маршрутизатора (дополнительную информацию см. в «Оболочке приложения» на веб-сайте Angular).

Добавление Bootstrap Jumbotron

Согласно документам Bootstrap:

«Jumbotron — это легкий и гибкий компонент, который может при желании расширить всю область просмотра, чтобы продемонстрировать ключевые маркетинговые сообщения на вашем сайте».

Давайте добавим компонент Jumbotron на нашу домашнюю страницу. Открыть src/app/home/home.component.html файл и добавить:

<div class="jumbotron" style="background-color: #fff; height: calc(95vh);">
  <h1>Angular Bootstrap Demo</h1>
  <p class="lead">
    This demo shows how to integrate Bootstrap 4 with Angular 7  
  </p>
  <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a>
</div>

То .jumbotron класс используется для создания Bootstrap Jumbotron.

Добавление компонента списка: использование таблицы начальной загрузки

Теперь давайте создадим компонент для списка данных из службы данных и воспользуемся таблицей Bootstrap 4 для отображения табличных данных.

Сначала откройте src/app/contact-list/contact-list.component.ts файл и внедрить службу данных, а затем вызвать getContacts() метод для получения данных при инициализации компонента:

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

@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {

  contacts;
  selectedContact;

  constructor(public dataService: DataService) { }

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

Мы добавили две переменные contactsи selectedContact которые содержат набор контактов и выбранный контакт. И selectContact() метод, который назначает выбранный контакт selectedContact Переменная.

Открыть src/app/contact-list/contact-list.component.html файл и добавить:

<div class="container" style="margin-top: 70px;">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let contact of contacts">

        <td>{{ contact.id }}</td>
        <td> {{ contact.name }}</td>
        <td> {{ contact.email }}</td>
        <td>
          <button class="btn btn-primary" (click)="selectContact(contact)"> Show details</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="card text-center" *ngIf="selectedContact">
      <div class="card-header">
        # {{selectedContact.id}}
      </div>
      <div class="card-block">
        <h4 class="card-title">{{selectedContact.name}}</h4>
        <p class="card-text">
          {{selectedContact.description}}
        </p>    
      </div>

    </div>
</div>

Мы просто перебираем contacts массив и отображать информацию о каждом контакте и кнопку для выбора контакта. Если контакт выбран, отобразится карточка Bootstrap 4 с дополнительной информацией.

Это определение карты из документов Bootstrap 4:

«А карта является гибким и расширяемым контейнером содержимого. Он включает в себя параметры верхних и нижних колонтитулов, широкий спектр контента, контекстные цвета фона и мощные параметры отображения. Если вы знакомы с Bootstrap 3, карточки заменят наши старые панели, колодцы и эскизы. Функциональность, аналогичная этим компонентам, доступна в виде классов модификаторов для карт».

Мы используем .table и .table-hover классы для создания таблиц в стиле Bootstrap, .card, .card-block, .card-title и .card-text классы для создания карт. (Для получения дополнительной информации ознакомьтесь с таблицами и карточками.)

Добавление компонента Create: использование элементов управления формы Bootstrap и классов

Давайте теперь добавим форму к нашему contact-create компонент. Во-первых, нам нужно импортировать FormsModule в нашем основном модуле приложения. Открыть src/app/app.module.ts файл, импорт FormsModule от @angular/formsи добавьте его в imports множество:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

/* ... */

@NgModule({
  declarations: [
  /* ... */
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Далее откройте src/app/contact-create/contact-create.component.ts файл и замените его содержимое следующим:

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

@Component({
  selector: 'app-contact-create',
  templateUrl: './contact-create.component.html',
  styleUrls: ['./contact-create.component.css']
})
export class ContactCreateComponent implements OnInit {

  contact : {id, name, description, email} = {id: null, name: "", description: "", email: ""};

  constructor(public dataService: DataService) { }

  ngOnInit() {
  }

  createContact(){
    console.log(this.contact);
    this.dataService.createContact(this.contact);
    this.contact = {id: null, name: "", description: "", email: ""};

  }
}

Далее откройте src/app/contact-create/contact-create.component.html файл и добавьте следующий код:

<div class="container" style="margin-top: 70px;">

  <div class="row">

    <div class="col-sm-8 offset-sm-2">

      <div>
        <form>
          <div class="form-group">
            <label for="id">ID</label>
            <input [(ngModel)]="contact.id" type="text" name="id" class="form-control" id="id" aria-describedby="idHelp" placeholder="Enter ID">
            <small id="idHelp" class="form-text text-muted">Enter your contact’s ID</small>

            <label for="name">Contact Name</label>
            <input [(ngModel)]="contact.name" type="text" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter your name">
            <small id="nameHelp" class="form-text text-muted">Enter your contact’s name</small>

            <label for="email">Contact Email</label>
            <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" id="email" aria-describedby="emailHelp"
              placeholder="Enter your email">
            <small id="nameHelp" class="form-text text-muted">Enter your contact’s email</small>

            <label for="description">Contact Description</label>
            <textarea [(ngModel)]="contact.description" name="description" class="form-control" id="description" aria-describedby="descHelp">
                      </textarea>
            <small id="descHelp" class="form-text text-muted">Enter your contact’s description</small>

          </div>
        </form>
        <button class="btn btn-primary" (click)="createContact()">Create contact</button>
      </div>
    </div>
  </div>
</div>

Мы используем .form-group, .form-control классы для создания формы в стиле Bootstrap (дополнительную информацию см. в разделе «Формы»).

Мы используем ngModel директива для привязки полей формы к переменной компонента. Чтобы привязка данных работала правильно, необходимо дать каждому полю формы имя.

Рекомендуемое чтение: Управление точками останова изображения с помощью Angular от Tamas Piros

Запуск приложения Angular

На этом шаге давайте запустим приложение и посмотрим, все ли работает как положено. Перейдите к своему терминалу, убедитесь, что вы находитесь в корневой папке вашего проекта, затем выполните следующую команду:

$ ng serve

Сервер разработки с перезагрузкой в ​​реальном времени будет запущен из https://localhost:4200 адрес. Откройте веб-браузер и перейдите по этому адресу. Вы должны увидеть следующий интерфейс:

Демонстрация Angular Bootstrap: Домашняя страница

(Большой превью)

Если вы перейдете на страницу Контакты, вы должны увидеть:

Демонстрация Angular Bootstrap: страница контактов

(Большой превью)

Если вы перейдете на страницу «Создать контакт», вы должны увидеть:

Демонстрация Angular Bootstrap: создание контактной страницы

(Большой превью)

Вывод

В этом руководстве мы увидели, как создать простое приложение Angular с интерфейсом Bootstrap. Вы можете найти полный исходный код на GitHub и посмотреть живой пример здесь.

Сокрушительная редакция
(дм, ил)




Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Стилизация приложения Angular с помощью Bootstrap

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»