Я новичок (иш) во всех приложениях с полным стеком javascript и совершенно новичок в Angular, поэтому я надеялся, что кто-то сможет прямо здесь рассказать обо мне.
Зачем мне использовать структуру шаблонов, такую как Jade или Handlebars, при написании клиентских приложений с использованием AngularJS.
Должен сказать, что я никогда не использовал ни одну из этих шаблонов. Так что я не полностью знаком с преимуществами. Но когда я смотрю, например, на Handlebars, он делает многие из тех же вещей, что и я в Angular, например, зацикливание и т. Д.
Насколько я могу судить, было бы наиболее разумно создавать шаблоны в Angular с использованием правильного HTML, а затем делать все шаблоны на стороне клиента и комбинировать это с первым подходом API с использованием, например, node и mongo.
Причина этой путаницы в том, что многие примеры, которые я нахожу на GitHub, используют Jade, и мне это кажется нелогичным.
Пожалуйста, просвети меня и исправь. Я хотел бы узнать несколько лучших практик от людей, которые знают гораздо больше меня.
Спасибо
Я использую Jade для создания шаблонов, используемых AngularJS, потому что я ненавижу писать простой HTML. Это выглядит примерно так:
… Который, как мне кажется, намного чище, чем простой HTML.
источник
ng-inlude
, возможно, используемых вместе сng-src
?Честно говоря, я не понимаю, почему людей волнует разница между этим:
и это:
За исключением того, что я нахожу один более понятным для человека. Слегка . Я не понимаю, почему люди так увлечены этой темой. Это все велосипеды. Разница незначительна, и любой грамотный программист может легко перевести одно в другое через пять секунд в Google. Используйте то, что хотите, и позволяйте остальным ссориться ни из чего. Выберите свои сражения и участвуйте в дебатах о действительно важных вещах, например об атомных реакторах;)
источник
if
к уравнению 1 нефрит , все внезапно изменится. См. Выше о «премиум-пользователях».if
s в вашей нефритовой разметке, то вам все равно нужен какой-то механизм шаблонов, и вам придется преобразовать его в любойif
синтаксис, используемый этим движком. Я не очень понимаю вашу критику.Итак, TL; DR, на сервере, вы можете использовать любой язык [jade, haml, ...] для генерации только структуры html для вашего приложения, это не имеет ничего общего с angularJS, поскольку он будет отображать и работать с HTML в время выполнения на веб-интерфейсе.
Вам не обязательно использовать Jade на сервере, и я предлагаю не использовать, так как это запутает новых разработчиков. В проектах, которые вы видите, они используют Jade только потому, что он чище и они к нему привыкли, а если он используется с angularJS, его задача - создать простой HTML без какой-либо логики.
источник
Принятый ответ является несколько односторонним и не учитывает тот факт, что любая установка прекомпилятора для HTML имеет большое применение для ЛЮБОГО типа HTML-проекта: композиция и результирующая гибкость разметки.
Работаете в одиночку над угловым приложением? Дайте Джейд попробовать.
Jade улучшает вашу способность разбивать HTML на модули, сокращает время, которое вы тратите на отладку HTML, а также поощряет создание инвентаря разметки.
Во время разработки частей HTML может быть очень много итераций. Если вывод HTML основан на наборе файлов нефрита, команде легко действовать гибко при изменении требований. Кроме того, изменение разметки путем повторного составления jade includes значительно более надежно, чем повторная запись чистого HTML.
При этом я осознаю общее отвращение к смешиванию angular с нефритом на стадии производства или разработки. Внедрение еще одного необходимого набора знаний синтаксиса - плохая идея для большинства команд, и использование нефрита может скрыть неэффективное управление проектом, абстрагируя часть работы, которая была бы запрещена принципами DRY (например, ленивость при подготовке разметки)
источник
Я прочитал все ответы выше и был немного удивлен, что никто не упомянул один аспект, который делает использование jade вместо создания шаблонов AngularJS очень полезной вещью.
Как уже было сказано, в производстве разница в реалистичных сценариях между вводом необработанного html и jade на самом деле заметна, но более важная вещь, о которой мы никогда не должны забывать, это то, что иногда нам нужны динамически изменяемые и повторно инициализированные шаблоны angularjs.
Проще говоря, иногда нам нужно изменить html через innerHTML, а затем заставить AngularJS перекомпилировать содержимое. И это именно тот тип задач, когда создание таких представлений с помощью jade может иметь преимущества.
Кроме того, AngularJS хорошо работает с моделями, структура которых по определению хорошо известна. На самом деле бывает, что мы действительно не знаем точной структуры (представьте себе, например, рендерер JSON). AngularJS будет здесь довольно неуклюжим (даже если мы создаем приложение angular), в то время как jade выполнит эту работу.
источник
Вы можете включать угловые шаблоны через Jade.
Что касается кэширования шаблонов, я считаю это гораздо менее хрупким, чем включение экранированных шаблонов в файлы javascript.
См. Https://docs.angularjs.org/api/ng/service/$templateCache
источник
Jade определенно гораздо ближе к html, чем Haml. Таким образом, переключение контекста на самом деле очень минимальное. Однако он не отсутствует полностью. Для разработчика это может вообще не иметь значения. Но когда ваш дизайнер приходит и спрашивает вас, как заставить вложенный тег работать должным образом, вы решаете ненужную проблему, которую создали изначально.
HTML по-прежнему можно писать очень разборчиво, и можно использовать частичные слова, чтобы сделать его более понятным. 500 строк чего-либо, что трудно прочитать - будь то Jade или HTML.
Вот шаблон Jade
И эквивалентный HTML
Когда написано разборчиво, я не вижу, чтобы HTML был в очень невыгодном положении, чтобы гарантировать переход. Разумеется, угловатые кронштейны - бельмо на глазу. Но я бы предпочел их иметь, чем иметь дело с сомнениями дизайнера, нарушает ли введенное мной косвенное обращение html. (Может и нет. Но доказать, что это не достойное усилие)
источник
Прежде всего, вам всегда нужен какой-то серверный шаблон.
Чистые клиентские шаблоны имеют огромные недостатки во время загрузки, поэтому они часто смягчаются за счет отрисовки некоторых статических элементов на сервере. Таким образом, когда пользователь частично загружает страницу, он уже видит некоторые элементы на странице.
И что ж, шаблоны в этом случае удобны, хотя люди иногда вместо этого используют статический генератор html, такой как Jekyll.
Есть еще одна причина для использования Jade, о которой здесь раньше не упоминалось.
Пробелы.
Если вы пишете HTML-код, поддерживаемый человеком, с отступами и разрывами строк, каждый отдельный разрыв строки приведет к появлению пробельного текстового узла. В некоторых случаях он может сильно испортить форматирование встроенных элементов и сделать код javascript более странным.
Вы можете прочитать более подробную информацию здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM
Если вы пишете код Jade, он компилируется в однострочный HTML-код, в котором нет этой проблемы.
источник
При работе в команде фронтенд, скорее всего, предпочитает оформлять свои страницы в виде статического HTML. Перевод этого статического HTML в динамические шаблоны является источником ошибок, а добавление jade добавляет такой шаг перевода.
Как и многие другие, я предпочитаю простоту!
источник