如何在我的Codepen上放置一个小angularjs应用

Question

我尝试将一个小的angularjs应用上传到我的代码笔。 我的问题是：如何提出意见？

我有两种看法。 因此它们位于两个单独的.html文件中。 但是在代码笔上，您只有一个.html占位符。

我试图做的是将它们放在带有id的标签中，但这是行不通的。

这是代码：

<!--  html templates used by angular, usually in separate files -->
<script type="text/ng-template" id="albumDetails.html">
  <div>
<ul>
    <li ng-repeat="albumDetails in albumDetails  | searchFor:searchString">

        <div class="d-flex flex-row">
            <div class="p-2"><img src="img/photo_album.png" class="albumIcon img-fluid" /></div>
            <div class="p-2">
                <p><strong>Album title:</strong> <a href="#/photos/{{albumDetails.id}}">{{albumDetails.title}}</a></p>
                <p><strong>Owner’s name:</strong> {{albumUsers[albumDetails.id].name}}</p>          
                <p>Number of Photos: {{ 'PhotoDetails[$index]' | lengthOfObject }}  </p>    
            </div>

        </div>  
        <hr />
    </li>
</ul>

  <!--  template for displaying a contacts info  -->
<script type="text/ng-template" id="calbumList.html">
  <div>
<p><a href="#/albums">Go back to home page</a></p>
<ul>
    <li ng-repeat="PhotoDetails in PhotoDetails">
        <a href="#myModal" data-toggle="modal" data-target=".photoBig{{PhotoDetails.id}}"><img src="{{PhotoDetails.thumbnailUrl}}" /></a>       

        <div class="modal fade photoBig{{PhotoDetails.id}}" id="modalContainer" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel{{PhotoDetails.id}}" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <img src="{{PhotoDetails.url}}" />
                </div>
            </div>
        </div>      

    </li>
</ul>

这是笔： https : //codepen.io/Menachem36/pen/eedbgb

任何想法？

谢谢