AngularJS Source Code

AngularJS の様々な書き方(Source Code)です。
Hello, AngularJS!

*.js を body で組み込む

  1. AngularJS サンプルプログラム で紹介した Source Code です。
    "angular.min.js"(JavaScript のソースファイル)はネットから組み込むので事前にダウンロードする必要はありません。
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>

<body ng-controller="myController">
<div>{{msg}}</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

<script>
angular.module('myApp', []);
angular.module('myApp')
  .controller('myController', function($scope) {
    $scope.msg = 'Hello, AngularJS!';
  });
</script>

</body>
</html>
  2. html を AngularJS の myApp モジュールに関連付けます。
    <html ng-app="myApp">
  3. myApp モジュールを作成して myController コントローラーを登録します。
    div で定義した {{msg}} に 'Hello, AngularJS!' を設定します。
    $scope.msg は div で定義した msg を指しています。(<div>{{msg}}</div>)
    angular.module('myApp', []);
angular.module('myApp')
  .controller('myController', function($scope) {
    $scope.msg = 'Hello, AngularJS!';
  });

*.js を head 内で組み込む

  1. angular.min.js を head の中で組み込みます。
    {{...}} の中で、JavaScript の式を記述することができます。
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body ng-controller="myController">
<div>{{msg}}</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.msg = 'Hello, AngularJS!';
});
</script>

</body>
</html>
  2. *.js(JavaScript のソースファイル)は head 内で組み込む例を良く見かけます。
    angular.min.js の組み込みを head に移動してみました。
  3. 新規に作成したモジュールを app に保存して app.controller() で呼び出す方がスマートかも知れません。
    先の例と比べてみて下さい。
    var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.msg = 'Hello, AngularJS!';
});

div に controller を移す

  1. ng-controller を body から div に移します。
    <!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>

<body>
<div ng-controller="myController">
  {{msg}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.msg = 'Hello, AngularJS!';
});
</script>

</body>
</html>
  2. div で ng-controller を定義する例です。
    {{...}} の中で、JavaScript の式を記述することができます。
    <div ng-controller="myController">
  {{msg}}
</div>

head 内でコントローラを定義

  1. heda で angular.min.js を組み込んでコントローラ(関数)を定義します。
    <!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.message = 'Hello world!';
});
</script>
</head>

<body>
 <div ng-app="myApp">
  <div ng-controller="myController">
   {{message}}
  </div>
 </div>

</body>
</html>
  2. head 内で myApp モジュールを作成してコントローラーを登録します。
    var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.message = 'Hello world!';
});
  3. <html ng-app="myApp"> で定義していた ng-app を div に移してみました。
    body では div で ng-app と ng-controller を定義するだけです。
     <div ng-app="myApp">
  <div ng-controller="myController">
   {{message}}
  </div>
 </div>

this を使う

  1. 今までは function($scope) で $scope を受け取っていました。
    今回は $scope を受け取らないで this を使ってみます。
    <!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function()
{ this.message = 'Hello world!';
});
</script>
</head>

<body>
 <div ng-app="myApp">
  <div ng-controller="myController as myCtrl">
   {{myCtrl.message}}
  </div>
 </div>
 
</body>
</html>
  2. function() 関数で $scope を受け取らないで this を使う方法です。
    【$scope を受け取らないで this を使う場合】 
    app.controller('myController', function()
{ this.message = 'Hello world!';
});

      <div ng-controller="myController as myCtrl">
   {{myCtrl.message}}
  </div>
  3. 比較するために、今まで説明してきた「$scope を受け取る場合」の書き方を掲載します。
    【$scope を受け取る場合】 
    var app = angular.module('myApp', []);
app.controller('myController', function($scope)
{ $scope.message = 'Hello world!';
});

      <div ng-controller="myController">
   {{message}}
  </div>

文字列を利用して転送

実際のアプリではダウンロード時間を節約するために、JavaScript のコードを圧縮しています。
圧縮では、ローカル変数を短縮する手法がよく用いられます(例えば仮引数 $scope を a などに変換します)。
そのため「開発環境では動作していたのに本番環境に移行した途端に動作しなくなった」という問題が発生することがあります。
そこでプログラムの変数を文字列として定義する方法が使われます。
文字列配列でサービス名を定義していれば、これは圧縮の対象外ですので、上記のような問題は起こりません。
コードがいくらか冗長になりますが、実際のアプリでは配列アノテーションの利用などが考えられます。

配列アノテーションを利用する

配列アノテーションを利用して、圧縮を防ぐ方法です。
controller メソッドの第２引数に、[サービス名1, ……, コンストラクター関数]の配列を渡す方法です。
<!doctype html>
<html ng-app="myApp">

<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
angular.module('myApp', []);    // myApp モジュールを新規に作成
angular.module('myApp')
  .controller('myController', ['$scope', function(s) {
    s.msg = 'Hello, AngularJS!';
  }]);
</script>
</head>

<body ng-controller="myController">
<div>{{msg}}</div>

</body>
</html>
これによって「サービス名1, ……」の部分が順番にコンストラクター関数の引数に渡されることになります。

$inject プロパティを利用する

$injectプロパティを利用して、圧縮を防ぐ方法です。
<script>
angular.module('myApp', []);    // myApp モジュールを新規に作成
var My = function(s) {
  s.msg = 'Hello, AngularJS!';
};
My.$inject = ['$scope'];
angular.module('myApp').controller('myController', My);
</script>
配列アノテーションと同じく、$inject プロパティに渡された[サービス名, ……]が順番に、コンストラクター関数の引数に渡されます。

ソースプログラム

angular.module() で次のような書き方を見かけます。
angular.module('myApp', ['myAppService'])
詳細は 汎用関数 を参照して下さい。

様々な書き方を紹介しましたが、Angular JS はかなり柔軟に書くことが出来るようです。
ネットで検索すると様々な書き方が混在していて、Angular JS を解り難くしている原因かも知れません。
書き方には一長一短があり、どの方法が良いとは言えません。
但し、ケースによっては「この書き方は使えない」場合もあるようです。
私のプログラムでも、場合に応じて幾つかの書き方を使い分けています。