Создание проекта Angular 5 с помощью Bootstrap 4 и Firebase
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Часть 1: Настройка проекта
Подпишитесь на YouTube | Ссылка на демонстрацию
В этом руководстве я покажу вам, как запустить проект Angular 5 с нуля и добавить в приложение Bootstrap 4 и библиотеку Firebase. Это идеальный каркас приложения для вашего проекта веб-приложения.
Настройка проекта Angular
Сначала нам нужно настроить проект Angular. Это делается с помощью Angular CLI (https://cli.angular.io/). Если вы не установили Angular CLI в своей системе, сначала убедитесь, что интерфейс командной строки установлен, выполнив следующую команду:
$ npm install -g @angular/cli@latest
Установив Angular CLI, теперь вы можете использовать команду ng. С помощью этой команды мы можем запустить новый проект Angular:
$ ng new ng4fbbootstrap --skip-install
Чтобы запустить новый проект, нам нужно использовать параметр командной строки new и указать имя нового проекта. Кроме того, опция --skip-install
используется, чтобы избежать автоматической установки зависимостей NPM. Это необходимо, потому что для нашего приложения следует использовать Angular 5. На момент написания Angular 5 еще не выпущен и доступен только как версия Release Candidate, так что сначала мы должны обновить наш файл package.json.
Перейдите во вновь созданную папку проекта:
$ cd ng4fbbootstrap
Откройте package.json в редакторе кода и обязательно обновите информацию о версии для всех пакетов Angular в разделах dependencies и devDependencies до последней версии (например, ^ 5.0.0 -rc.1). Кроме того, убедитесь, что версия пакета typescript в разделе devDependencies также установлена на версию ~ 2.4.1. Соответствующая часть package.json теперь должна выглядеть следующим образом:
"dependencies": { "@angular/animations": "^5.0.0-rc.1", "@angular/common": "^5.0.0-rc.1", "@angular/compiler": "^5.0.0-rc.1", "@angular/core": "^5.0.0-rc.1", "@angular/forms": "^5.0.0-rc.1", "@angular/http": "^5.0.0-rc.1", "@angular/platform-browser": "^5.0.0-rc.1", "@angular/platform-browser-dynamic": "^5.0.0-rc.1", "@angular/router": "^5.0.0-rc.1", "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.5", "angularfire2": "^5.0.0-rc.2", "bootstrap": "^4.0.0-beta", "core-js": "^2.4.1", "firebase": "^4.4.0", "jquery": "^3.2.1", "popper.js": "^1.12.5", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "^1.5.0-beta.4", "@angular/compiler-cli": "^5.0.0-rc.1", "@angular/language-service": "^5.0.0-rc.1", "typescript": "~2.4.1" }
Выполните установку пакета через
$ npm install
Примечание. После выхода финальной версии Angular 5 вы можете пропустить этап ручного обновления Packaging.json и выполнить установку пакета в качестве дополнительного шага. Затем вы можете использовать ng new ng4fbbootstrap
для создания нового проекта (зависимости устанавливаются автоматически).
В папке проекта вы можете выполнить следующую команду для запуска веб-сервера разработки:
$ ng serve
Сервер запущен, и приложение будет доступно по адресу http: // localhost: 4200, как вы можете видеть на следующем снимке экрана:
Настройка Firebase
Следующим шагом будет включение Firebase в наш проект. Здесь необходимы два шага:
- Во-первых, новый проект Firebase должен быть создан в серверной части Firebase, а соответствующие настройки проекта должны быть доступны в приложении Angular.
- Во-вторых, в проект нужно добавить библиотеки Firebase и AngularFire2.
Создание проекта Firebase
Чтобы создать новый проект Firebase, перейдите на сайт Firebase https://firebase.google.com и создайте новую учетную запись / войдите в систему, используя свои учетные данные Google. После успешного входа в систему вы можете щелкнуть ссылку Перейти в консоль, чтобы получить доступ к серверной части Firebase:
Здесь вы можете нажать Добавить проект, чтобы добавить новый проект Firebase, или выбрать один из существующих проектов. Вы попадете в консоль проекта:
Щелкните ссылку Добавить Firebase в свое веб-приложение, чтобы открыть следующее диалоговое окно:
Здесь вы можете найти код JavaScript, необходимый для инициализации проекта Firebase для вашего веб-сайта. Однако для включения этой конфигурации Firebase в проект Angular нам нужна только часть этого фрагмента кода. Скопируйте пары ключ-значение внутри объекта конфигурации и вставьте эти пары в файл environment / environment.ts следующим образом:
export const environment = { production: false, firebase: { apiKey: "[...]", authDomain: "[...]", databaseURL: "[...]", projectId: "[...]", storageBucket: "[...]", messagingSenderId: "[...]" } };
Пары "ключ-значение" вставляются в новое свойство с именем firebase. То же самое необходимо вставить в environment / environment.prod.ts:
export const environment = { production: true, firebase: { apiKey: "[...]", authDomain: "[...]", databaseURL: "[...]", projectId: "[...]", storageBucket: "[...]", messagingSenderId: "[...]" } };
Это необходимо для того, чтобы настройки Firebase были доступны независимо от того, создаем мы во время разработки или для производства.
Добавление библиотек
Затем давайте добавим библиотеки в наш проект, выполнив следующую команду:
$ npm install --save firebase@^4.4.0 angularfire2@^5.0.0-rc.2
Эта команда загружает и устанавливает оба пакета, firebase и angularfire2, в папки node_modules и добавляет зависимости в package.json файл.
Вставьте следующие операторы импорта в app.module.ts:
import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireAuthModule } from 'angularfire2/auth';
Также добавьте модули AngularFireModule, AngularFireDatabaseModule и AngularFireAuthModule в массив импорта декоратора @NgModule следующим образом способ:
@NgModule({ declarations: [ AppComponent, AppNavbarComponent ], imports: [ BrowserModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Обратите внимание, что для модуля AngularFireModule вызывается метод initilizeApp и в этот метод передается конфигурация Firebase (доступная через environment.firebase). Чтобы получить доступ к объекту среды, вам также необходимо добавить следующий оператор импорта:
import { environment } from './../environments/environment';
Добавление Bootstrap 4
Давайте снова добавим в наш проект библиотеку Bootstrap 4, используя NPM:
$ npm install --save bootstrap@next
Нам нужно добавить @next к имени пакета, потому что на момент написания этого сообщения Bootstrap 4 все еще находится в стадии бета-тестирования. Добавление @next гарантирует, что установлена версия 4 Bootstrap, а не версия 3.
Команда NPM устанавливает Bootstrap 4 в папку node_modules / bootstrap и в то же время обеспечивает добавление зависимости в файл package.json.
Чтобы сделать классы Bootstrap CSS доступными для компонентов в нашем проекте, нам необходимо включить файл CSS Bootstrap из node_modules / bootstrap / dist / css / bootstrap.css в наш проект. Для этого добавьте в файл styles.css следующую строку:
@import "~bootstrap/dist/css/bootstrap.css"
Начальный шаблон BootStrap
Чтобы добавить пользовательский интерфейс Bootstrap в наш пример приложения, мы воспользуемся стартовым шаблоном Bootstrap, который доступен по адресу https://getbootstrap.com/docs/4.0/examples/:
Для настройки базового пользователя интерфейс с элементами Bootstrap, мы собираемся использовать код из начального шаблона Bootstrap, который можно найти на странице примеров:
При нажатии на ссылку Стартовый шаблон открывается веб-сайт стартового шаблона в новом окне браузера. Чтобы получить доступ к коду разметки HTML начального шаблона, просто откройте в браузере просмотр исходного кода.
Из представления исходного кода мы можем скопировать и вставить необходимые части кода в наше приложение. Сначала скопируем следующий код из раздела ‹body› в код шаблона в app.component.html:
<div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div>
Кроме того, мы также хотели бы добавить панель навигации из начального шаблона. Мы делаем это, сначала добавляя новый компонент в наше приложение, снова используя Angular CLI:
$ ng g component app-navbar
Эта команда создает новую папку src / app / app-navbar /. В этой папке вы найдете следующие четыре файла:
- app-navbar.component.html
- app-navbar.component.ts
- app-navbar.component.css
Код шаблона компонента можно найти в файле app-navbar.component.html. Удалите код разметки по умолчанию из этого файла, скопируйте и вставьте следующий фрагмент кода из начального шаблона Bootstrap:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdown01"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
Затем давайте откроем app-navbar.component.t s и адаптируем строковое значение, присвоенное свойству selector директивы @Component. от app-app-navbar до app-navbar:
@Component({ selector: 'app-navbar', templateUrl: 'app-navbar.component.html', styles: [] })
Теперь добавьте элемент <app-navbar>
в код шаблона AppComponent:
<app-navbar></app-navbar> <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div>
Наконец, нужно добавить CSS-код в styles.css.
body { padding-top: 80px; } .starter-template { padding: 3rem 1.5rem; text-align: center; }
Результат работы приложения в браузере теперь должен соответствовать выходным данным начального шаблона Bootstrap:
Добавление ng-Bootstrap
Есть одно различие между результатом, который мы получаем от нашего приложения, и исходным начальным шаблоном Bootstrap. Если вы попытаетесь открыть элемент раскрывающегося меню на панели навигации, вы заметите, что раскрывающееся меню не отображается. Причина в том, что мы включили в наш проект только файл CSS Bootstrap. Часть JavaScript Bootstrap (которая полагается на JQuery и Popper.js) не была добавлена.
Поскольку библиотека JavaScript Bootstrap использует jQuery и напрямую управляет DOM. Для приложения Angular следует избегать любых прямых манипуляций с DOM, и полный контроль над обновлением элементов DOM должен быть отдан фреймворку Angular. Поэтому нам нужен другой способ включения элементов Bootstrap на основе JavaScript (например, выпадающего списка) в наше приложение Angular.
Решением этой проблемы является использование директив Bootstrap 4 Angular. Чтобы использовать эти директивы, вам необходимо добавить в свой проект пакет ng-bootstrap. Сайт проекта находится по адресу https://ng-bootstrap.github.io. Установка снова выполняется через NPM:
npm install --save @ng-bootstrap/ng-bootstrap
После завершения установки соответствующий модуль Angular NgbModule должен быть импортирован в app.module.ts:
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
NgbModule необходимо добавить в массив импорта, вызвав метод forRoot (), как вы можете видеть в следующем:
imports: [ BrowserModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule, NgbModule.forRoot() ],
Теперь мы можем использовать директивы Bootstrap в коде нашего шаблона. Для реализации раскрывающегося меню нам необходимо использовать следующие три директивы: ngbDropdown, ngbDropdownToogle и ngbDropdownMenu:
<li class="nav-item dropdown" ngbDropdown> <a class="nav-link dropdown-toggle" id="dropdown01" ngbDropdownToggle>Category</a> <div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu> <a class="dropdown-item" href="#">Angular</a> <a class="dropdown-item" href="#">React</a> <a class="dropdown-item" href="#">Vue.js</a> </div> </li>
После нажатия на меню Категория результат должен выглядеть следующим образом:
Получение данных из Firebase
Наконец, давайте извлечем и отобразим несколько примеров данных из базы данных Firebase Realtime. Поэтому мы предполагаем, что следующая структура данных JSON уже создана в базе данных реального времени:
{ "courses" : { "angular-complete-guide" : { "description" : "Master Angular (Angular 2+, incl. Angular 5) and build awesome, reactive web apps with the successor of Angular.js", "title" : "Angular - The Complete Guide", "url" : "https://codingthesmartway.com/courses/angular2-complete-guide/" }, "learn-ionic3-from-scratch" : { "description" : "Create Cross Platform Mobile Applications with Ionic 3, Angular 4, TypeScript and Firebase.", "title" : "Learn Ionic 3 From Scratch", "url" : "https://codingthesmartway.com/courses/ionic3/" }, "modern-react-with-redux" : { "description" : "Master the fundamentals of React and Redux with this tutorial as you develop apps with React Router, Webpack, and ES6", "title" : "Modern React With Redux", "url" : "https://codingthesmartway.com/courses/modern-react-with-redux/" }, "vuejs2-complete-guide" : { "description" : "Vue JS is an awesome JavaScript Framework for building Frontend Applications! VueJS mixes the Best of Angular + React!", "title" : "Vue.js 2 - The Complete Guide", "url" : "https://codingthesmartway.com/courses/vuejs2-complete-guide" } }
Соответствующее представление данных в консоли Firebase должно выглядеть следующим образом:
Чтобы получить и отобразить эти данные в нашем приложении, мы добавляем новый компонент Angular:
$ ng g component courses-list
Это создает новую папку course-list в src / app, и вы найдете файлы компонентов в этой папке.
Сначала нам нужно адаптировать реализацию класса CoursesListComponent в файле course-list.component.ts:
import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase } from 'angularfire2/database'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'courses-list', templateUrl: 'courses-list.component.html', styles: [] }) export class CoursesListComponent implements OnInit { coursesObservable: Observable<any[]>; constructor(private db: AngularFireDatabase) { } ngOnInit() { this.coursesObservable = this.getCourses('/courses'); } getCourses(listPath): Observable<any[]> { return this.db.list(listPath).valueChanges(); } }
Здесь мы внедряем сервис AngularFireDatabase в конструктор класса. Класс содержит метод getCourses, который принимает в качестве параметра путь к базе данных. Наблюдаемое для списка курсов в базе данных получается путем вызова метода списка объекта AngularFireDatase, передачи пути к базе данных и вызова метода valueChanges.
Метод getCourses используется в ngOnInit для получения наблюдаемого для пути / course. Наблюдаемый объект хранится в свойстве класса courseObservable.
Элемент courseObservable используется для доступа к данным в коде шаблона в файле course-list.component.html:
<ul> <div *ngFor="let course of coursesObservable | async"> <ngb-alert type="info" [dismissible]="false"> <h3><a href="#">{{course.title}}</a> </h3> <p>{{course.description}}</p> <div> <a href="{{course.url}}" target="_blank" class="btn btn-danger">Go To Course</a> </div> </ngb-alert> </div> </ul>
Чтобы получить доступ к курсамObservable в коде шаблона, нам нужно применить канал async.
Наконец, вам нужно включить элемент <courses-list>
в код шаблона в app.component.ts:
<app-navbar></app-navbar> <div class="container"> <div class="starter-template"> <h1>Angular, Bootstrap & Firebase Starter Application</h1> <p class="lead">This application is built with Angular 4, Bootstrap 4 and Firebase.</p> <h3>Courses List</h3> <courses-list></courses-list> </div> </div>
Теперь результат в браузере должен выглядеть следующим образом:
Заключение и перспективы
В этой первой части мы начали создавать наши приложения Angular 5, Bootstrap 4 и Firebase с нуля. Вы узнали, как настроить проект, установить необходимые библиотеки и связать все вместе. Полученный образец приложения можно использовать в качестве каркаса приложения для реализации ваших собственных функций.
В следующих частях этой серии мы будем шаг за шагом улучшать приложение. В следующей части мы сосредоточимся на добавлении маршрутов в наше приложение.
Это сообщение было впервые опубликовано на CodingTheSmartWay.com.
Хотите глубже погрузиться в Angular. Ознакомьтесь со следующими онлайн-курсами:
Онлайн-курс №1: Angular - Полное руководство
Онлайн-курс №2: Угловые - от теории к практике
Онлайн-курс №3: Angular - концепции, код и коллективная мудрость
Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!