解决meteor-angular tutorial, at step 2我创建 Angular 模板 todos-list.ng.html:
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul ng-repeat="task in tasks">
<li>{{task.text}}</li>
</ul>
</div>
并得到这个结果
=> Errors prevented startup:
While building the application:
todos-list.ng.html:1: bad formatting in HTML template
=> Your application has errors. Waiting for file change.
由于这是复制粘贴，这让我感到困惑。我没有看到任何解释，其他人有什么想法吗？
更新
这是其他文件。如果有帮助的话，前面的子步骤有效。我确信这很愚蠢，但我确实不明白是什么，
simple-todos-angular.html:
<head>
<title>Charlie's Todo List with Angular.js</title>
</head>
<body ng-app="simple-todos"
ng-include="'todos-list.ng.html'"
ng-controller="TodosListCtrl">
</body>
simple-todos-angular.js:
if (Meteor.isClient) {
// This code only runs on the client
angular.module('simple-todos',['angular-meteor']);
angular.module('simple-todos').controller('TodosListCtrl', ['$scope',
function ($scope) {
$scope.tasks = [
{ text: 'This is task 1' },
{ text: 'This is task 2' },
{ text: 'This is task 3' }
];
}]);
}
simple-todos-angular.css:
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
#login-buttons {
display: block;
}
h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}
.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}
.new-task input:focus{
outline: 0;
}
ul {
margin: 0;
padding: 0;
background: white;
}
.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}
li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text {
margin-left: 10px;
}
li.checked {
color: #888;
}
li.checked .text {
text-decoration: line-through;
}
li.private {
background: #eee;
border-color: #ddd;
}
header .hide-completed {
float: right;
}
.toggle-private {
margin-left: 5px;
}
@media (max-width: 600px) {
li {
padding: 12px 15px;
}
.search {
width: 150px;
clear: both;
}
.new-task input {
padding-bottom: 5px;
}
}
/* CSS declarations go here */
最佳答案
我怀疑您错过了页面顶部的步骤 - 添加 urigo:angular包裹。从终端运行以下命令(在您的 Meteor 项目目录中):
meteor add angular
(编辑:以前是 meteor add urigo:angular 但正如评论中所述，该包现已被弃用)。
没有它，Meteor 会尝试将 *.ng.html 解析为普通 html 文件。它失败是因为找不到以下内容之一:
-
<head> -
<body> -
<template name="X">
关于angularjs - Meteor-Angular 教程 : bad formatting in HTML template, 用于复制/粘贴代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32270387/