在Angular中使用内联模板
我想加载一个内联视图模板。
我将模板包装在text/ng-templatetypes的脚本标签中，并将id设置为temp1.html 。 这里是我的模块configuration看起来像
learningApp.config(function ($routeProvider) { $routeProvider .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"}) .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"}) .otherwise({redirectTo : "/first"}); });
它告诉我在我的控制台窗口中GET http://localhost:41685/temp1.html 404 (Not Found) ，这意味着它正在寻找一个名称的文件。
我的问题是：如何configuration我的路线使用内联模板？
更新：这是我的服务器呈现的DOM看起来像
<!DOCTYPE html> <html> <head> <script src="/Scripts/angular.js"></script> <link href="/Content/bootstrap.css" rel="stylesheet"/> </head> <body> <div class="container"> <h2>Getting Started with Angular</h2> <div class="row"> <div class="panel" ng-app="LearningApp"> <div ng-view></div> </div> </div> <script type="text/ng-template" id="temp1.html"> <div class="view"> <h2>First View</h2> <p> Search:<input type="text" ng-model="filterText" /> </p> <ul class="nav nav-pills"> <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li> </ul> </div> </script> <script type="text/ng-template" id="temp2.html"> <div class="view"> <h2>Second View</h2> <p> Search:<input type="text" ng-model="filterText" /> </p> <ul class="nav nav-pills"> <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li> </ul> </div> </script> </div> <script src="/Scripts/jquery-1.9.1.js"></script> <script src="/Scripts/bootstrap.js"></script> <script src="/Scripts/app/LearningApp.js"></script> </body> </html>
Ody，你是在正确的轨道上，唯一的问题是，标签在使用ng-app指令的DOM元素之外 。 如果将它移动到<body ng-app="LearningApp">元素内联模板应该可以工作。
你也可能会发现这个问题是相关的： 有没有办法让AngularJS在开始的时候加载partials，而不是在需要的时候？
尝试使用脚本元素的id-Attribute来设置模板的名称应该工作。
<script type="text/ng-template" id="temp1.html"> ... some template stuff </script>
