Question

这样做可以吗？例如，如果我构建一个包含我的网站徽标，搜索栏和导航的所有HTML的自定义指令，该怎么办？然后我有另一个包含我的网站页脚的指令。所以每个.html文件看起来都像：

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

  <website-header></website-header>

  This page's individual content.

  <website-footer></website-footer>

</html>

这会起作用，是否会被推荐？我还没有尝试过。

我的第一个想法是使用ng-include并且只包含页眉和页脚HTML文件，但由于某些原因，我很难将HTML包含在那些包含ng的html文件中，以便在任何效果下呈现JavaScript的。因此，如果我使用jQuery使我的导航更具交互性，那么这种交互性似乎都不起作用，但我没有错误。

使用这样的指令是否可以？或者使用Angular还有其他一些明显的方法吗？呈现给页面的HTML元素是否仍会受到JavaScript的影响，就像所有元素都被编码到HTML中一样开始？

如果可以，那么有什么标准吗？任何问题，或只是其他可以了解的信息？

Answer 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'" />

Answer 2

我认为这种方法没有问题。我甚至建议为<head></head>元素执行此操作，以便您可以将特定于页面的值传递到范围，如：

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

请注意，当您执行多个页面时，在Angular中构建网站会变得困难/怪异。您可以使用Angular routing，但这可能导致丑陋＆＃39; url＆＃39; www.website.com /＃/ about＆＃34;。

Angular主要用于构建Web应用程序，PHP（如已建议的@TheGuyWhoCodes）可以更好地适应您的情况。两者之间最大的区别在于PHP在服务器端处理它并且在网页设计方面具有很多优势（想想SEO，它并不总能很好地处理前端生成的内容）。在Angular中建立网站时，需要考虑以下事项。

Answer 3

使用它没关系。如果你想/如果你可以使用它，请试用带有include功能的php。它使事情组织得非常好！所以你可以这样做：

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

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

使用指令模块化网站的HTML结构

3 个答案: