Использование директив для модульной структуры HTML сайта

Question

Использование директив для модульной структуры HTML сайта

0

Это нормально? Например, что, если я создаю настраиваемую директиву, которая содержит весь HTML для логотипа веб-сайтов, панели поиска и навигации. А потом у меня есть другая директива, содержащая нижний колонтитул моих сайтов. Поэтому каждый файл.html будет выглядеть примерно так:

<html>
  <head>
    head stuff
  </head>

  <website-header></website-header>

  This page individual content.

  <website-footer></website-footer>

</html>

Будет ли это работать, и будет ли это рекомендовано? Я еще не пробовал.

Моя первая идея состояла в том, чтобы использовать ng-include и просто включать HTML файлы заголовка и нижнего колонтитула, но по какой-то причине мне трудно заставить HTML внутри этих ng-включенных html файлов визуализироваться под действием любого JavaScript. Поэтому, если я использовал jQuery, чтобы сделать мою навигацию более интерактивной, ни одна из этих интерактивностей не работала, но у меня не было ошибок.

Можно ли использовать такие директивы? Или есть только какой-то другой очевидный способ сделать это с помощью Angular? Будет ли HTML-элемент, отображаемый на странице, все еще затронут JavaScript, как если бы все элементы были закодированы в HTML для начала?

Если это нормально, есть ли какие-нибудь стандарты? Любые ошибки, или просто другая информация, которую было бы полезно знать?

Chirpizard 31 дек. 2015, в 02:05

Источник

1

Я использую директиву для моего верхнего и нижнего колонтитула с угловым. работать очень хорошо
AlainIb 31 дек. 2015, в 01:01
1

то, что вы пытаетесь достичь, на самом деле является концепцией «веб-компонента», и она полностью действительна. Я лично предпочел бы это также. использование JQuery с Angular не рекомендуется, но это выполнимо. просто убедитесь, что когда вы пытаетесь что-то изменить в angular, вы должны уведомить angular об изменениях, что-то вроде $ scope. $ apply () в противном случае angular не узнает об этом.
sdfacre 31 дек. 2015, в 01:02
1

Вы можете рассмотреть возможность использования ui-router github.com/angular-ui/ui-router , который поддерживает вложенные состояния и представления. Ваш подход хорош, но лично я думаю, что директивы должны быть небольшими и простыми; облегчает их тестирование.
Shaun Scovil 31 дек. 2015, в 01:20
0

@ShaunScovil Я кое-что об этом читал и даже пытался настроить, но мне было тяжело оборачиваться вокруг него. Проект, который я планирую, в конечном итоге будет содержать около 2500 страниц, и, похоже, это будет идеальный способ справиться с этим, но я определенно хочу знать все свои варианты.
Chirpizard 31 дек. 2015, в 01:35
0

@sdfacre Да, я пытаюсь избежать jQuery в проекте ... это так заманчиво, когда мне просто нужно сделать что-то простое, что я уже знаю, как делать в jQuery, но я пытаюсь придерживаться Angular-пути!
Chirpizard 31 дек. 2015, в 01:36
1

Не вдаваться в долгие обсуждения, но приложение с 2500 страницами должно по-прежнему использовать только несколько макетов страниц. Я надеюсь, что вы не планируете делать отдельную директиву или шаблон для каждой страницы! :-)
Shaun Scovil 31 дек. 2015, в 01:46

Показать ещё 4 комментария

Теги:

javascript

html

angularjs

3 ответа

1

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

пример моей директивы заголовка:

directives.directive('header', function () {
   return {
      restrict: 'A', //This means that it will be used as an attribute and NOT as an element.
      replace: false,
      scope: {},
      templateUrl: "partials/elements/header.html",
      controller: ['$scope', '$filter', function ($scope, $filter) {
         // Your behaviour goes here :)
      }]
   }
});

Вы также можете использовать ng-include как это (но директива имеет собственный контроллер)

<div ng-include="'partials/elements/header.html'" />

AlainIb 30 дек. 2015, в 23:46

-2

Это нормально использовать. Если вы хотите/если вы можете использовать его, попробуйте php с его функцией include. Это держит вещи действительно красиво организованы! Поэтому вы можете сделать что-то вроде этого:

<?php include("meta.php"); ?>
<?php include("header.php"); ?>
     <body>
        Content.
      </body

<?php include("footer.php"); ?>

TheGuyWhoCodes 30 дек. 2015, в 23:35

0

Я должен был упомянуть в OP, что я использовал php, чтобы делать подобные вещи в прошлом. Мне просто интересно, можно ли получить подобный эффект, просто используя угловые директивы. Каковы различия между php include и ng-include? Спасибо за ответ.
Chirpizard 31 дек. 2015, в 00:59
0

Я думаю, что это действительно зависит от того, какой язык вы бы действительно использовали в своем проекте. Для меня я использовал php include, потому что большая часть моего сайта была построена из php. Скорость также является ключевым фактором, так как она делает это на стороне сервера, она загружается быстрее для клиента
TheGuyWhoCodes 31 дек. 2015, в 01:04
0

