はじめに
少しずつですが、AngularJSについてわかってきました。
まぁほんとにすこしですが。。。
今回からは、Javascriptが登場します。
前回の記事では、HTMLだけでした。本来の形に少しずつ慣れていきましょう！
コントローラーを使う
angularJSでは、MVCの形式をとります。
M(Model)とV(View)そしてC(Controller)になります。
前回は、Viewを使用しました。今回は、Controllerを使用します。
Controllerは可能な限り、スリムなコードを目指すべきです。
View（HTML）やModel(値などを格納）でできないことのみを記述しましょう。
実際に作ってみる
まず、配列にある文字列を順番に表示するアプリケーションを作ります。
とても簡単なものです。ng-repeatタグを使用するためのサンプルになります。
たぶん、よく使う機能になると思うので。
var MyApp = angular.module('MyApp', []);
MyApp.controller('TestCtrl', ['$scope', function ($scope) {
$scope.animals = ["dog", "cat", "monkey", "elephant", "Lion", "giraffe"];
}]);
var MyApp = angular.module(<アプリケーション名>, []);は、AngularJSアプリケーションの作成です。
MyApp.controller(<コントローラー名>, ['$scope', function ($scope) {は、コントローラーの設定です。
$scope.animals = ...で$scopeに`animals=変数を追加します。
準備はこれでOKです。
では、表示をするHTMLファイルを作成しましょう。
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="Sample02.js"></script>
<title>Repeat!</title>
</head>
<body ng-app="MyApp">
<div class="container">
<div class="bg-success" ng-controller="TestCtrl">
<div ng-repeat="animal in animals">
<p>{{animal}}</p>
</div>
</div>
</div>
</body>
</html>
<body ng-app="MyApp"> 先日書いた記事では、
匿名のアプリケーションの設定でしたが、今回はJavascriptを使用しているので、Javascriptで設定した"MyApp"を指定します。
<div class="bg-success" ng-controller="TestCtrl">使用するコントローラーを設定します。
<div ng-repeat="<変数名> in <配列名>">で、繰り返し処理を行います。
divタグで括っている間の内容が配列数繰り返されます。
せっかくなので、いろいろな表示を行う
ViewとなるHTMLファイルに手を加えます。
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="Sample02.js"></script>
<title>Repeat2!</title>
</head>
<body ng-app="MyApp">
<div class="container">
<div ng-controller="TestCtrl">
<div class="bg-success">
<h2>ノーマル</h2>
<div ng-repeat="animal in animals">
<p>{{animal}}</p>
</div>
</div>
<div class="bg-info">
<h2>ノーマル（インデックス付き）</h2>
<div ng-repeat="animal in animals">
<p>{{$index}} : {{animal}}</p>
</div>
</div>
<div class="bg-primary">
<h2>配列の最初だけ表示</h2>
<div ng-repeat="animal in animals">
<span ng-show="$first">{{$index}} : {{animal}}</span>
</div>
</div>
<div class="bg-warning">
<h2>配列の真ん中だけ表示</h2>
<div ng-repeat="animal in animals">
<span ng-show="$middle">{{$index}} : {{animal}}</span>
</div>
</div>
<div class="bg-danger">
<h2>配列の最後だけ表示</h2>
<div ng-repeat="animal in animals">
<span ng-show="$last">{{$index}} : {{animal}}</span>
</div>
</div>
<div class="bg-primary">
<h2>配列の偶数だけ表示</h2>
<div ng-repeat="animal in animals">
<span ng-show="$even">{{$index}} : {{animal}}</span>
</div>
</div>
<div class="bg-success">
<h2>配列の奇数だけ表示</h2>
<div ng-repeat="animal in animals">
<span ng-show="$odd">{{$index}} : {{animal}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
{{$index}}は、配列のインデックスを表示してくれます。0からです。
ng-show属性は、表示に関する設定を行うことができます。
特殊な変数を指定すると配列の表示する内容が変わります。
以下は、設定できる特殊な変数です。
$first: 配列の先頭を取得する
$middle: 配列の先頭と最後を除いた値を取得する
$last: 配列の最後を取得する
$even: 配列のインデックスが偶数の値を取得する
$odd: 配列のインデックスが奇数の値を取得する
ng-showの使い方その２
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="Sample02.js"></script>
<title>Check!</title>
</head>
<body ng-app="MyApp">
<div class="container">
<div ng-controller="TestCtrl">
<div class="bg-primary">
<input type="checkbox" ng-model="checked">チェックしたら表示</input>
<div ng-repeat="animal in animals">
<span ng-show="checked">{{$index}} : {{animal}}</span>
</div>
</div>
</div>
</div>
</body>
</html>
ng-show属性は、true or falseの値が本来の値になります。
上記の例では、ng-modelに連動して、表示されたりされなかったりします。
おわりに
まだ、Viewを作ることがメインになっていますが、少しずつcontrollerも
充実させたアプリケーションを作っていきたいと思います。