カテゴリー: angularJS

AngularJS チュートリアル4〜コントローラ in W3schooles〜

今回は、前回作成したコードをカスタム(追加)してangular二様るstlye属性のコントロールをやって見ます。
ちなみに前回のコードはいかになります。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>
</body>
</html>

このコードに追加してlabel color: <input type="text" ng-model="myCol"><br/>と<label style="background-color:{{myCol}}">(閉じる部分も入れます)を追加します。
すると下の様な動きになります。

実行結果

処理概要

単純に、<label style="background-color:{{myCol}}">の部分でstyle属性の値を"{{mtCol}}とバインドしているのでテキストボックスに入力した値がそのまま色指定になります。
HTMLで用意されていない値を設定するとstyleが外れます。

作成したコード

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
label color: <input type="text" ng-model="myCol"><br/>
<br>
<label style="background-color:{{myCol}}">
Full Name: {{firstName + " " + lastName}}
</label>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
  $scope.myCol = "lightblue";
});
</script>
</body>
</html>

こんな感じです。

でわでわ。。。



AngularJS チュートリアル3〜コントローラ in W3schooles〜

今回は、AngularJSでのコントローラを使ってみます。
そして、早速コードを見て観ます。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
</script>
</body>
</html>

今までと違い、var appにモジュールを設定してからコントローラを追加しています。app.controller('myCtrl', function($scope) {
これで、$scopeに追加した「firstName」と「lastName」をHTML部分に表紙(バインド)しています。

  1. First Name: <input type="text" ng-model="firstName"><br>にfirstNameを表示
  2. Last Name: <input type="text" ng-model="lastName"><br>lastNameを表示(バインド)

実行結果は例の如くこちらにアップしてあります。

処理内容

今回は、画面を表示するときにデータの初期化を行っています。以下の部分がこれに対応します。

  $scope.firstName= "John";
  $scope.lastName= "Doe";

なので画面を表示したときには下の様に表示されます。

実行結果

でわでわ。。。



AngularJS チュートリアル2〜ディレクティブ in W3schooles〜

今回はディレクティブについて学習します。

早い話が、htmlタグとJSをリンクします。

そして、参照するURLはこちらです。そして、サンプルコードは以下のものになります。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>


チュートリアル１でやったものとほとんど一緒ですが、以下の部分が違います。
＜今回＞
<p ng-bind="name"></p>
＜前回＞
<input type="text" ng-model="name">
書くのが簡単になったという感じでしょうか？
ディレクティブはいろんなものがあるので今後みていきます。
作成したものは(コピペですが)こちらにあります。
実行結果はこんな感じです。

Expression(式)

下の様に記載します。この"{{"と"}}"で囲って入る部分を式として実装できます。
<p>My first expression: {{ 5 + 5 }}</p>
とか<p>My first expression: {{ 'test' === 'test' }}</p>

これで、JSでいちいちgetElementById()を呼び出す処理が不要になります。

とりあえず、今回はここまでにします。

でわでわ。。。



AngularJS チュートリアル〜W3schoolesをやってみる〜

前回まで使用していた参考書よりも、W3schoolesのチュートリアルの方がわかりやすいし、汎用的なのでそちらのチュートリアルをやることにします。

改めてやり直すハローワールド

上記のチュートリアルページでやり直します。その理由に関しては、本の内容がイマイチだったからです。概要は掴めるのですが、ng-XXXの属性に対する記載がほとんどでわかり辛いと判断しました。
というわけで、W3schoolesの方をやるのですが、初期表示時には英語なので心理的抵抗がありますが、流石W３！国際化対応済みでした。つまり日本語表示もできるということです。

上のリンクから対象のサイトに飛ぶと、下の様なヘッダーが観れます。
その右端に、の様なマークがあるのでクリックすると表示する言語を選択できるので「日本語」を選択します。

これで、学習準備OK!

W3schoolesをやる

ハローワールド

早速、コードを見て観ます。コードといってもHTMLですが。。。

<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

これをアップロードしていますのでこちらで触ることができます。

処理の内容

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>;の部分でAngularJSを読み込んでいます。これがないとAngularJSは使えません。
  2. <div ng-app="">はモジュールを指定するところなのですが、使用するまでもないので空("")になっています。
  3. ng-model="name"はモデル(データを設定するオブジェクト)に「name」を指定しています。これは単純にnameという変数をモデルとして使用します。という意味です。

動かしてみる

こんな感じで動かせました。

今回はこの辺で失礼します。

でわでわ。。。



AngularJS 基本〜AngularJSを理解する2〜

今回は、AngularJSてテンプレートを使用してみようと思います。
AngularJSでの主要な機能？としては以下のものがあります。作成したものはこちらで触れます。

  1. APPモジュール(ルートになるモジュール)
  2. コントローラー(app.controller(XXXX, function { XXX }))
  3. テンプレート(今回学習します)

テンプレート？

「あー、歯の矯正に使用するやつ？」と思った方、残念ながら知能レベルが自分と同じくらいです。。。

テンプレートとはHTMLに記述しているコードのことの様です。
下に作成したコードを記載します。

<!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">
            // appモジュールを作成する
            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>

一応までに、処理内容をまとめておきます。

  1. var app = XXXXと実装している部分に関してはAPPモジュールを作成しています。そして、HTML（テンプレート側)にはng-app="Hello"の様にAPPモジュールを指定しています。
  2. app.controller("コントローラー名", function(){ / コントローラーの処理 / });の様な形でコントローラーを実装します。
    ３。HTML側(テンプレート側)で値を表示します。{{hello.text}}"{{}}"の中身にコードが書ける仕様になっています。

「ng-XXX」

HTML側のテンプレートには「ng-XXX」の様にいろんな属性をつけることができます。上のコードで使用しているのはng-clickです、このほかにも沢山あるので機会があれば調べてみようと思います。

次回はモデル

次回は、モデル(Model)についてやろうと思います。このモデルは、データを格納するもので入力した文字をモデルとバインド(関連付ける)ことにより、テキストボックスと表示する項目が同じものになります。
そういうサンプルが、W3のチュートリアルページにありますので見てみるのも一興です。

でわでわ。。。