Заметки по Angular 6

Установка и запуск проекта

1. Для работы с Angular 6 необходимо установить NodeJs и NPM.

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

npm install -g @angular/cli

3. Создание и запуск проекта с помощью Angular CLI

ng new NameProject // создание проекта
cd NameProject
ng serve --open // запуск, урл будет http://localhost:4040/

Компоненты

Главный компонент

По умолчанию наш проект содержит главный компонент и называется он app

Основные файлы компонента:

src/app/app.component.ts - Логика и декораторы.
src/app/app.component.html - Шаблон компонента.
src/app/app.component.css - Стили компонента.

В файле app.component.ts содержиться основная логика компонента и декораторы. В главном компоненте по умолчанию следующее:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'HelloWorld';
}

Декоратор

В нем содержиться декоратор @Component. Он содержит в себе селктор, шаблон и стили проекта. Рассмотрим подробнее

1. selector - Это селектор, в который будет подгружаться компонент. В данном случае этот селектор для главного компонента вызывается в файле src/index.html таким образом:

<app-root></app-root>

Можно указывать и альтернативно, вот так:

@Component({
  selector: '.app-root',
  // или так
  selector: '[app-root]',

Соответственно в шаблоне src/index.html вызвать следующим образом

<div class="app-root"></div>
<!-- Или так -->
<div app-root></div>

2. Шаблоны и стили, можно указывать как ссылками на конкретный файл, так и прописывать в самом ts файле.

@Component({
  selector: 'app-test', // <app-test></app-test>
  //selector: '.app-test', // <div class="app-test"></div>
  //selector: '[app-test]', // <div app-test></div>
  
  //templateUrl: './test.component.html',
  //template: '<div>Инлайн текст</div>',
    template: `
     <div>
        Многострочный текст
     </div>
    `,
    
  //styleUrls: ['./test.component.css']
    styles: [`
        div{
            color: red;
        }
    `]
})

3. Создание нового компонента через Angular CLI