× 無料のユーザー登録をすると学習状況を管理することができるようになります

AngularJS入門 (全12回)

JavaScriptのMVCフレームワークであるAngularJSについてその使い方の基礎を解説していきます。

このレッスンでは AngularJS 1.0.1 を使用しています。 v1.3.0 - v1.5.6 で動作しない箇所については補足情報に記載しています。

#01 AngularJSとは何か?
2012年8月17日
このレッスンを作った際に参考にしたサイトをまとめておきました。こちらもよろしければ。
http://www.ideaxidea.com/archives/2012/08/angularjs_matome.html
2012年8月14日
AngularJSの公式サイトはこちらです。
http://angularjs.org/
#03 コントローラーを使ってみよう
2016年6月14日
2016年6月現在、AngularJS 1.5.6 では以下のようなコードを書く必要があります。

■ index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <div ng-controller="MainController">
        <p>{{users.length}} users.</p>
        <ul>
            <li ng-repeat="user in users">
                {{user.name}} {{user.score}}
            </li>
        </ul>
    </div>
</body>
</html>

■ myscript.js
angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11}
        ];
    }]);
#07 コントローラーのネストとイベント
2016年6月14日
2016年6月現在、AngularJS 1.5.6 では以下のようなコードを書く必要があります。

■ index.html
<!DOCTYPE html>
<html lang="ja" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <div ng-controller="MainController">
        <ul>
            <li ng-repeat="user in users" ng-controller="UserItemController">
                {{user.name}} {{user.score}}
                <button ng-click="increment()">+1</button>
            </li>
        </ul>    
    </div>
</body>
</html>

■ myscript.js
angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11},
            {"name":"hayashi", "score":5.25},
            {"name":"tanahashi", "score":82.4},
            {"name":"yasuda", "score":55.21},
            {"name":"minami", "score":32.8},
            {"name":"yanagi", "score":72.2}
        ];
    }])
    .controller('UserItemController', ['$scope', function($scope) {
        $scope.increment = function() {
            $scope.user.score++;
        };
    }]);
#09 エラーメッセージを表示する
2016年6月14日
前回のレッスンでは name="myName" としていましたが、今回のレッスンでは name="myForm" に変更しています。
2012年8月14日
Formにrequiredなどのバリデーションルールを設置すると、ユーザー入力があるたびにフォーム部品に次のclassが動的に追加されます。
- ng-valid(Validation OK)
- ng-invalid(Validation NG)
これらのクラスにスタイルを当てておくと(見た目的に)わかりやすいフォームを作ることができます。またAngularJSでは次のclassも動的に追加します。
- ng-pristine(ユーザーがまだ入力していない)
- ng-dirty(ユーザーがなんらかの値を入力した)
これらを組み合わせることで「ng-invalidだけどng-pristineだからエラーっぽく表示しない」といった細かい制御ができるようになります。
Form関連はDeveloper Guideのこちらも参考にしてみましょう。サンプルもあってわかりやすいですよ。
http://docs.angularjs.org/guide/forms
#11 フォーム部品を設置しよう (2)
2016年6月14日
チェックボックスにつけている ng-true-value や ng-false-value に文字列を設定する場合には、シングルクォーテーションで括る必要があります。
<input type="checkbox" ng-model="user.adult" ng-true-value="'adult'" ng-false-value="'child'">