angular.js 入門

2014年10月20日更新 view: 8 view
https://angularjs.org/img/AngularJS-large.png

angular.js 入門

・javascriptでもフレームワークを使うのが当たり前
・その中でも angular.js は使いやすい
・AngularJSはWebアプリケーションのためのMVC(MVW)フレームワーク

スポンサードリンク

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<html ng-app>
で angular.js 使うよって意味

ドットインストールで勉強できる

http://dotinstall.com/lessons/basic_angularjs

基本コードは

以下のようになる

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>

    var mainCtrl = function($scope) {
        $scope.users = [
            {name: "hideki", score: 47815224871},
            {name: "hanako", score: 13},
            {name: "tarou", score: 585},
            {name: "jirou", score: 13},
            {name: "mei", score: 47815224871}

        ]

        $scope.today = new Date();
    }

    var userItemCtrl = function($scope) {
        $scope.increment = function() {
            $scope.v.score++;// v は ng-repeat内の単数
        }
    }

</script>

<body>




</body>
</html>

コードを書いてみよう

以下の内容を body内にコピペすれば動く

テキストフィールドの内容をリアルタイムに {{name}} に入れる

<input type="text" ng-model="name">
<p>{{name}}</p>

繰り返し

<div ng-controller="mainCtrl">
    <p>
        {{users.length}} ユーザー
    </p>
    <ul>
        <li ng-repeat="v in users">
            {{v.name}}  {{v.score}}
        </li>
    </ul>
</div>

フィルター

配列の数をカウント
今日の日付取得、日付のフォーマット
アルファベット大文字化、数字のフォーマット

<div ng-controller="mainCtrl">
    <p>
        {{users.length}} ユーザー
    </p>

    <p>
        {{today|date:'yyyy-MM-dd'}} 今日の日付
    </p>

    <ul>
        <li ng-repeat="v in users">
            {{v.name|uppercase}}  {{v.score|number}}
        </li>
    </ul>

</div>

ループで使える便利な命令

{{$index+1}} で 現在何番目の処理か (+1しない場合は 0からの連番)
{{$last}} 最後の処理か
{{$middle}} 最初、最後以外の処理か
{{$first}} 最初の処理か

<div ng-controller="mainCtrl">
    <ul>
        <!--
            index で現在何番目の処理か
            true or false
                last で 最後の処理か
                middle で last 、 first の間の処理全てか
                first で最初の処理か
        -->
        <li ng-repeat="v in users|filter:query">
            {{$index+1}} {{$last}} {{$middle}}  {{$first}} {{v.name|uppercase}}  {{v.score|number}}
        </li>
    </ul>
</div>

コントローラーのネストとイベント

ng-controller 内では ng-controller を ネスト(入れ子)することができる。
また、親要素のデータを全て引き継ぐので userItemCtrl 内では mainCtrl の内容を全て利用できる。
以下の例では increment ボタンを押す毎に scoreを +1 する

<script>
    var mainCtrl = function($scope) {
        $scope.users = [
            {name: "hideki", score: 47815224871},
            {name: "hanako", score: 13},
            {name: "tarou", score: 585},
            {name: "jirou", score: 13},
            {name: "mei", score: 47815224871}
        ]
        $scope.today = new Date();
    }
    var userItemCtrl = function($scope) {
        $scope.increment = function() {
            $scope.v.score++;// v は ng-repeat内の単数
        }
    }
</script>
<body>


<div ng-controller="mainCtrl">

    <!--
        mainCtrl 内の userItemCtrlでは
        mainCtrl の内容が継承され、使うことができる。
    -->
    <ul>
        <li ng-repeat="v in users" ng-controller="userItemCtrl">
            {{v.name}}  {{v.score}}
            <button ng-click="increment()">+1</button>
        </li>
    </ul>
</div>

フォームの作り方基本

以下は ng-model user の内容を json 形式で pre タグ内に表示する

<div ng-controller="mainCtrl">
    <form name="myName" ng-submit="addUser()">
        <p>
            名前 <input type="text" name="name" ng-model="user.name" />
            <input type="submit" value="add" />
        </p>
    </form>
    <!--
        ng-model user の内容を json でデバッグ表示
    -->
    <pre>
        {{user|json}}
    </pre>
</div>
スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

10月18日 ( 金 ) にアクセスが多かった記事はこちら!