问题描述
我想加载内嵌视图模板。
我裹着类型的脚本标签模板文/ NG-模板和ID设置为 temp1.html 。这里就是我的模块的配置看起来像
learningApp.config（函数（$ routeProvider）{
$ routeProvider。
当（/第一，{控制器：SimpleController，templateUrl：temp1.html}）。
当（/秒，{控制器：SimpleController，templateUrl：temp2.html}）。
否则（{redirectTo：/第一}）;
}）;
它告诉我 GET HTTP：//本地主机：41685 / temp1.html 404（未找到）在我的控制台窗口，这意味着它在寻找该名称的文件
我的问题是：如何配置我的航线使用内联模板
更新：下面是我的服务器呈现的DOM看起来像
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本的src =/脚本/ angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;链接HREF =/内容/ bootstrap.css的rel =stylesheet属性/＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV CLASS =容器＆GT;
＆LT; H2＆GT;入门角＆LT; / H＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =面板NG-应用=LearningApp＆GT;
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT;脚本类型=文/ NG-模板ID =temp1.html＆GT;
＆LT; DIV CLASS =查看＆GT;
＆LT; H2＆gt;首先查看＆LT; / H＆GT;
＆所述p为H.;
搜索：LT;输入类型=文本NG模型=filterText/＆GT;
＆所述; / P＆GT;
＆LT; UL类=净值资产净值药丸＆GT;
＆LT;李NG重复=卡斯特在客户|排序依据：'名'|过滤器：filterText＆GT;＆LT; A HREF =＃＆GT; {{cust.name}} - {{cust.school}}＆LT ; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ NG-模板ID =temp2.html＆GT;
＆LT; DIV CLASS =查看＆GT;
＆LT; H2＆gt;第二个查看＆LT; / H＆GT;
＆所述p为H.;
搜索：LT;输入类型=文本NG模型=filterText/＆GT;
＆所述; / P＆GT;
＆LT; UL类=净值资产净值药丸＆GT;
＆LT;李NG重复=卡斯特在客户|排序依据：'名'|过滤器：filterText＆GT;＆LT; A HREF =＃＆GT; {{cust.name}} - {{cust.school}}＆LT ; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
＆LT;脚本的src =/脚本/ jQuery的-1.9.1.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/ bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/脚本/应用/ LearningApp.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
ODY，你是在正确的轨道上，唯一的问题是，标签的 的外面的DOM元素在其上 NG-应用指令使用。如果你把它移动到＆LT;机身NG-应用=LearningApp方式＆gt; 元素的在线模板应该工作
您也可能会发现这个问题有关：有没有一种方法，使AngularJS负荷谐音的开始，而不是在需要的时候？ / A>
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. 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.
My Question is: How do I configure my routes to use inline templates?
Update: Here's what my server-rendered DOM looks like
<!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, 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. If you move it to the <body ng-app="LearningApp"> element in-line templates should work.
You might also find this question relevant: Is there a way to make AngularJS load partials in the beginning and not at when needed?
这篇关于在角使用内联模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！