AngularJSについて勉強してみようと思います。
ダウンロード
AngularJS公式サイトにアクセスして、Downloadをクリック。
バージョンや圧縮の選択などがあるので選択します。
選択が完了したら右下のDownloadをクリックしてダウンロードを行います。
ダウンロードせずにCDNから使用したい場合は、URLも記載されています。
使い方
AngularJSを読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>に「ng-app」を追加します。
<html lang="ja" ng-app>
これでとりあえずの準備は完了です。
サンプルコード
先ほどダウンロードした公式ページの下部にも載っていますが、inputに入力した値を他所に表示させるサンプルを試してみます。
HTML
<input type="text" ng-model="name" placeholder="名前を入力">
<p>{{name}}さんこんにちは。</p>
ng-modelで変数nameにinputの内容を代入するようにして、そのnameの内容を{{ }}で表示するようにしています。
inputに入力した値を他所に表示させるデモページ
{{ }}の中で数値の演算を行ったり、変数の指定を行ったりもできます。
HTML
<div ng-init="sample=2">
{{sample + 3}}
</div>
ng-initで変数sampleに2を代入しています。
演算と変数の指定を行うデモページ
変数に配列を格納して、繰り返し処理で配列の内容を表示してみます。
HTML
<div ng-init="items = ['メルトダウナー', 'オフェンスアーマー', 'AIMストーカー', 'フレンダ']">
<ul>
<li ng-repeat="item in items" ng-class-even="'even'" ng-class-odd="'odd'">
{{$index}} : {{item}} (first: {{$first}}, last: {{$last}}, middle: {{$middle}})
</li>
</ul>
</div>
変数itemsに配列を格納して、ng-repeatで繰り返し処理を行っています。
ng-repeat=”B in A” という形でAの中身を順番にBに入れていく、みたいな感じで使います。
ng-class-even, ng-class-oddはそれぞれ処理が偶数のとき、奇数のときにclassを追加します。
{{$index}}は現在が繰り返し処理の何番目かを表示します。
{{$first}}, {{$last}}, {{$middle}}はそれぞれ 1番目、最後、それ以外のときにtrueを返します。
繰り返し処理を行うデモページ
繰り返し処理の対象を変数ではなくコントローラとスコープで取得、さらにクリックで処理を追加してみます。
ng-appとしていたところをng-app=”app”とします。
<html lang="ja" ng-app="app">
HTML
<div ng-controller="sampleCtrl">
<div>{{member.length}} 人のレベル5</div>
<ul>
<li ng-repeat="level5 in member">
{{level5}}
</li>
</ul>
<button ng-click="action()">{{message}}</button>
</div>
JavaScript
var SampleCtrl = function ($scope) {
$scope.member = ['一方通行', '垣根帝督', '御坂美琴', '麦野沈利', '食蜂操祈', '藍花悦', '削板軍覇'];
$scope.message = '能力名';
$scope.action = function () {
$scope.member = ['アクセラレータ', 'ダークマター', 'レールガン', 'メルトダウナー', 'メンタルアウト', '？？？', 'すごいパーンチ'];
};
};
var appModule = angular.module('app', []);
appModule.controller('sampleCtrl', SampleCtrl);
ng-controller=”sampleCtrl”で対象のコントローラを指定します。
このdivで括った範囲がコントローラの範囲になります。
コントローラは別ファイルで定義し、$scopeに対してメソッドやプロパティを指定します。
繰り返し処理を行うデモページ2
始めたばかりで分からないことが多いですが、少しずつ覚えていければと思います。
【参考サイト】
- AngularJS — Superheroic JavaScript MVW Framework
- AngularJS入門 (全12回) – プログラミングならドットインストール
- AngularJS 1.2 日本語リファレンス | js STUDIO
コメントが承認されるまで時間がかかります。