Структура приложения Angular

[IgorKulishov]

Приложение Angular 1) файлы Angular деляться условно на два типа:

• компоненты (components) - отвечают за отображение информации на странице и нажатия кнопок и ввод информации на странице. Каждая "компонента" содержит в себе html, css, typescript составляющие.
• сервисы (services) - принимают и передают информацию удаленным серверам посредством REST API http обращений.

2) Компоненты и сервисы написаны на typescript и представляют из себя классы Внимание: хотя на самом деле компонента может содержать в себе typescript, html и css файлы, само определение класса , которое говорит что этот класс является компонентой находиться в typescript файле. 3) В typescript введены в пользование decorators (декораторы это специальные функции), причем в Angular есть встроенные декораторы, которые помогают определить класс как компоненту или сервис. Декоратор это встроенная функция Angular, перед которой стоит знак @. В Angular есть несколько декораторов, основные из них помогают определить класс как сервис или компоненту (так же еще и модуль, то что мы будем проходить позже).

• Если класс определен как компонента, то перед классом ставится декоратор @Component()
• Соответственно перед классом сервисом ставится декоратор @Injectable() 4) Так же как правило название файла по соглашению названий говорят уже о том содержит ли файл компоненту или сервис:
• Компонента имеет название типа home-page.component.ts
• Сервис имеет название типа login.service.ts

Предлагаю открыть в редакторе проект Angular и раскрыть содержимое папки /src/app там ты сможешь увидеть главную компоненту app.component.ts, если ты его откроешь, то увидешь декоратор и название определенного умолчанию класса AppComponent:

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

Далее мы разберем components подробнее.

[g1er]

Почитал твое описание. В принципе понятно, но я пошел дальше и начал Блок 2. Синтаксис. Там как раз первый урок был про компоненты и их создание. Пришлось 3 раза пересмотреть видеоурок, прежде чем я более-менее разобрал что там к чему. Заодно повторил на практике пример создания нового компонента. Сначала руками создавал папки и файлы, потом из консоли, через CLI. Ну вроде справился, браузер отобразил все =) Теперь о вопросах. 1) В видео показывают, что итоговый "штрих" в подключении нового компонента это регистрация в app.modules.ts: импорт и прописывание в declarations. После этого в видео все перекомпилировалось и заработало. Но не у меня. Мне пришлось прописать новый компонент в строке bootstrap. В самом начале видео нарратор говорит, что в этой строке запускается компонент, но сам не вносит туда изменений. При этом у него все заработало. Мне же пришлось прописывать самому. Кроме того, когда компонент создается через CLI, все импорты-экспорты, пути и declarations прописываются автоматически везде, кроме 2х мест: в самом главном index.html, куда надо самому вписать тэг нового компонента, и в строке bootstrap. Я не особо вникал в эту нестыковку, т.к. с проблемой я разобрался и знаю, в чем загвоздка была. Но в целом это наверно из-за разницы в версиях, да? 2) Ну и традиционный вопрос, из разряда мои "зачем" =) для чего, для каких целей создают новые компоненты? Для чего они в целом нужны я понял. А вот для чего создавать новые и как часто это обычно происходит?

[IgorKulishov]

Хорошо что начал разбираться.

