Angular Material Starter с поддержкой Ng-Bootstrap

Angular - один из самых популярных интерфейсных JS-фреймворков, доступных в настоящее время. Он предоставляет такие функции, как:

РАЗРАБОТКА НА ВСЕХ ПЛАТФОРМАХ
СКОРОСТЬ И ПРОИЗВОДИТЕЛЬНОСТЬ
НЕВЕРОЯТНЫЙ ИНСТРУМЕНТ для большинства задач браузера

С Angular Material возможности Angular еще больше расширены, чтобы поддерживать стандарты материалов. Он обеспечивает внутреннюю поддержку закусочной, нижнего листа, многоступенчатых форм, перетаскивания и т. Д.

Без сомнения, этого достаточно для большинства небольших и умеренных реализаций, но иногда нам нужны некоторые дополнительные функции, которые поддерживаются начальной загрузкой. Отсюда на сцену выходит Ng-Bootstrap. Он предоставляет оболочку для всех функций начальной загрузки и даже некоторых более чисто в angular без необходимости включать JQuery.

Начало работы с новым проектом Angular:

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

Команда углового старта

ng new starter --interactive

Замените «starter» названием своего приложения.

В следующих вопросах выберите, хотите ли вы включить маршрутизацию.

Выберите тип CSS, который вы хотите использовать

После выбора дождитесь загрузки и установки начального шаблона angular и модулей npm.

Это даст вам отправную точку для вашего приложения.

Установка углового материала

Перейдите в каталог своего проекта и выполните следующую команду, чтобы добавить Angular Material в ваше приложение.

ng add @angular/material

Чтобы материал angular работал, вы можете либо включить предопределенную тему в свой файл style.scss, либо создать собственную тему. Я предпочитаю более позднюю версию, поскольку она предоставляет нам более детальный контроль над нашим приложением, но если вы любите простоту, вы также можете выбрать предопределенную тему (хотя я все равно расскажу о создании и использовании предопределенной темы в этот блог).

Создание пользовательской темы материала:

Во-первых, добавьте файл с именем variables.scss в папку themes в папке src, чтобы хранить переменные темы SCSS для всего приложения. В этот файл добавьте следующее:

// File: '/src/themes/variables.scss'
//for allowing the material select and other popups to come over bootstrap and other modals
$root-z-index-of-modal: 1030;
$cdk-z-index-overlay-container: $root-z-index-of-modal+1;
$cdk-z-index-overlay: $root-z-index-of-modal+1;
$cdk-z-index-overlay-backdrop: $root-z-index-of-modal+1;

Затем добавьте Custom Material Style Theme в файл с именем custom_material_theme.scss и сохраните его в папке themes в вашем src папка

// File: '/src/themes/custom_material_theme.scss'
@import '~@angular/material/theming';
@import './variables.scss';
@include mat-core();
$candy-app-primary: mat-palette(<!--theme color name eg. $mat-light-green--!>, 700, A100, A700);
$candy-app-accent:  mat-palette(<!--theme color name eg. $mat-teal--!>, A200, A100, A400);
$candy-app-warn:    mat-palette(<!--theme color name eg. $mat-red--!>);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
//Add custom material theme scss here

Заменить все цветам темы . Вы также можете добавить дополнительные стили SCSS для изменения внешнего вида компонентов материала по умолчанию в этом файле.

Наконец, добавьте custom_material_theme.scss в свой angular.json в разделе стили.

//File: '/angular.json'
{ 
  .....
  "projects": { 
      .....     
      "architect": {
        "build": {  
            .....
            "styles": [
              "src/styles.scss",
              "src/themes/custom_material_theme.scss",
            ],
            .....
         }
         .....
      }
      .....
   }
   .....
}

Установка Bootstrap

Перейдите в каталог своего проекта и выполните следующую команду, чтобы установить bootstrap.

npm install bootstrap

Чтобы обновить цвет темы начальной загрузки до цвета вашего бренда, добавьте следующее в свой variables.scss.

// File: '/src/themes/variables.scss'
.....
//color name for brands primary color
$primary: #609d43;
//font family to be used for your website
$font-family-sans-serif: 'Montserrat', sans-serif;
.....

Во-вторых, добавьте тему стиля Bootstrap Custom в файл с именем custom_bootstrap.scss и сохраните его в папке themes в папке src.

