1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Тема: Інтеграція Bootsrap в Angular app

Я був наверстав сторінку на html та bootstrap'і, тепер я хочу інтегрувати це все в Angular додаток.

Наразі в мене є 4 компоненти

  • Header

  • Sidebar

  • Content

  • Footer

Я просто порозпихував частини html по компонентам, і в результаті лейаут поламався.

Біда в тому, що кожен з Angular компонентів додає свій тег в html готового додатку, тому зараз воно виглядає як

<div class="content-fluid">
    <div class="row">
        <app-sidebar>
            <div class="sidebar купа bootstrap класів"></div>
        </app-sidebar>
        <app-content>
            <div class="content купа bootstrap класів"></div>
        </app-content>
    </div>
</div>

ну і як ви вже зрозуміли, ось ці app-щонебудь зводять Bootstrap з розуму, через що він не робе, як треба.

Як мені то все похвіксити? 
Просто кидати відповідні Bootstrap класи на app-щонебудь теги, і видаляти ті div'и, що мали ці класи раніше, чи це все мона зробити якось вумніше?

2 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Інтеграція Bootsrap в Angular app

По-перше, в Angular хедер прописується один раз в index.html і не чіпається. На скільки я знаю, Angular покищо не має вбудованої можливості динамічно змінювати хедер.

Стосовно інших частин, то ви їх можете додавати не як компоненти, а як частини батьківського шаблона, куди підвантажувати дочірні компоненти через router-outlet, наприклад так:

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>
<footer class="footer"></footer>

3 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

та воно все одно буде створювати свої теги, я так думою... + router-outlet використовується, коли тре підвантажувати різні сторіночки ж, а для статичного контенту юзати їх якось не дуже файно

4 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Інтеграція Bootsrap в Angular app

Так будуть додаткові теги, але я не бачу як це може вплинути на роботу bootstrap. Можете сказати як саме "сходить з розуму" bootstrap від цього?

5 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Інтеграція Bootsrap в Angular app

FakiNyan написав:

.... + router-outlet використовується, коли тре підвантажувати різні сторіночки ж, а для статичного контенту юзати їх якось не дуже файно

Якщо у вас є статичні сторінки, то для чого вам динамічно вставляти у них компоненти? В такому разі вони вже стають динамічними...

Подякували: FakiNyan1

6 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

ktretyak написав:

Так будуть додаткові теги, але я не бачу як це може вплинути на роботу bootstrap. Можете сказати як саме "сходить з розуму" bootstrap від цього?

от в мене є row, а в ньому 2 column, перший на aside, другий на контент, і в ангулярі другий колумн поводиться так, наче він не бачить aside

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

ktretyak написав:
FakiNyan написав:

.... + router-outlet використовується, коли тре підвантажувати різні сторіночки ж, а для статичного контенту юзати їх якось не дуже файно

Якщо у вас є статичні сторінки, то для чого вам динамічно вставляти у них компоненти? В такому разі вони вже стають динамічними...

хммм, це робить сенс.
Загалом я розбиваю компоненти на логічні блоки. Наприклад - sidebar  і content виконують різну роль, то я й компоненти для них створюю

8 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Інтеграція Bootsrap в Angular app

app-content , app-content , router-outlet ...
Ви хочете сказати, що це валідні html теги ?

leofun01 вебсайт

9 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Інтеграція Bootsrap в Angular app

Це не стандартні html-теги, але це лише означає, що браузери не знатимуть що з ними робити. Їм цього не обов'язково знати, бо JavaScript сам розбиреться як їх інтерпретувати та трнсформувати до стандартних html-тегів та їхніх атрибутів.

Подякували: leofun011

10 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Інтеграція Bootsrap в Angular app

1) Браузер не зобов'язаний обробляти (і як наслідок - відображати) не валідні html документи.
2) Навіть якщо браузер буде їх відображати, він може не створити в DOM-дереві елементи, які б відповідав цим тегам.
По моєму з таких речей і починається гівнокодінг гівноверстка.

leofun01 вебсайт

11 Відповідь від ktretyak

  • ktretyak
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 30.01.2014
  • Повідомлень: 2 080
    • Репутація: 758

