first_angularJS
[AngularJS] はじめに (HelloWorld)
簡単な例。
Hello.html
<!doctype html>
<html ng-app>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
<script type="text/javascript">
function helloFunc($scope) {
$scope.hello = "Hello, World";
}
</script>
</head>
<body>
<div ng-controller="helloFunc">
<span>{{hello}}</span>
</div>
</body>
</html>
これを実行すると「Hello, World」と表示される単純な動作。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js"></script>
の行で、angularJSのJavaScriptファイルを参照してます。
ネットワーク上のものを参照するのではなく、ローカルに置きたい場合は「angularjs.org」で一式をダウンロードしてローカルのたどれる位置に展開しておくとよいかと思います。
「html ng-app」としているタグ内が有効範囲。
「ng-controller="helloFunc"」の箇所で、JavaScriptのhelloFunc関数を呼び出します。ここで「$scope.hello」に値を入れると、ng-controllerで指定したタグ内の「{{hello}}」に動的に値が反映されます。
IEでの注意事項
古いIEバージョン（7/8以前）しか入っていない環境や、Windows環境でのShade 3DのスクリプトでのWidgets実行では、
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
の指定がないと、AngularJSは正しく動作しないようでした。IEのバージョンが7/8あたりだと動作せず、9以上が必要な模様。「IE=edge」の指定で実行環境の最新のIEを使用するとのことで、動作が怪しい場合はこの行の指定は常にしておくほうがよさそうです。
最終更新時間：2014年05月23日 17時42分39秒
Future's Laboratory 技術格納庫 2004-2013 Yutaka Yoshisaka.