Частицы в Angular, но не в директивах ng-include /

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

Предположим, что это шаблон:

<directive1 data="object"></directive1>

Вот html директивы 1

<div class="a">{{data.x}}</div>
<div class="b">{{data.y}}</div>
<div class="c">{{ data.z}}</div>

Теперь позвольте сказать, что в другом месте я хочу иметь только две вышеуказанные строки шаблона. Поскольку css полностью отличается от этого, я решил создать другую директиву вместо того, чтобы вводить логику коммутации в директиве.

<directive2 data="similarObject"></directive2>

Итак, теперь проблема заключается в том, что я хочу иметь это в моей директиве 2 html:

<div class="a">{{data.x}}</div>
<div class="b">{{data.y}}</div>

Но так как это будет повторяться, я смущен, как это сделать. Я не хочу использовать ng-include поскольку он загружает шаблон асинхронно с клиентской стороны. Я просто хочу, чтобы мой код был модульным, поэтому HTML не дублируется. Я не возражаю, если HTML дублируется после сборки с моей системой глотков.

Нет ли каких-либо включений, которые включены во время компиляции? Поскольку я использую gulp как мою систему сборки, я надеюсь, что что-то подобное существует, так что я могу сделать что-то вроде require('./something') как я делаю это в своем Javascript.