我最近开始自学网络开发基础知识，目前，我尝试从 AngularJS 入手。但不幸的是，我的第一个项目不会成功。我试图自己修复它，但我找不到问题所在。在我看来，我只是没有以正确的方式包含或导入 Angular 代码。
我的问题:它没有计算 angular 脚本 app.js 的结果，而是显示:{{ here should be Angular related stuff }}
希望您能帮我解决烦人的调试问题。我也很想听听关于我的第一个代码的其他反馈，哪些东西没用，或者我还需要做什么或考虑什么。
非常感谢您的帮助和时间。
我的文件夹树:
- 应用程序
- 应用程序.js
- bower_components
- Angular
- 自举
- d3
- jquery
- CSS
- 样式.css
- js
- index.js
- 节点模块
- bower.json
- index.html
// 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>最佳答案
主要问题是:
1 - 错误的字符 § 应该是 $。
§scope.firstName = "John";
应该是
$scope.firstName = "John";
2 - $scope.WaelzlagerList = [...] 中缺少等号
我通过将内联 Controller 与第一个 Controller 一起移动来稍微清理一下代码。
// 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>关于javascript - AngularJS 模板未正确加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37503813/