Введите Ваш E-mail адрес и Вы будете первым, кто получит новые статьи.

Статьи

Использование Bootstrap 4 с Angular 6 | 7

Использование Bootstrap 4 с Angular теперь обновляется до Angular 6

Учебное пособие по Angular 6: Пример применения полноформатного углового приложения

Bootstrap - это самая популярная среда HTML и CSS для простого и гибкого создания адаптивных макетов без глубоких знаний CSS (все же для настройки дизайна требуется индивидуальный CSS, который отличает его от других веб-сайтов в стиле Bootstrap, если только вы не используете BS). Тема разработана специально для вас).

Bootstrap 4 - это последняя версия BS, которая предоставляет множество новых и мощных функций в фреймворке, наиболее важно Flexbox, который теперь является системой отображения по умолчанию для размещения сетки BS (одна из самых важных функций BS).

В этом уроке мы увидим, как использовать Bootstrap для стилизации сайтов, созданных с использованием платформы Angular 6 | 5. Мы увидим, как мы можем легко интегрировать их оба, используя пакеты ng-bootstrap против ngx-bootstrap и используя Angular CLI для генерации нового проекта.

Итак, начнем с установки Угловой CLI 6 если он еще не установлен в вашей системе.

Перейдите в свой терминал или командную строку, затем выполните следующую команду, чтобы установить последнюю версию Angular CLI (версия 6 на момент написания этой статьи)

$ npm install -g @ angular / cli @ latest

Это установит CLI v6 глобально, поэтому в зависимости от конфигурации npm может потребоваться добавить sudo (для доступа суперпользователя).

После установки вы получите утилиту ng . Давайте использовать его для создания нового проекта Angular 6.

Это сгенерирует структуру каталогов и необходимые файлы для проекта и установит зависимости.

Далее перейдите в корневую папку вновь созданного проекта

Затем вы можете обслуживать ваше приложение Angular 6 с помощью команды ng serve:

Ваше приложение будет обслуживаться с http: // localhost: 4200 /

Теперь вернитесь к своему терминалу, затем установите Bootstrap 4 через npm.

$ npm install - сохранить начальную загрузку

Это также добавит загрузчик в package.json.

Ресурсы Bootstrap 4 устанавливаются внутри папки node_modules / bootstrap, поэтому вам необходимо включить CSS-файлы в начало основного HTML-файла вашего приложения или также добавить @import в style.css

@import "~ bootstrap / dist / css / bootstrap.css"

Обратите внимание, что Bootstrap 4 зависит от библиотек jQuery и Popper.js, и поскольку мы не включаем их, любые компоненты Bootstrap, использующие JavaScript, работать не будут. Так почему бы не включить эти библиотеки? Для Angular лучше избегать использования библиотек, которые выполняют прямые манипуляции с DOM (например, jQuery), и позволяют Angular справиться с этим.

А что если вам нужны все возможности Bootstrap 4?

Вы можете по-разному включать jQuery, Popper.js и bootstrap.js, что не рекомендуется, используя массив scripts в файле .angular-cli.json

"scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/popper.js", "../node_modules/bootstrap/dist/js/bootstrap .js "],

Другим лучшим альтернативным способом является использование библиотек компонентов, созданных для обеспечения беспроблемной работы Bootstrap с Angular, таких как ng-bootstrap или ngx-bootstrap.

Должен ли я добавить bootstrap.js или bootstrap.min.js в мой проект? Нет, цель ng-bootstrap - полностью заменить реализацию JavaScript для компонентов. Не следует также включать другие зависимости, такие как jQuery или popper.js. Это не обязательно и может помешать коду ng-bootstrap Источник

Итак, сначала вам нужно установить библиотеку из npm, используя следующую команду:

Установка npm --save @ ng-bootstrap / ng-bootstrap

После завершения установки вам нужно будет импортировать основной модуль.

импортировать {NgbModule} из '@ ng-bootstrap / ng-bootstrap';

Далее вам нужно добавить модуль, который вы импортировали в корневой модуль вашего приложения.

импортировать {NgbModule} из '@ ng-bootstrap / ng-bootstrap'; @ NgModule ({объявлений: [/*...*/], импорт: [/*...*/, NgbModule. ForRoot ()], /*...*/}) класс экспорта AppModule {}

Обратите внимание, что ng-bootstrap требует наличия файла Bootstrap 4 CSS.

Вы можете добавить его в массив стилей файла .angular-cli.json следующим образом:

"styles": ["styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css"],