Re: Інтеграція Bootsrap в Angular app

Ще раз. Генеруючи такі нестандартні теги, ангулар не розраховує на браузер взагалі. Ці теги потрібні виключно для самого ангулара. В кінцевому підсумку браузер отримає валідні теги і буде зобов'язаний їх відображати як належить. Якщо ви думаєте, що у вас більше компетенції, ніж у інженерів гугла, то ви дуже наївні.

Подякували: iovchynnikov, FakiNyan2

12 Відповідь від iovchynnikov Востаннє редагувалося iovchynnikov (29.10.2017 21:22:28)

  • Звідки: Спочивальня Бандери
  • Дата реєстрації: 24.01.2016
  • Повідомлень: 496
    • Репутація: 589

Re: Інтеграція Bootsrap в Angular app

leofun01 написав:

Навіть якщо браузер буде їх відображати, він може не створити в DOM-дереві елементи, які б відповідав цим тегам.

Ват? Де ви таке вичитали? Усі елементи що є на сторінці мають бути в дом.
Такі теги в анґулярі - норма, називається директиви (або їх надбудова - компоненти). Почитайте.

По темі. Є можливість вказати компілятору повністю замінювати компоненти собою. Це депрікейтед костиль: https://docs.angularjs.org/api/ng/servi … eprecated-
Але:
1. Чому не можна row перенести в сам апп-контент?
2. Мені пригадується що в бутстрапі немає такої жорсткої прив'язки класів (.row > .something). Має працювати, пошукайте інші причини.

Подякували: leofun01, FakiNyan2

13 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

iovchynnikov написав:
leofun01 написав:

Навіть якщо браузер буде їх відображати, він може не створити в DOM-дереві елементи, які б відповідав цим тегам.

Ват? Де ви таке вичитали? Усі елементи що є на сторінці мають бути в дом.
Такі теги в анґулярі - норма, називається директиви (або їх надбудова - компоненти). Почитайте.

По темі. Є можливість вказати компілятору повністю замінювати компоненти собою. Це депрікейтед костиль: https://docs.angularjs.org/api/ng/servi … eprecated-
Але:
1. Чому не можна row перенести в сам апп-контент?
2. Мені пригадується що в бутстрапі немає такої жорсткої прив'язки класів (.row > .something). Має працювати, пошукайте інші причини.

1. так я там просто переніс щось в апп компонент
2. Коли я переніс контент з ангулярівського тегу, і поклав його біля нього, то все запрацювало. В чому ж ще може бути проблема тоді?

14 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Інтеграція Bootsrap в Angular app

iovchynnikov написав:

Де ви таке вичитали?

Намагався знайти, де я таке вичитав, і не знайшов.

iovchynnikov написав:

Усі елементи що є на сторінці мають бути в дом.

Це стосується XML, але HTML не є повністю сумісним з XML, тому - не факт.

В стандартах/специфікаціях всюди детально написано, як браузер має працювати з валідним документом. А як бути з не валідним, майже нічого. Виглядає так, що може бути невизначена поведінка.

iovchynnikov написав:

Такі теги в анґулярі - норма ...

За умови, що JS код виконається на сторінці.

leofun01 вебсайт

15 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

leofun01 написав:
iovchynnikov написав:

Де ви таке вичитали?

Намагався знайти, де я таке вичитав, і не знайшов.

iovchynnikov написав:

Усі елементи що є на сторінці мають бути в дом.

Це стосується XML, але HTML не є повністю сумісним з XML, тому - не факт.

В стандартах/специфікаціях всюди детально написано, як браузер має працювати з валідним документом. А як бути з не валідним, майже нічого. Виглядає так, що може бути невизначена поведінка.

iovchynnikov написав:

Такі теги в анґулярі - норма ...

За умови, що JS код виконається на сторінці.

та то тільки в стародавніх бравзерах тре js для невідомих елементів, і quirk mode вмикається, якщо нема нормального доктайпу, а так в html5 багато пом'якшень... коротше кажучи, все ок

16 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 116
    • Репутація: 5674

Re: Інтеграція Bootsrap в Angular app

https://w3c.github.io/webcomponents/spec/custom/ так і живемо..

Подякували: leofun011