[AngulerJS] Hello worldを出力するだけのプログラム

カテゴリ: AngularJS, JavaScript

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
こちらもおススメ

コメントを残す

メールアドレスが公開されることはありません。