//File: '/src/themes/custom_bootstrap.scss'
@import './variables.scss';
@import "~bootstrap/scss/bootstrap.scss";
//Add custom bootstrap styling scss here

Вы также можете добавить дополнительные стили SCSS для изменения внешнего вида компонентов начальной загрузки в этом файле по умолчанию.

Наконец, добавьте custom_bootstrap.scss в свой angular.json в разделе стили.

//File: '/angular.json'
{ 
  .....
  "projects": { 
      .....     
      "architect": {
        "build": {  
            .....
            "styles": [
              "src/styles.scss",
              "src/themes/custom_material_theme.scss",
              "src/themes/custom_bootstrap.scss",
            ],
            .....
         }
         .....
      }
      .....
   }
   .....
}

Установка Ng-Bootstrap

Перейдите в каталог своего проекта и выполните следующую команду, чтобы установить ng-bootstrap в свой проект.

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

Это установит ng-bootstrap в ваш проект, но для его использования вам придется импортировать его в свой проект. Для этого вы можете либо импортировать его непосредственно в свой app.module.ts, либо импортировать его в основной модуль для импорта всех таких модулей. Я лично предпочитаю использовать основной модуль, так как он сохраняет ваш app.module.ts относительно чистым. Но если вы предпочитаете решение типа одно место для всего, вы можете импортировать его прямо туда.

Базовый модуль для импорта модулей:

Добавьте файл с именем core.module.ts в папку с именем core в папке приложения и следующие файлы к нему

// File: '/src/app/core/core.module.ts'
import { NgModule, ModuleWithProviders } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { environment } from '../../environments/environment';
@NgModule({
  imports: [
    NgbModule.forRoot(),
    // module that are a core part of your app such as appollo-angular, angularfire modules, etc  
  ],
  providers: [],
  exports:[
    NgbModule
  ]
})
export class CoreModule {
  static forRoot(): ModuleWithProviders{
    return{
      ngModule:CoreModule,
    };
  }
  static forChild(): ModuleWithProviders{
    return{
      ngModule:CoreModule,
      providers:[
      ]
    };
  }
}

Это создаст центральное место, откуда вы можете импортировать все ваши зависимые модули, такие как ng-bootstrap, apollo-angular, angular fire модули и т. Д.

(Необязательно) Модуль основных функций:

Иногда нам требуется модуль для импорта функций или создания компонентов, каналов, директив и т. Д., Которые должны использоваться двумя или разными модулями. Для этих целей в игру вступает модуль core-features. Это позволяет вам определять модули, компоненты, каналы, директивы и т. Д., Которые должны совместно использоваться в разных модулях. Определяя их в этом файле и экспортируя, вы разрешаете доступ ко всем тем функциям в модулях, которые импортируют этот модуль. Это особенно помогает в случае материала angular, поскольку вы можете импортировать его различные модули в этот файл и получить доступ к его функциям во всех файлах, которые импортируют этот модуль, без необходимости импортировать их снова.

Для этого создайте файл с именем core-features.module.ts и поместите его в папку с именем core-features в папке app, а затем добавьте к нему следующее:

//File: '/src/app/core-features/core-features.module.ts'
import { NgModule, ModuleWithProviders, Provider } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
// import features modules in this module that you require to style your app or to increase its functionality
// you can also add directives and pipes that your require throughout your app in this module and export them from here
//this is the default file for including the material modules such as MatSnackBarModule, MatDialogModule
@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  declarations: [ ],
  exports:[
    ReactiveFormsModule,
    FormsModule,
  ],
  entryComponents:[ ]
})
export class CoreFeaturesModule {
  static forRoot(): ModuleWithProviders{
    return{
      ngModule:CoreFeaturesModule,
      providers: [ ]
    };
  }
  static forChild(): ModuleWithProviders{
    return{
      ngModule:CoreFeaturesModule,
      providers:[ ]
    };
  }
}

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

Наконец, укажите эти файлы в своем app.module.ts.

// File: '/src/app/app.module.ts'
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CoreModule } from './core/core.module';
import { CoreFeaturesModule } from "./core-features/core-features.module";
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule.forRoot(),
    CoreFeaturesModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Запустить сервер

Чтобы запустить dev-сервер приложения, войдите в корень вашего проекта и выполните следующую команду:

ng serve

а затем откройте браузер по адресу http: // localhost: 4200 /

Ссылку на источник можно найти здесь.