0
簡単なAngular機能を提供するために、HTMLファイルと単純なJSスクリプトで構成されるAngularJSチュートリアルを行っています。以下はHTMLファイルです。同じフォルダにある即時ファイルの外にAngularJSスクリプトが動作しない
<!DOCTYPE>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src='main.js'></script>
<head>
<title> Angular Practice </title>
</head>
<body ng-app='learningAngular' ng-controller='myCntr'>
<input type="text" ng-model='name'> <br>
<div ng-bind='name' ng-click='alertMe()'></div>
<button ng-click='alertMe()'>Alert Me Angular</button> <br>
<div ng-show='willShow'> Show this!! </div>
<button ng-click='toggleShow()'> Show </button>
<div ng-hide='willShow'> using ng-hide! </div>
<ul ng-repeat='puppy in doggos'>
<li> {{ puppy }} </li>
</ul>
<ul ng-repeat='(student, grade) in grades'>
<li> {{ student }}, {{ grade }} </li>
</ul>
</body>
</html>
スクリプト、main.jsは、次のようになります。
var app = angular.module('learningAngular', []);
app.controller('myCntr', ['$scope', function($scope) {
$scope.name = 'Josephine';
$scope.alertMe = function() {
alert("Congrats!");
};
$scope.willShow = true;
$scope.toggleShow = function() {
$scope.willShow = !$scope.willShow;
};
$scope.doggos = ['rex', 'fido', 'rover'];
$scope.grades = {
Max: 'A',
Joan: 'B',
Jay: 'C'
};
}]);
私は非常に混乱していますので、私は（スクリプトファイルの角度モジュール/コントローラを持っている場合main.js）を同じフォルダに配置すると、Angularは機能しなくなりました。スクリプトをindex.htmlに移動すると、完全に正常に動作します。私はsrc = 'main.js'を使いこなしてみると、それが問題であるかどうかを調べることができ、何か問題が見つからなかった。
スクリプトタグをbody要素の最後に移動してみてください。 –
@JCFordありがとう！それはうまくいくようです。それがどうして重要か知っていますか？ –