1. Да, на самом деле не всегда cli добавляет новую компоненту в модуль (по умолчанию главный модуль называется app.module.ts, но название может быть и другим). А) Как ты уже понял тебе на самом деле надо вручную импортировать компоненту в файл модуля (app.module.js по умолчанию) прописывать в declarations внутри @NgModule({}) декоратора:

   import { HereisMyComponent } from './path/to/my/component/here-is-my-component.compinent.ts';
   @NgModule({
   declarations: [
   AppComponent,
   HereisMyComponent
   ],
   imports: [
   BrowserModule,
   FormsModule,
   HttpModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }

   Б. однако внутри свойства bootstrap находится только основной модуль, который и "обвязывается" (от слова bootstrap дословно шнурки "шнуровать" приложение).

2. приложение состоит из множества компонент.

   • Компоненты обязательно должны иметь "view" т.е. имеют обязательно template/templateUrl где определяется html часть которая выводиться на экран
   • Основная компонента как правило имеет название AppComponent, которая находится в корне проекта и как правило находится внутри файла app.component.ts
   • основная компонента AppComponent включает в себя все остальные компоненты и обязательно указывается внутри в свойстве bootstrap, декоратора NgModule({}) модуля приложения
   • компоненты определяются в поле selector внутри декоратора @Component()
   • для того что бы применить компоненту необходимо просто указать название компоненты (определенной в поле selector) ввиде html элемента (тэга)
   • компоненты как правило имеет специальные функциональные принадлежности, могут входить друг в друга и взаимодействовать между собой и в целом напоминают кубики или конструктор "лего"
   • компоненты могут быть умными (smart components - которые взаимодействуют с сервисами и как правило могут включать в себя простые компоненты) и простыми (dummy components - которые как правило имеют ограниченый набор ф-ционала и как правило входят в состав smart components).

[g1er]

Но в итоге мне пришлось вписать в bootstrap новый компонент, чтобы все заработало. Это так и должно быть или у меня какой-то глюк? Я закомитил то что вчера сделал в develop-andrey, погляди, если нужно будет наглядно посмотреть. Просто как только убираю из строки bootsrap новый компонент, ничего не происходит. В дебагере в html-структуре просто отображает тэг, вложений нет

[g1er]

Кстати, в бонус-уроках к основному курсу по Ангуляру идет курс по Тайпскрипту. Знать бы раньше, можно было тебе не тратить кучу времени на объяснения и рассказы тех или иных тем, а просто смотреть уроки и обсуждать непонятные моменты =) Там еще есть много интересного. Например, уроки по ES6, NodeJs, RxJS

[IgorKulishov]

Молодец Бро, замечательный вопрос - я никогда так не пробовал 👍 Дело в том что ты замечательным образом "нарушил" общепринятые правила Angular но нашел выход который так же работает - супер. Итак по порядку сначала объясню как "обычно" принято и потом почему работает в твоем случае и в чем разница: 1) я создал свой бренч и так же создал merge request из своего бренча в твой бренч где я так же написал подробно что я там сделал https://github.com/g1er/Andrew/pull/31 Там все просто, дело в том что обычно принято иметь один главный компонент приложения (верний в ерархии) и все остальные компоненты вкладывать внутри темплейта главной компоненты. Т.о. если посмотришь на мой запрос ты увидешь что я перебросил

<app-my></app-my>
<app-my2></app-my2>

из index.html в app.component.html и оставляю только одну главную компоненту для обвязки в верхнем уровне

  bootstrap: [AppComponent]

2) теперь почему у тебя работает. Дело в том что ты сделал три компоненты в верхнем уровне соответственно их все три и надо обвязывать и указывать соответственно в bootstrap:

bootstrap: [AppComponent, MyComponent, My2Component]

Напиши если есть вопросы.

[g1er]

Да, я потом так и понял, насчет иерархии. В арр-компоненте прописываются все остальные. Я сейчас иду дальше, прохожу 4-5 уроки 2го блока. Буду стараться использовать свободные вечера, чтобы форсировать учебу. Если будут непонятны моменты, буду спрашивать

[IgorKulishov]

Хорошо, молодец! Желаю успеха! Задавай вопросы, будем создавать Pull requests и расписывать объяснения в отдельных уроках.

[g1er]

Сегодня смотрел урок на тему двусторонней связи "компонент-шаблон", где для работы нужен был FormsModule. Однако в app.module.ts в импортах его не оказалось. Пришлось самому разобраться, найти эту библиотеку и вручную прописать импорт. Это скорее не вопрос, а просто заметка о том, что некоторые вещи в ангуляре не настроены автоматически (хотя библиотека работы с формами, мне кажется, должна подключаться на автомате при создании проекта). Видать действительно разница в версиях влияет

[IgorKulishov]

Посмотри https://github.com/g1er/Andrew/issues/32 Я не все успел написать, но пока вкратце. Позже расспишу, если не понятно.