使用角度js的内联模板上的404
问题描述:
我试图用定义为home.html的内联模板制作一个简单的Hello World页面。所使用的路由是ui.router,并运行代码时,我收到的使用角度js的内联模板上的404
GET /home.html 404 0.868 ms - 1076
一个无限循环这表明,我认为角度无法找到中定义的模板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');
}]);
index.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>
我看不出什么,似乎在代码是想错了。我也尝试使用/home.html中的应用程序配置和HTML无济于事。我可以使用一些见解来了解如何错过配置/内联模板。
答
如果这正是你的代码中有失踪“,在模板的ID。下面的修正见
<script type="text/ng-template" id="home.html">
+0
复印时出现错字,编辑正确 – JME
答
你的代码工作对我罚款。为了进一步测试它添加以下到HTML :
<a ui-sref='home'>Home</a>
<a ui-sref='about'>About</a>
....
<script type="text/ng-template" id="about.html">
<div class="page-header">
<h1>About</h1>
</div>
</script>
我加入以下途径给javascript:
.state('about', {
url: '/about',
templateUrl: 'about.html',
controller: 'MainCtrl'
});
钍添加了左上角的链接,允许您切换视图。您可以在http://codepen.io/amartin007/pen/rLOvqa
看到工作代码题外话:同时考虑的getter/setter方法模块和controllerAs语法在你的应用程序角的最佳实践。模块变量和'$ scope'都是过时的技术。 – isherwood