1
最近私は自分でWeb開発の基礎を学び始めましたが、現時点ではAngularJSで始めることにしました。しかし、残念ながら私の最初のプロジェクトはうまくいかないでしょう。私はそれを自分で修正しようとしましたが、問題を見つけることができません。私の意見では、Angularコードを正しい方法でインクルードまたはインポートすることができませんでした。AngularJSテンプレートが正しく読み込まれない
私の問題は：代わりに、角度スクリプトの結果を計算するのでapp.js、それは示しています{{ here should be Angular related stuff }}
私はあなたが私の迷惑なデバッグの問題で私を助けることを願っています。私はまた、私の最初のコードについての他のフィードバックを聞くのが大好きです。
ご協力いただきありがとうございます。
私のフォルダツリー：ブートストラップ
- のApp
- app.js
- bower_components
- 角度
- D3
- jqueryの
- CSS
- style.cssに
- JS
- index.js
- node_modules
- 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>
ブラウザの開発ツール（F12）で友達を作ります。コンソールにはどのようなエラーがスローされますか？同じツールでも同じツールでネットワークタブを使ってすべてのファイルのロード状況を確認します – charlietfl
@charlietflが好きです。私はF12をキーボードショートカットにしていたので、過去6ヶ月間メニューシステムからdev-toolsを探していました。 *頭に繰り返し自己を打つ* –