在AngularJS中使用内联模板

Question

I wanted to load an inline view template. 我想加载内联视图模板。

I wrapped the template in a script tag of type text/ng-template and set the id to temp1.html . 我将模板包装在text/ng-template类型的脚本标记中，并将id设置为temp1.html 。 and here's what my module config looks like 这是我的模块配置的样子

learningApp.config(function ($routeProvider) {
    $routeProvider
        .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"})
        .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"})
        .otherwise({redirectTo : "/first"});
});

It tells me GET http://localhost:41685/temp1.html 404 (Not Found) in my console window meaning that it's looking for a file of that name. 它告诉我在我的控制台窗口中GET http://localhost:41685/temp1.html 404 (Not Found)意味着它正在寻找该名称的文件。

My Question is: How do I configure my routes to use inline templates? 我的问题是：如何配置我的路由以使用内联模板？

Update: Here's what my server-rendered DOM looks like 更新：这是我的服务器呈现的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>

Answer 1

Ody, you were on the right track, the only problem was that the tags are outside of the DOM element on which the ng-app directive is used. Ody，你是在正确的轨道上，唯一的问题是标签是在使用ng-app指令的DOM元素之外。 If you move it to the <body ng-app="LearningApp"> element in-line templates should work. 如果将其移动到<body ng-app="LearningApp">元素，则内联模板应该可以正常工作。

You might also find this question relevant: Is there a way to make AngularJS load partials in the beginning and not at when needed? 您可能还会发现这个问题是相关的：有没有办法让AngularJS在开始时加载部分，而不是在需要时？

Answer 2

Try use the id-Attribute of the script-Element to set the name of the template should work. 尝试使用脚本元素的id-Attribute来设置应该工作的模板的名称。

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>

在AngularJS中使用内联模板

问题描述

2 个解决方案

解决方案1
111 已采纳 2013-04-20 21:00:13

解决方案2
31 2013-04-20 20:22:22

在AngularJS中使用内联模板

问题描述

2 个解决方案

解决方案1 111 已采纳 2013-04-20 21:00:13

解决方案2 31 2013-04-20 20:22:22

解决方案1
111 已采纳 2013-04-20 21:00:13

解决方案2
31 2013-04-20 20:22:22