Создание проекта Angular. Создание проекта Angular. angular start project bootstrap

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

Open in new window

Установка и обновление nodejs и npm.

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

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

sudo npm install -g @angular/cli
ng new ng-prj

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

cd ng-prj
ng serve

http://localhost:

Если наблюдается ошибка Invalid Host header то запускать с параметром –disable-host-check

ng serve  --disable-host-check

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

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

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

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

Получили

+ @ng-bootstrap/ng-bootstrap@4.1.1
added 1 package from 1 contributor and audited 42613 packages in 13.343s
found 1 high severity vulnerability

Попробуем устрани уязвимость.

up to date in 9.437s
fixed 0 of 1 vulnerability in 42613 scanned packages
  1 vulnerability required manual review and could not be updated

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

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

Результат.

+ tether@1.4.6
+ bootstrap@4.0.0-alpha.6

Добавим файл 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"

    ]

Было

bootstrap start

Стало

bootstrap start

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

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

....

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

Переделаем главный шаблон src/app/app.module.ts заменим все содержимое на.

<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>Loyer service</strong>
      </a>

    </div>
</div>

Поменяем версию bootstrap

npm install bootstrap@4.0.0 tether --save

Установка jQuery (под bootstrap 4.0.0)

npm install jquery --save

Навигационное меню

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Other topics