Установка Angular 7 Установка Angular 7 angular установка ангуляр

Установка Angular 7

Open in new window

Установка командного менеджера

npm install -g @angular/cli

Установка nodejs.

sudo npm install npm@latest -g
sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Создание рабочей директории.

mkdir work
cd work

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

ng new angular-bootstrap-example

installation angular project

Запуск сервера разработки.

cd angular-bootstrap-example
ng serve

installation angular project

Переходим в браузер по адресу http://localhost:4200

installation angular project

Команды Angular.

 ng serve - сервер
 ng build - сборка
 ng test - юнит тесты
 ng lint - проверка орфографии кода
 ng e2e - модульные тесты

e2e тестирование

ng 2e2

Проблема драйвера

installation angular project

Необходимо установить драйвер хрома нужной версии.

Проверить текущую версию можно командой.

chromedriver version

Посмотреть место положение бинарного файла можно так:

whereis chromedriver

Установка драйвера.

Качаем архив от сюда

mkdir tmp
cd tmp
wget https://chromedriver.storage.googleapis.com/74.0.3729.6/chromedriver_linux64.zip

Распаковываем.

unzip chromedriver_linux64.zip

Копируем в системную директорию.

sudo cp chromedriver /usr/bin/chromedriver

Удаляем tmp.

cd ..
rm -r tmp

Использование ng-bootstrap.

Ссылка да документацию

Пакет содержит ангуляровские директивы и исключает использование jquery.

npm install --save @ng-bootstrap/ng-bootstrap

Установим сам bootstrap.

npm install bootstrap@4.0.0-alpha.6 tether --save

Добавим файл css bootstrap в конфигурацию командного менеджера angular-cli.json

    "styles": [
      "src/styles.sass",
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/tether/dist/js/tether.min.js",
      "node_modules/bootstrap/dist/js/bootstrap.min.js"

    ]

В файле настроек главного модуля scr/app/app.module.ts добавим импорт библиотеки.

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

....

  imports: [
    BrowserModule,
    NgbModule.forRoot()
],

Если вы хотите использовать boostrap директивы в других (дочерних) модулях, убираем ф-цию forRoot().

Теперь вы можете использовать Bottstrap компоненты такие как:

  • Accordion
  • Alert
  • Buttons
  • Carousel
  • Collapse

и т.д.

Создадим тестовый шаблон.

<div class="navbar navbar-dark bg-dark box-shadow">
    <div class="container d-flex justify-content-between">
      <a href="#" class="navbar-brand d-flex align-items-center">
        <strong>Test project</strong>
      </a>

    </div>
</div>


<div class="container">
  <ngb-tabset>
    <ngb-tab title="Simple">
      <ng-template ngbTabContent>
        <p class="p-3">
          <ngb-alert [dismissible]="false">
            <strong>Warning!</strong> Better check yourself, you're not looking too good.
          </ngb-alert>
        </p>
      </ng-template>
    </ngb-tab>
    <ngb-tab>
      <ng-template ngbTabTitle><b>Fancy</b> title</ng-template>
      <ng-template ngbTabContent><p>2</p>
      </ng-template>
    </ngb-tab>
    <ngb-tab title="Disabled" [disabled]="true">
      <ng-template ngbTabContent>
        <p>3</p>
      </ng-template>
    </ngb-tab>
  </ngb-tabset>


  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="Simple">
      <ng-template ngbPanelContent>
        Anim pariaturS.
      </ng-template>
    </ngb-panel>
    <ngb-panel>
      <ng-template ngbPanelTitle>
        <span>&#9733; <b>Fancy</b> title &#9733;</span>
      </ng-template>
      <ng-template ngbPanelContent>
        farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
        labore sustainable VHS.
      </ng-template>
    </ngb-panel>
    <ngb-panel title="Disabled" [disabled]="true">
      <ng-template ngbPanelContent>
        squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
        craft beer labore wes
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
</div>

chromedriver version

Other topics