Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1.5に再挑戦 その2 Link Angular from Local & CDN と　Binding & Conditionals

概要

AngularJS1.5に再挑戦 その2 Link Angular from Local & CDN

参考動画・参考サイト

Coding for Entrepreneurs

AngularJS — Superheroic JavaScript MVW Framework

Link Angular from Local & CDN

  • angular.min.jsをscriptとして読み込まれるようにindex.htmlにコードを追記する。
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Try Angular 1.5</title>
        <script src='./js/angular.min.js'></script>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>
  • src=の箇所は、angular公式のhttps://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.jsに変更することもできる。そしてたぶんそちらの方が推奨されてるぽい。

Initialize Angular

  • index.htmlを以下のように修正してみる。
<!DOCTYPE html>
<html lang="ja" ng-app> #ng-appがangularのapplicationだと認識させるタグ？ 
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Try Angular 1.5</title>
        <!-- <script src='./js/angular.min.js'></script> -->
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js'></script>
    </head>
    <body>
        <h1>Hello, {{ name }}!</h1>
        <input type='text' ng-model='name' /># nag-modelをnameと変数
    </body>
</html>
  • すげー簡単！djangoと似てるな。

Binding & Conditionals

  • ng-if を使ってみる。ng-if='name'は、nameというangular変数？が空でなければという意味だと思われる。逆は、ng-if='!name'。
<h1>Hello, <span ng-if='name'>{{ name }}</span><span ng-if='!name'>World</span>!</h1>
  • ng-classを使ってみる。ng-classは条件を指定して、その条件に当てはまる時に、指定したclassを適応することができる。
        <style>
        .new-class{
            font-size: 72px;

        }
        .other-class{
            font-size: 32px;
        }
        </style>

    </head>
    <body>
        <h1 class='new-class' ng-class="{'other-class': name}">Hello,
            <span ng-if='name'>{{ name }}</span>
            <span ng-if='!name'>World</span>
            !
        </h1>
        <input type='text' ng-model='name' />

  • ここでは、h1 のclassは、もともと new-classだが、ng-classを指定することで、nameがある場合に関しては、other-classを適応することができる。

  • またもっと細かい条件を指定することも可能。以下は、nameがjunkoの時だけ、classをchangeする。

h1 class='new-class' ng-class="{'other-class': name=='junko'}">Hello,
            <span ng-if='name'>{{ name }}</span>
            <span ng-if='!name'>World</span>
            !
        </h1>
  • fontサイズもng変数に変更可能.
        <style>
        .new-class{
            font-size: 72px;

        }
        .other-class{
            font-size: {{ font }};
        }
        </style>

    </head>
    <body>
        <h1 class='new-class' ng-class="{'other-class': name=='junko'}">Hello,
            <span ng-if='name'>{{ name }}</span>
            <span ng-if='!name'>World</span>
            !
        </h1>
        <input type='text' ng-model='name' />

        <input type='text' ng-model='font' placeholder="fontsize">
    </body>
  • さらにng-classは、いくつか組み合わせ可能。
        <style>
        .new-class{
            font-size: 72px;

        }
        .other-class{
            font-size: 32px;
        }
        .new-class2{
            font-size: 120px;
        }
        </style>

    </head>
    <body>
        <h1 class='new-class' ng-class="{'other-class': name=='junko', 'new-class2': font==120}">Hello,
            <span ng-if='name'>{{ name }}</span>
            <span ng-if='!name'>World</span>
            !
        </h1>
        <input type='text' ng-model='name' />

        <input type='text' ng-model='font' placeholder="fontsize">
    </body>
  • これは綺麗にまとまりそうやなぁ。