Создание проекта 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 - концепции, код и коллективная мудрость

Отказ от ответственности: это сообщение содержит партнерские ссылки. Это означает, что если вы нажмете на одну из ссылок на продукт, я получу небольшую комиссию. Это поможет поддержать этот блог!