Angular Components

Одними з ключових елементів аплікації є компоненти. Компонент управляє представленням (view) на екрані.

Розглянемо головний компонент аплікації app.component, який складається з чотирьох елементів.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor() {
  }
}

<div>
  <h1 class="title">test text</h1>
</div>

h1 {
  color: red;
}

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
});

Щоб створити новий компонент з допомогою Angular CLI потрібно в командному рядку запустити наступну команду

cmd

ng generate component new-component-name

Слова generate і component можна скорочувати і писати лише літеру g та c

cmd

ng g c new-component-name

Використання компонента

app.component.html

<app-new-component-name></app-new-component-name>

Також з допомогою команд Angular CLI можна створювати й інші елементи аплікації, такі як модулі, сервіси, директиви, пайпи й т.д. Принцип залишається такий самий як при створенні компонента, тільки замість слова components, підставляємо потрібне нам слово (module, service ...).

Завдання.

Скачуємо Bootstrap.

cmd

npm install bootstrap --save

Підключаємо Bootstrap CSS.

angular.json

"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],

Якщо ми використовуємо препроцесор Scss то можна підключити в файлі styles.scss.

styles.scss

/* Bootstrap */
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Підключаємо icons та font.

<head>
    <!-- font Open Sans -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700&display=swap"
          rel="stylesheet">
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
</head>

body {
    font-family: 'Open Sans', sans-serif;
}

Створюємо header компонент.

cmd

ng g c components/header

app.component.html

<app-header></app-header>

PreviousAngular Modules NextПрив'язка Даних

Last updated 2 years ago

Was this helpful?