Я думаю, что смешивать Angular и PHP не очень хороший выбор. выберите один из них
AlainIb 31 дек. 2015, в 01:07

Показать ещё 1 комментарий

Ещё вопросы

Я использую директиву для моего верхнего и нижнего колонтитула с угловым. работать очень хорошо
то, что вы пытаетесь достичь, на самом деле является концепцией «веб-компонента», и она полностью действительна. Я лично предпочел бы это также. использование JQuery с Angular не рекомендуется, но это выполнимо. просто убедитесь, что когда вы пытаетесь что-то изменить в angular, вы должны уведомить angular об изменениях, что-то вроде $ scope. $ apply () в противном случае angular не узнает об этом.
Вы можете рассмотреть возможность использования ui-router github.com/angular-ui/ui-router , который поддерживает вложенные состояния и представления. Ваш подход хорош, но лично я думаю, что директивы должны быть небольшими и простыми; облегчает их тестирование.
@ShaunScovil Я кое-что об этом читал и даже пытался настроить, но мне было тяжело оборачиваться вокруг него. Проект, который я планирую, в конечном итоге будет содержать около 2500 страниц, и, похоже, это будет идеальный способ справиться с этим, но я определенно хочу знать все свои варианты.
@sdfacre Да, я пытаюсь избежать jQuery в проекте ... это так заманчиво, когда мне просто нужно сделать что-то простое, что я уже знаю, как делать в jQuery, но я пытаюсь придерживаться Angular-пути!
Не вдаваться в долгие обсуждения, но приложение с 2500 страницами должно по-прежнему использовать только несколько макетов страниц. Я надеюсь, что вы не планируете делать отдельную директиву или шаблон для каждой страницы! :-)
Я должен был упомянуть в OP, что я использовал php, чтобы делать подобные вещи в прошлом. Мне просто интересно, можно ли получить подобный эффект, просто используя угловые директивы. Каковы различия между php include и ng-include? Спасибо за ответ.
Я думаю, что это действительно зависит от того, какой язык вы бы действительно использовали в своем проекте. Для меня я использовал php include, потому что большая часть моего сайта была построена из php. Скорость также является ключевым фактором, так как она делает это на стороне сервера, она загружается быстрее для клиента
Я думаю, что смешивать Angular и PHP не очень хороший выбор. выберите один из них

Luud Janssen · Accepted Answer · 2015-12-30T22-56-00.000Z

Я не вижу проблем с этим подходом. Я бы даже предложил сделать это для элемента <head></head> чтобы вы могли передавать значения, относящиеся к странице, в область видимости:

<website-head title="This Page Title"></website-head>

Обратите внимание, что создание сайта в Angular может стать жестким/странным, если вы делаете более одной страницы. Вы можете использовать Angular routing для этого, но это может привести к "уродливому" URL-адресу, например "www.website.com/#/about".

Угловой в основном используется для создания веб-приложений, PHP (например, уже предложенный TheGuyWhoCodes) может лучше в вашей ситуации. Самое большое различие между ними заключается в том, что PHP обрабатывает его на стороне сервера, и это имеет много преимуществ для веб-дизайна (думаю, SEO, который не всегда отлично обрабатывает входящий в интерфейс контент). Это некоторые вещи, о которых нужно подумать при создании веб-сайта в Angular.

Ого, я могу даже использовать это для тегов <head> </ head>? Это потрясающе. Спасибо!
ожидайте # в URL, маршрутизация очень хорошо работает для создания многостраничного веб-сайта с угловым. В конце концов, это фреймворк MVC (MVVM с контроллером)
Да, использование Angular для веб-сайтов с несколькими страницами работает, но вы должны знать недостатки, прежде чем работать с ним. OP, для своих проектов я всегда использую Craft CMS, он использует Twig - движок шаблонов, написанный на PHP, который также позволяет вам делать подобные вещи. Я не знаю, что вы пытаетесь сделать, так как вы сказали, что у вас будет около 2500 страниц, но это может стоить посмотреть.
Что касается недостатка (отсутствия) SEO в Angular, вот пост об этом . Имеет несколько ссылок на интересные статьи
Благодарю. Взгляните на Craft сейчас. Основная причина, по которой я хотел сделать это в Angular, - узнать больше об Angular, ха. Но я бы хотел услышать больше о вашем мнении. Там будет страница для каждого объекта в базе данных массива. Каждый объект содержит данные о вещах в игре. Я думаю, что самой большой проблемой будет создание реальных HTML-страниц для каждого из этих элементов. Я не очень заинтересован в SEO для этого проекта.
Если вы не обеспокоены SEO, я бы сказал, Angular - это то, что вам нужно! Как и Шон Сковил, уже упоминавшийся в своем ответе на исходное сообщение, вам, конечно, не нужен отдельный шаблон для всех этих 2500 страниц. Если бы я делал такой проект, я бы, вероятно, использовал Angular (потому что он MVC и просто безумно крут) и использовал бы наследование директивы, о котором я упоминал в своем посте, для генерации разных страниц. Тогда для контента я бы предложил использовать анализатор уценки, например отмеченный или markdownJS .