Теперь вы можете использовать Bootstrap 4 в вашем приложении Angular.

Вы можете найти все доступные компоненты через это ссылка на сайт ,

Вы также можете использовать библиотеку ngx-bootstrap Вы также можете использовать библиотеку ngx-bootstrap

Просто вернитесь к своему терминалу, убедитесь, что вы находитесь внутри своего проекта Angular, а затем выполните следующую команду для установки ngx-bootstrap

npm install ngx-bootstrap --save

Вам также понадобятся файлы Bootstrap 4 CSS. Добавьте следующую строку в <head> вашего Angular-приложения, которое включает Bootstrap из CDN

<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel = "таблица стилей">

Вы также можете установить загрузчик из npm и использовать предыдущий способ для включения файла CSS (через массив стилей в файле angular-cli.json)

"styles": ["../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"],

Затем откройте src / app / app.module.ts и добавьте

import {BsDropdownModule} из 'ngx-bootstrap / dropdown'; импортировать {AlertModule} из 'ngx-bootstrap'; /*...*/ @ NgModule ({/*...*/ импортирует: [BsDropdownModule. ForRoot (), AlertModule. ForRoot (), /*...*/], /*...*/} )

Это пример импорта двух компонентов BsDropdownModule и AlertModule .

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

ngx-bootstrap предоставляет каждый компонент BS в каждом собственном модуле, поэтому вы импортируете только те компоненты, которые вам нужны. Таким образом, ваше приложение будет меньше, поскольку оно объединяет только те компоненты, которые вы на самом деле используете.

Вы можете найти все доступные компоненты, которые вы можете использовать из документы

Предыдущие способы добавления Bootstrap 4 в Angular 5 работают и для Angular 6. Но благодаря новой команде ng add, добавленной в Angular 6, у вас есть новый более простой и легкий способ добавить Bootstrap без явного npm, установить необходимые зависимости или добавить любые конфигурации , Вы можете просто запустить следующую команду, чтобы добавить ng-bootstrap, используя Schematics:

ng add @ ng-bootstrap / schematics

Вот и все. Теперь у вас есть поддержка компонентов и стилей Bootstrap без каких-либо дополнительных настроек. Вам также не нужен jQuery, так как мы используем ng-bootstrap.

В этой статье мы увидели различные способы включения Bootstrap 4 в приложения Angular 5: использование оригинальных ресурсов Bootstrap 4 из npm, использование библиотеки ng-bootstrap и, наконец, использование ngx-bootstrap.

Если вы хотите сравнить ng-bootstrap с ngx-bootstrap, наиболее важным моментом является то, как ngx-bootstrap использует отдельные модули для компонентов, чтобы уменьшить конечный размер приложения.

Эта статья также обновлена, чтобы показать вам, как быстро добавить Bootstrap 4 в новую версию Angular 6 с помощью новой команды ng add.

Похожие

Как настроить караоке с Apple TV и YouTube TV Queue
Я искал способы настройки функции очереди ТВ на YouTube с Apple TV, чтобы я мог использовать ее для караоке. К сожалению, мои поиски были напрасны. Нет прямого способа заставить Apple TV делать очередь на ТВ на YouTube, но в этом посте я поделюсь обходным путем, который вы можете сделать. Apple и Google (кому принадлежит YouTube), как известно,
... использование рекламы в интернете - баннерная реклама. Эта форма рекламы была введена веб-журналом ...
... использование рекламы в интернете - баннерная реклама. Эта форма рекламы была введена веб-журналом HotWired в начале 1990-х годов и состоит из изображения (пригодны GIF, JPEG или PNG), анимации (Flash или анимированный GIF), текста или интерактивного элемента Flash или Javascript некоторого типа, который является предназначен для максимального увеличения его привлекательности и поощрения пользователя нажимать на объявление, после чего они будут перенаправлены по гиперссылке на сайт рекламодателя,
Плагин WordPress для пользовательских карт Google и магазина
Описание плагинов Google Maps Locations Плагин Google Maps Locations позволяет пользователям размещать местоположение или достопримечательность на карте Google вместе с соответствующей информацией для этого местоположения, такой как описание, изображения, видео, маркеры с возможностью поиска и полный адрес, включая почтовый индекс. Отображение местоположений на карте Google Этот плагин для WordPress Google Maps отображает все местоположения на карте Google, а
Так почему бы не включить эти библиотеки?
А что если вам нужны все возможности Bootstrap 4?
Js в мой проект?

Новости