Question

假设我从一个PHP应用程序开始。在网站的其中一个页面上，有一个复杂的交互式应用程序，我想将其用于Angular。问题是，我仍然希望该页面的页眉和页脚与网站的其余部分匹配。我希望能够做这样的事情：

// main-template.php
<html>
    <head>
        <title>My Site-wide Header</title>
        <script src="site-wide-script.js"></script>
        <link href="site-wide-styles" rel="stylesheet">
        <?php if ($somevar == true) : ?>
            echo "Yes, it has to be PHP";
        <?php endif; ?>
    </head>
    <body>
        <header>
            <ul>
                <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </header>

        <!-- Drop entire Angular application here -->

    </body>
</html>

仅将PHP include的Angular HTML文件放在这里对我来说有点奏效，但这很麻烦，因为Angular index.html文件当然已经包含html，{{ 1}}等标签。当然，我可以DOM解析Angular文件并修复所有问题，然后再添加...，但我希望有一个更好的解决方案。

在我的搜索中，我似乎找不到任何官方推荐的方法。实际上，我似乎根本找不到任何人这样做的示例-我的所有搜索都只会使人们使用AngularJS而不是Angular做类似的事情。用Angular有什么体面的方法来做到这一点？

Answer 1

您应该能够做自己想做的事。

这是我作为HW项目进行的基于Web的聊天程序的index.html的内容（后端很有趣...）。

$('.js-example-basic-single').select2({
  placeholder: "Select...",
  allowClear: true,
  width: "100%"
});

只要您保留相同的js文件引用和样式表，样式（在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-xs-10"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="fa fa-plus mright-1"></i> closed by default </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form"> <fieldset> <div class="form-group"> <label for="inputName" class="col-xs-2 control-label">Status</label> <div class="col-xs-10"> <select name="action" class="js-example-basic-single js-states form-control" required> <option></option> <option value="toPrepare">Prepare</option> <option value="toProduction">Produce</option> </select> </div> </div> <div class="form-group"> <label for="inputName" class="col-xs-2 control-label">Notes</label> <div class="col-xs-10"> <textarea class="form-control" name="comments" rows="3" /></textarea> </div> </div> <div class="col-xs-2"> <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button> </div> </fieldset> </form> </div> </div> </div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-xs-10"> <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne"> <i class="fa fa-plus mright-1"></i> open by default </a> </h4> </div> <div id="collapseOne2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <form id="form" method="post" action="rpt-action?do=rpt-request-change-mould-submit" class="form-horizontal" role="form"> <fieldset> <div class="form-group"> <label for="inputName" class="col-xs-2 control-label">Status</label> <div class="col-xs-10"> <select name="action" class="js-example-basic-single js-states form-control" required> <option></option> <option value="toPrepare">Prepare</option> <option value="toProduction">Produce</option> </select> </div> </div> <div class="form-group"> <label for="inputName" class="col-xs-2 control-label">Notes</label> <div class="col-xs-10"> <textarea class="form-control" name="comments" rows="3" /></textarea> </div> </div> <div class="col-xs-2"> <button type="submit" name="formAction" value="next" class="btn btn-primary">submit</button> </div> </fieldset> </form> </div> </div> </div> </div> </div> </div> </div>标签上等），那么您应该能够将其放入并扔进<!doctype html> <html> <head> <meta charset="utf-8"> <title>crap chat</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="bootstrap.min.css" rel="stylesheet" /> </head> <body class="m-a-1"> <?php print("Hello World ".date("r",time())."<br />\n"); ?> <app></app> <script type="text/javascript" src="inline.bundle.js"></script> <script type="text/javascript" src="polyfills.bundle.js"></script> <script type="text/javascript" src="styles.bundle.js"></script> <script type="text/javascript" src="vendor.bundle.js"></script> <script type="text/javascript" src="main.bundle.js"></script> </body> </html>标签集中您想要的地方。

只是为了咯咯地笑，我在服务器上将文件重命名为<body>，添加了一条打印语句以加载打印日期/时间页面，没问题。

Answer 2

从angular6开始，使用角度元素应该可以做到这一点。

您的代码将简单地是

// main-template.php
<html>
  <head>
      <title>My Site-wide Header</title>
      <script src="site-wide-script.js"></script>
      <link href="site-wide-styles" rel="stylesheet">
      <?php if ($somevar == true) : ?>
          echo "Yes, it has to be PHP";
      <?php endif; ?>
  </head>
  <body>
      <header>
          <ul>
              <li><a href="/home">Home</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/contact">Contact</a></li>
          </ul>
      </header>
      <your-component-name></your-component-name>
  </body>

您可以在https://angular.io/guide/elements上找到有关如何创建角度元素的指南-原则上，这不仅仅比创建组件还要困难

如何在PHP应用程序中正确包含Angular应用程序

2 个答案: