AngularJsをはじめてみる
AngularJsとは?
AngularJSは、Googleとコミュニティによって開発されている
オープンソースのJavaScriptフレームワークです。
Webアプリのフロントエンド開発にMVCアーキテクチャを採用しています。
ライセンスは、MIT Licenseでライセンスされたフリーソフトウェアです。
AngularJsは、下記のサイトでダウンロード出来ます。
AngularJS — Superheroic JavaScript MVW Framework
AngularJsの初め方
AngularJSでは、利用する全てのものは、必ずAngularのモジュールに登録する必要があります。
まぁ...何かしらの関数とかサードパーティ製のモジュールとかを
AngularJSが認識している必要があると言うことだと思います。
例えば、controller.jsを作るとします。
それのJSに下記の定義を書きます。
var webApp = angular.module('webApp', []);
ここで利用しているangular.moduleが、
Angularモジュールの作成、登録、取得をグローバル空間で行うためのものです。
なので、利用する全てのものは、必ずAngularモジュールに登録する必要があります。
それだけでは、使えないので、HTMLファイルにAngularを使っていることを定義します。
下記に記載されたようにng-app="名前"を定義します。
<html lang="ja" ng-app="webApp">
これで、Angularに登録されているwebAppと言う名前のモジュールを利用出来るように
なります。
コントローラーを書いてみる
コントローラーは、下記のように書きます。
var webApp = angular.module('webApp', []); webApp .controller('controller', function($scope) { });
それだけでは、使えないので、HTMLにどのコントローラーを使うか定義します。
<body ng-controller="controller"> </body>
これで、controllerが使えるようになります。
例えば、何かしらの文字を表示させるようにするには、
コントローラーに処理を追加します。
var webApp = angular.module('webApp', []); webApp .controller('controller', function($scope) { $scope.hello = 'HelloWorld'; });
これは、$scopeにhelloというものを用意して、それに対して、'HelloWorld'の文字列を
設定しています。
Angularでは、$scopeで、ビューとコントローラーがデータをやりとりします。
HTMLの方にそれを使うように書きます。
<!DOCTYPE html> <html lang="ja" ng-app="webApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <script src="angular.min.js"></script> </head> <body ng-controller="controller"> <p>{{hello}}</p> </body> </html>
これで、画面を表示すると、HelloWorldの文字列が表示されるようになります。
$scopeに設定したものをHTMLで利用する場合は、{{}}で囲み利用します。
全てがそうではないのですが、ケースにより{{}}をつけたり、つけなかったりする場合もあります。