Webで使うスクリプト言語と言えば、一昔前ならとりあえず生中な感覚でとりあえずPerlと言われてましたが、最近はHTML5フレームワークなどをはじめ、ものすごい早さで進化してます。
ここで紹介するAngularJSもそれらのうちの１つ。単にモバイルアプリ向けだけでなく、Webサービスの管理画面やインタラクティブなWebサイトを制作する際にもかなり役立つツール。時代に乗り遅れないためにも、是非使えるようになっておきたいところです。
このページではAngularJS初心者のための簡単な使い方を紹介します。
AngularJSの使い方入門
AngularJSとは？
AngularJSはGoogle製のJavascriptフレームワーク。JavascriptのライブラリでjQueryというのがありますが、こちらは主にDOM操作（HTMLタグの操作）をするものです。AngularJSはDOM操作だけでなく、Wordpressのようなテンプレート機能やURLごとに表示を切り替えるルーティング機能などがあります。
また、jQueryでは$('#id-name')のように変更したい場所を指定しますが、AngularJSではスコープを使って編集したい場所を特定できます。
例えばこんな感じ。
app.js
/**
* アプリケーションの定義
*/
var app = angular.module("testApp", []);
/**
* controllerでアプリケーションの機能を設定する
*/
app.controller('testAppController1', function(){
this.message = "First App 1";
this.hello = function(string) {
alert('Hello ' + string);
};
});
app.controller('testAppController2', function(){
this.message = "First App 2";
this.hello = function(string){
alert('Hello ' + string);
};
});
HTML
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Angular Get Started</title>
<body>
<div class="test1" ng-controller="testAppController1 as app">
<h1>{{app.message}}</h1>
<button ng-click="app.hello('App1')">Click Me</button>
</div>
<div class="test2" ng-controller="testAppController2 as app">
<h1>{{app.message}}</h1>
<button ng-click="app.hello('App2')">Click Me</button>
</div>
<script src="assets/js/angular.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
result
このように、スコープを使うことで同じHTML構造でもコントローラーを設置した場所だけ書き換えることができます。jQueryだとセレクタの記述から始めないといけないので結構めんどくさかったんですが、これなら簡単ですね。
関数の呼び出しも、ng-clickのような元々用意されている機能で関数を指定するだけなので、簡単にインタラクティブなページを作ることができます。
AngularJSを使ってみる
では実際に使ってみましょう。AngularJSを使用するのに必要な設定は、ソースファイルの読み込みとng-appの記述のみ。
まずは必要なソースを公式サイトからダウンロードします。
AngularJS
あとはソースファイルをプロジェクトフォルダの適当な場所入れて、リンクするだけ。ソースコードをダウンロードせず、CDNを利用する方法もあります。こちらも同様にファイル内でリンクを貼れば使えるようになります。ng-appも忘れずセットしておきます。
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js
HTML
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Get Started</title>
</head>
<body>
<script src="assets/js/angular.min.js"></script>
</html>
これでAngularJSを使えるようになりました。ただし、この状態だとAngularJSのデフォルトで用意されている機能が使えるだけで、クリックした際に呼び出される関数などは設定できません。
関数や値を設定する場合はモジュールとコントローラを作ります。今回はapp.jsという名前でファイルを作りました。
app.js
/**
* アプリケーションの定義
*/
var app = angular.module("testApp", []);
/**
* controllerでアプリケーションの機能を設定する
*/
app.controller('testAppController1', function(){
this.message = "First App 1";
});
モジュールでアプリケーションを作り、コントローラーでアプリケーションの機能を設定します。ここではmessageという変数をセットしています。
ここまでできたら、先ほどのHTMLファイルにアプリケーションを紐付け、コントローラーをセットします。
HTML
<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
<meta charset="UTF-8">
<title>Angular Get Started</title>
</head>
<body ng-controller="testAppController1">
{{testAppController1.message}}
<script src="assets/js/angular.min.js"></script>
<script src="app/app.js"></script>
</body>
</html>
セットした値は{{}}で表示できます。ここにコントローラー名.変数名と入れればOK。コントローラー名はas 短縮名を使うことで短縮することもできます。
<body ng-controller="testAppController1 as test1">
{{test1.message}}
また、$scopeを使えばさらに短縮することもできます。
app.js
app.controller('testAppController1', ['$scope', function($scope){
$scope.message = "First App 1";
}]);
HTML
<body ng-controller="testAppController1">
{{message}}AngularJSをさらに深く勉強するならこちら
ここまで簡単にAngularJSの使い方を解説してきましたが、さらに深く学ぶなら以下のようなEラーニングサービスがおすすめ。ここでは紹介していない便利な機能についても知ることができます。
CodeSchool
