我最近开始自己学习网络开发基础知识，目前，我尝试从AngularJS开始。但不幸的是，我的第一个项目没有成功。我试图自己解决，但我找不到问题。在我看来，我没有以正确的方式包含或导入Angular代码。
我的问题：它不是计算角度脚本app.js的结果，而是显示：{{ here should be Angular related stuff }}
我希望你能帮我解决烦人的调试问题。我也很想听到关于我的第一个代码的其他反馈，哪些东西是无用的，或者我还需要做些什么或想一想。
非常感谢你的帮助和时间。
我的文件夹树：
// Define the `SmartIndustryInterfaceApp` module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);
smartIndustryInterface.controller('WaelzlagerListController',
function WaelzlagerListController($scope) {
$scope.WaelzlagerList[
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});<html lang="de" ng-app="SmartIndustryInterface">
<head>
<title>Smart Industry Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- angular material-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- Bower -->
<script src="/bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- local -->
<script src="App/app.js"></script>
</head>
<body>
<div>
<p id="dynamischerHTML">Dieser Text wird noch geladen... ... ... ... </p>
</div>
<div ng-controller="WaelzlagerListController">
<ul>
<li ng-repeat="waelzlager in WaelzlagerList">
<span>{{waelzlager.name}}</span>
<p>{{waelzlager.snippet}}</p>
</li>
</ul>
</div>
<div>
<p ng-controller="testing"> {{firstName + "" + lastName}} </p>
<script> var app = angular.module("SmartIndustryInterface", []);
app.controller("testing", function($scope) {
§scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</div>
<!--<md-list>
<md-list-item class="md-2-line" ng-repeat="item in todos">
<md-checkbox ng-model="item.done"></md-checkbox>
<div class="md-list-item-text">
<h3>{{item.title}}</h3>
<p>{{item.description}}</p>
</div>
</md-list-item>
</md-list>-->
<script src="js/index.js"></script>
</body>
</html>
答案 0 :(得分：2)
主要问题是：
1 - 错误的字符§应该是$。
§scope.firstName = "John";
应该是
$scope.firstName = "John";
2 - $scope.WaelzlagerList = [...]
我通过将内联控制器与第一个控制器一起移动来清理代码。
// Define the SmartIndustryInterfaceApp module
var smartIndustryInterface = angular.module('SmartIndustryInterface', []);
smartIndustryInterface.controller('WaelzlagerListController',
function ($scope) {
$scope.WaelzlagerList = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM',
snippet: 'The Next, Next Generation tablet.'
}
];
});
smartIndustryInterface.controller("testing", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
//angular.element(document).ready(function () {
// angular.bootstrap(document, ['SmartIndustryInterface']);
//});<html lang="de" ng-app="SmartIndustryInterface">
<head>
<title>Smart Industry Interface</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- angular material-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- Angular -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<!-- Bower -->
<script src="/bower_components/angular/angular.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- D3 -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- local -->
<script src="App/app.js"></script>
</head>
<body>
<div>
<p id="dynamischerHTML">Dieser Text wird noch geladen...</p>
</div>
<div ng-controller="WaelzlagerListController">
<ul>
<li ng-repeat="waelzlager in WaelzlagerList">
<span>{{waelzlager.name}}</span>
<p>{{waelzlager.snippet}}</p>
</li>
</ul>
</div>
<div>
<p ng-controller="testing">{{firstName + ' ' + lastName}}</p>
</div>
<script src="js/index.js"></script>
</body>
</html>
答案 1 :(得分：1)
到目前为止的一些事情：
对象数组定义不明确：
$scope.WaelzlagerList = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
然后Inline JS中有一个狡猾的字符：
**§**scope.firstName = "John";
您可能需要问问自己为什么这需要内联，这将使您的测试更加困难。还有其他问题，但这两个是开始的。 “测试”控制器似乎也存在加载顺序问题。看看是否有帮助。
添加plunkr，谢谢VRPF： plunkit