我正在尝试使用定义为 home.html 的内联模板制作一个简单的 Hello World 页面。使用的路由是 ui.router，当代码运行时，我收到一个无限循环
GET /home.html 404 0.868 ms - 1076
这向我表明 Angular 无法找到定义的 home.html 模板。
app.js
var app = angular.module('HelloWorld', ['ui.router']);
app.controller('MainCtrl', [
'$scope',
'posts',
function($scope, posts){
$scope.test = 'Hello world!';
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
});
$scope.title = ''; //Set title to empty
$scope.link = ''; // Set link to empty
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
}]);
app.factory('posts', [function(){
var o = {
posts: [
{title: 'post 1', upvotes: 5}
]
};
return o;
}]);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
索引.ejs
<!DOCTYPE html>
<html ng-app="HelloWorld">
<head>
<title>Hello World</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="home.html">
<div class="page-header">
<h1>Hello World</h1>
</div>
</script>
</body>
</html>
我看不出代码中似乎出了什么问题。我还尝试过在应用程序配置和 html 中使用/home.html 进行变体，但均无济于事。我可以了解一下我是如何错过配置/内联模板的。
最佳答案
如果这正是您的代码，则您的模板 ID 中缺少“。请参阅下文进行更正
<script type="text/ng-template" id="home.html">
关于javascript - 使用 Angular JS 内联模板上的 404，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37688635/