如何使用 AngularJS 替换 .asp 包含？答案

【问题标题】：How can AngularJS be used replace .asp includes?如何使用 AngularJS 替换 .asp 包含？
【发布时间】：2013-11-20 17:43:44
【问题描述】：

为.aspx 网站构建一个小型框架。项目名为 Dwarf，可在 GitHub 上找到。

我要解决的问题是使用部分。例如，在我的一个页面中，我在侧栏中有一个部分，其中包含一个.html 文件。页面中的引用是

<!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" -->

如何在此处集成 AngularJS 以使用局部？

我在想

<!-- this is just an example -->
<script type=text/ng-template id=product-links-contact-rep.html>
    <!-- Links -->
    <ul>
      <li><ahref="http://www.example.com/link1">link 1</a></li>
      <li><ahref="http://www.example.com/link2">link 2</a></li>
    </ul>
</script>

整个脚本都在页面中？如何处理部分路由？

我来自 Rails 背景，是 ASP 的新手和 Angular 的新手。因此，如果有人指出我的知识差距在哪里，我将不胜感激，这样我就可以自己做进一步的研究。

【问题讨论】：

有很多方法可以在 Angular 中使用包含模板......在确定所需的方法之前，您可能需要更深入地了解 Angular 的工作原理

标签： javascript asp.net angularjs url-routing

【解决方案1】：

你可以开始的方法（不是说它是最好的）但满足你的需要是在 angularjs 中使用指令

这是代码

main.js

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {


});
app.directive("sidebar",function(){
  return {
    restrict: 'A',
    templateUrl: "product-links-contact-rep.html.html",
    link : function(scope,element,attr) {
       // Do Great things here with your sidebar
    },
    }
});

index.html

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>Side Bar</title>  

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

        <script type="text/javascript" src="main.js"></script>

    </head>
    <body ng-app="myApp">
<script type="text/ng-template" id="product-links-contact-rep.html.html">
    <!-- Links -->
    <ul>
      <li><a href="http://www.example.com/link1">link 1</a></li>
      <li><a href="http://www.example.com/link2">link 2</a></li>
    </ul>
</script>
<div ng-controller="MyCtrl">
        <div sidebar></div>
        </div>
    </body>
</html>

这是供参考的工作 plunker 代码：http://plnkr.co/edit/NAR1g5?p=preview

【讨论】：

不应该将ng-app 添加到<html> 标签中吗？就像<html ng-app="ngAppDemo"> 讨论的docs.angularjs.org/api/ng.directive:ngApp
这完全取决于您，您的项目需要单个应用程序还是具有多个应用程序的项目。您也可以将 ng-app 分配给 div。