AngularJS 基本〜AngularJSを理解する〜

仕事の都合もあり、AngularJSを使える様になろうと思います。自分の場合ですが、何か新しいフレームワークなどを使おうとするときは、以下の要領で理解していきます。

  1. 早い話が何なのよ?1 -> 大雑把な概要
  2. これは一体何なのよ? -> 大まかな各部品の概要
  3. どう使うのか?

この本を参考に記載します。

早い話が何なのよ?

AngularJSの概要ですが、使用するために、2つの方法があります。

  1. HTMLのヘッダーにURLを直接記載して参照する様にする
    こちらのサイトも参考にしました。

    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"gt;</scriptgt;
    </head>
    

    HTMLのヘッダーに上の様に記述して参照できる様にします。

  2. Node.jsを使用して自分のPCにインストールする
    npm install --dev <package-name>
    の様にコマンドを叩きます。詳細に関してはこちらのサイトをみました。[AngularJS](npm install --dev )

ハローワールドを作る

とりあえずは、ハローワールドを作成します。作成したものはこちらにあります。
作成したコードは以下に示します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>                 
        <script type="text/javascript">
            var app = angular.module("Hello", []);
            app.controller("HelloCtrl", function($scope) {
                $scope.hello = {
                    text: "Hello"
                };
            });
        </script>
    </head>
    <body ng-app="Hello">
        <div ng-controller="HelloCtrl">
            <p>{{hello.text}}, World!!</p>
        </div>
    </body>

</html>

これには、HTML部分とJS部分を一緒に記載しています。
しばらくは、一緒に記載していこうと思います。

中身は?

JSの方で、行なっているのは以下の通りです。

  1. 変数「app」にモジュール「Hello」を作成しています。
  2. そして「app」にcontroller「"HelloCtrl」を登録しています。JSはオブジェクトにobj.xxxx = "値";の様な形でプロパティを追加できます。
  3. コントローラーには「$scope」を渡しています。これはAngularで使用している部品です。これを使用することでHTML側で使用することができます。

具体的に{{hello.text}}の部分が直接バインドした値を使用しているところです。
なので、JS側で作成した$scope.XXXという変数はHTML側で{{XXX.ooo}}の様な形で使用することができます。

ちょっと応用

ここで上に作成したプロパティ「hello」には文字がせってされていますが、下のものは関数を追加してクリックした時に起動する様に実装しました。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>                 
        <script type="text/javascript">
            var app = angular.module("Hello", []);
            app.controller("HelloCtrl", function($scope) {
                $scope.hello = {
                    text: "Hello",
                    value: 1234,
                };
                $scope.test = function() {
                    alert("test");
                };
            });
        </script>
    </head>
    <body ng-app="Hello">
        <div ng-controller="HelloCtrl">
            <p>{{hello.text}}, World!!</p>
            <button ng-click="test()">test</button>
        </div>
    </body>
</html>

AngularJSでの、ハローワールドの実装でした。

でわでわ。。。