AngularJS をちょっとだけ勉強中。

AngularJS は MVC 構造を導入しやすい JavaScript フレームワーク。

HTML と JavaScript オブジェクト間のデータバインディングと、依存性の注入 (DI: Dependency injection) に強いらしい。

とりあえず hello, world のサンプルコードを書いてみる。


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS : hello, world sample</title>
</head>
<body>
 
  <div ng-controller="TextController">
    <p>{{myData.message}}</p>
  </div>
 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
 
  <script>
    // AngularJS 1.3 以降では
    // コントローラーをグローバル関数として定義するエラーになるので
    // モジュールを使って名前空間を与える
    var myAppModule = angular.module("myApp", []);
    myAppModule.controller("TextController", function($scope){
      var data = {};
      data.message = "hello, world";
      $scope.myData = data;
    });
  </script>
 
</body>
</html>

サンプルはこちら ⇒ AngularJS : hello, world sample

参考書としてオライリーの AngularJS アプリケーション開発ガイド を参考にソースコードを書きはじめたけど、どうもこの参考書は AngularJS 1.2 をターゲットにしているらしく、 AngularJS 1.3 だと最初のサンプルからエラーが出てしまうというありさま。

なんでエラーが出てるのか、書籍と自分のコードのどこがちがうんだろうと考えていてけっこう時間をとられた。

ネットを検索してようやく納得。

[警告/エラー] コントローラをグローバル関数として定義していると警告(AngularJS 1.3ではエラー)

AngularJSのベストプラクティスに従っていますか？ -- angular-hintの使い方 - Qiita

勉強するときはちゃんとバージョンを合わせたほうが無難。。。

ref. AngularJS — Superheroic JavaScript MVW Framework

tags: angularjs javascript

Posted by NI-Lab. (@nilab)