AngulerJSの1.2を使って、もっともシンプルなコード（JavaScriptの変数に入った値"hello world"をHtmlに出力するだけの処理）を作ってみます。
確認した環境
AngulerJS 1.2.32
ブラウザ： Chrome
プログラム
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body ng-app="appModule">
<div>
<div ng-controller="HelloController">
message = <p>{{data.message}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<script>
angular.module("appModule", []).controller("HelloController", function($scope) {
var data = {
message: "hello world",
};
$scope.data = data;
});
</script>
</body>
</html>
上記のコードの問題点
ページを表示すると、一瞬だけ{{data.message}}の置換前文字列が表示されてしまう。これを防ぎたい場合は、下記のように書くこともできる。
message = <p ng-bind="data.message"></p>
トラブルシューティング
- module()メソッドの第二引数を書き忘れると、下記のエラーが発生する(nomod: NoModuleエラー)。
Uncaught Error: [$injector:nomod]
- コントローラ名（"HelloController"の部分）の名前を書き間違えて名前が一致しないと、下記のエラーがconsoleに出力される(areq: ArgumentRequiredエラー)。
Error: [ng:areq]
上記のエラーだとわかりづらいので、angular.min.jsの部分をangular.jsに書き換えると、もう少し詳細なエラーメッセージが出力されるので問題が特定しやすい。
Uncaught Error: [$injector:nomod]
Module 'appModule' is not available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument.
Error: [ng:areq]
Argument 'HelloController' is not a function, got undefined
Amazonでおトクに買い物する方法
Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！
AmazonチャージでポイントGET
Amazonは買いもの前にAmazonギフト券をチャージしてポイントをゲットしないと損！
こちらもおススメ
