AngularJS Routing 〜PHPをWeb APIにする〜

今回は、AngularJSで作成した画面(子画面)をロードするときに自分のWordPressにある記事の「カテゴリ」を取得して一覧を表示する処理を作成したいとお思います。

WebAPIとは

ここでいう「Web API」とはリクエストを受けてJSONを返却するアプリケーションのことを指します。FaceBook APIや楽天APIなどリクエストに対し(パラメータがついているものもあります。)JSONでレスポンスを返すものです。

今回作成したのはgetCategories.phpを作成してリクエストを飛ばしてやるとname(カテゴリ名)、url(リンクのURL)を返すものを作成しました。パラメータはありません。

もちろん、外部のサーバーからのリクエストでもJSONが取得できると思います。
というかテストしました。下のコマンドを叩くとJSONデータを取得できます。自分の記載しているブログのカテゴリとそのURLです。
curl https://zenryokuservice.com/tools/pgbox/getCategories.php
実行結果はこんな感じです。

Web API実装

そして、巷でよく聞く「WebAPI」の実装です。先ほど記載したように

リクエストに対してJSONでデータを返却するアプリ

しのごの言わずにコードを見て見ます。
<JSのコード>

  // 1サーバーに対してリクエストを送信
  $http({
    method: 'GET',
    url: '/tools/pgbox/getCategories.php',
    params: {} // パラメータなし
  }).then(function(response, status, headers, config){
    // レスポンス(正常)
    $scope.categories = response.data;
  }), function(data, status, headers, config) {
   // レスポンス(異常)
    alert(data);
  };

リクエストを送信、レスポンス受信部分の処理です。AngularJSで実装しているので$httpオブジェクトを使用して簡単に作成できます。
そして、PHPの実装です。
<PHP>

/** エンコード */
header("Content-Type: text/html; charset=UTF-8");
require( $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' );

try {
    // カテゴリの全取得ようパラメータ
    $paramArr = array('type' => 'post', 'orderby' => 'name', 'order' => 'ASC', 'taxonomy' => 'category');
    // 引数
    $categories = get_categories($paramArr);
    $cnt = 0;

    $jsonArr = array();
    foreach($categories as $cat){
        $catLink = get_category_link($cat->term_id);
        $catName = $cat->name;
        // 連想配列にデータを追加
        array_push($jsonArr, array('name' => $catName, 'url' => $catLink));
    }
    // JSONエンコード(JSON形式に変換)して
    // JSON文字列を出力(クライアントに返却)
    echo json_encode($jsonArr);
} catch(Exception $e) {
    echo $e;
}

全体の流れ

  1. (JS)表示した画面からリクエストを飛ばす(パラメータなし)
  2. (PHP)リクエストを受信、PHPでWordPressテンプレートでカテゴリ名とリンクを取得、連想配列にセット
  3. (PHP)JSON文字列に変換して返却
  4. (JS)リクエストに対するレスポンスを取得、$scopeの「categories」にJSON(レスポンス)をセット
  5. HTML側にデータを出力

こんな感じです。これで、何かしらのWebサービスなんぞを作って見るのも面白いのでわ?

でわでわ。。。



AngularJS Routing 〜画面遷移ができた、そして〜

今回は、「$http」オブジェクトを使用してphpへの非同期リクエストを送信したいと思います。
ちなみに、前回はngRouteを指定して画面遷移に関して記載しいました。

作成中のページはこちらです。(AngularJS + BootStrap)

httpを使う

参考サイトによると、大雑把に下のようなコードでリクエストをサーバー側に送るようです。

  $http({
    method: 'GET',
    url: 'phpへのURL',
    params: { name: $scope.name }
  })
  // 2成功時の処理(ページにあいさつメッセージを反映)
  .success(function(data, status, headers, config){
    $scope.result = data;
  })
  // 3失敗時の処理(ページにエラーメッセージを反映)
  .error(function(data, status, headers, config){
    $scope.result = '通信失敗!';
  }

なので、非同期通信用(リクエストに対してJSONを返却するPHP)を作成する必要があります。
今回は、サイトマップの画面を作成しようと思いますので、WPのカテゴリ一覧を JSONで返却する処理を作成したいと思います。

PHP処理を作成する

こちらのサイトによると下のようなコードで行けるようです。

<?php
  $category = get_the_category();
  $cat_id   = $category[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  $cat_slug = $category[0]->category_nicename;
?>

シンプルに引数なしの一覧を返すようです。
しかしこれに、URLも欲しいのでもう1つ処理を呼び出します。PHPドキュメント参照

<?php
    // 指定したカテゴリーの ID を取得
    $category_id = get_cat_ID( 'カテゴリー名' );

    // このカテゴリーの URL を取得
    $category_link = get_category_link( $category_id );
?>

<!-- このカテゴリーへのリンクを出力 -->
<a href="<?php echo esc_url( $category_link ); ?>" title="カテゴリー名">カテゴリー名</a>

そして、複数のカテゴリ一覧を取得するにはget_categoriesを使用するみたいです。
まとめると下のようなコードで良いことになります。

$categies = get_categories();
  $cat_id   = $categies[0]->cat_ID;
  $cat_name = $category[0]->cat_name;
  // このカテゴリーの URL を取得
  $category_link = get_category_link( $cat_id );
  // JSON文字列を出力
  echo json_encode($category_link);
  

しかし、カテゴリ一覧なので、ループ処理を入れてやる必要があります。
PHPのループ処理を入れてやればうまく動きそうです。
実装の部分は後日にします。

でわでわ。。。

AngularJS + WordPress 〜WebAPIを作る〜

タイトルに「WebAPI」と格好良いことを記載しましたが、つまるところはリクエストを飛ばしてその返り値にJSONを渡してやる。。。それだけです。

AngularからWPを呼ぶ

今回は、AngularJSからのリクエストなので「$http」オブジェクトを使用します。そして、リクエスト先は自作のphpファイルです。なので「httpls://zenryokuservice.com/XXX/」
というようなURLへのリクエストを飛ばします。

PHPの処理

PHP(WP)側はカテゴリの一覧を取得してJSONにして返却する。これだけです。

実装(PHP)

このサイトを参考にして関数の使い方を見ながら作成します。

作成したコードは下のようなコードです。(PHP)

/** エンコード */
header("Content-Type: text/html; charset=UTF-8");
/** 日付の設定 */
date_default_timezone_set('Asia/Tokyo');
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/wp/wp-includes/pluggable.php' );

try {
    // カテゴリの全取得ようパラメータ
    $paramArr = array('type' => 'post', 'orderby' => 'name', 'order' => 'ASC', 'taxonomy' => 'category');
    // 引数
    $categories = get_categories($paramArr);
    $cnt = 0;

    $jsonArr = array();
    foreach($categories as $cat){
        $catLink = get_category_link($cat->term_id);
        $catName = $cat->name;
        $jsonArr = array_merge($jsonArr, array('name' => $catName, 'url' => $catLink));
    }
    echo json_encode($jsonArr);
} catch($e) {
    echo $e;
}

しかし、動きません。try-catchで囲んでもエラーの内容が見れません。。。

PHPは〜。。。もどかしいですが、一行ずつ実行していきますか。。。

そんなわけで、word-pressの関数が怪しいと思い、WPのインクルード方法を探します。。。

WordPress関数ロード

結局は/wp/wp-load.phpをロードすれば良いというところでした。

動かない原因

catch($e)の部分が間違っていました。catch(Exception $e)でした。このページを見るとtry-cathの書き方が書いてありました。
JSと混同していたようです。。。

結局は。。。

下のようなコードで動きました。JSサイドはまだ実装していないのであれですが。。。

/** エンコード */
header("Content-Type: text/html; charset=UTF-8");
/** 日付の設定 */
date_default_timezone_set('Asia/Tokyo');
require( '/wp/wp-load.php' );
try {
    // カテゴリの全取得ようパラメータ
    $paramArr = array('type' => 'post', 'orderby' => 'name', 'order' => 'ASC', 'taxonomy' => 'category');
    // 引数
    $categories = get_categories($paramArr);
    $cnt = 0;

    $jsonArr = array();
    foreach($categories as $cat){
        $catLink = get_category_link($cat->term_id);
        $catName = $cat->name;
        $jsonArr = array_merge($jsonArr, array('name' => $catName, 'url' => $catLink));
    }
    echo json_encode($jsonArr);
} catch(Exception $e) {
    echo $e;
}

これでサーバーサイドの処理ができたと思われるので、JSの方の実装を行います。

ただ、デバックしたときにデータが1つしか取れていないような?一抹の不安を残して今日は寝ます。

でわでわ。。。



MacにNode.js サーバーを立てる

今回は、自分のPC上でAngularJSの開発環境を作成します。今までは、単純にレンタルサーバーで色々やっていたのですが、でバックに時間がかかりそうなので、ローカルで開発するようにしようと考えた次第です。

Node.jsインストール

こちらのサイトを参考にしました、ぶっちゃけ以下の手順でいけます。Macの場合です。

  1. このサイトからNode.jsをインストール
  2. npmコマンドが使えるかどうか npm -v コマンドを叩いて確認(バージョン情報が表示されること)
  3. npm install -g http-serverとコマンドを叩いてインストール
  4. ウェブ・サーバーのルートディレクトリに移動してhttp-serverとコマンドを叩くと起動する
    アクセスするURLはhttp://localhost:8080/表示するhtmlファイルのようにブラウザに入力します。
    自分の場合は下のように入力しました。
    http://localhost:8080/bootstrapTheme.html

ちょっと簡単でしたが、こんな感じです。
詳細はGitに書いてありました。起動したときに、デフォルトでキャッシュするようになっているので改修など行ったときに変更が反映されません。
こんなときはhttp-server -c-1で起動してやるとキャッシュしないようにできるようです。
しかし、自分のローカルサーバーではうまくいかず。。。シークレットウィンドウを立ち上げてやっています。。。

ローカルサーバーの意義

レンタルサーバーなどでAgularJSなどを使用する場合は、デバックなどに時間が取られるので公開できる状態にするためにはテストなどが必要なので、ローカル(自分のPC)でテスト(起動確認)を行うたいときがあります。

AngularJSの場合

このフレームワークを使用すると楽なのですが、画面遷移などを行うときにはURLでファイルにアクセスするのでChromeなどのブラウザではセキュリティが働きファイルに直接アクセスできません。

URLとファイルパスの違い

URLはディレクトリと結びついていますが、必ずしもディレクトリ構造をそのまま表示しなくても良いのです。
具体的には以下のようになります。
<サーバーのドキュメントルート>
レンタルサーバーなどで自分がアクセスできる初めのディレクトリ(フォルダ)のことを言います。
上のhttp-serverコマンドで起動した時はこのディレクトリがコマンドを実行したディレクトリになります。

うんちく的な。。。

サーバーディレクトリ構造

例えば自分の使用するディレクトリ構成は下のようになっています。

今回表示したHTMLが「bootstrapTheme.html」なのでターミナルを開き、このディレクトリに移動してからhttp-serverコマンドを叩きます。
するとhttp://localhost:8080/bootstrapTheme.htmlとブラウザのURL部分に入力した場合は上のような画面が表示されます。そしてprojectフォルダ以下にあるファイルを参照したい場合は下のようになります。
http://localhost:8080/project/XXXX.html
そして、AngularJSの設定モジュールでlondon.htmファイルを下のように指定していますので、projectフォルダの下にlondon.htmファイルがないと表示できません。
しかし、.when("/it"), の部分で指定しているURLが来たときにはtemplateUrlで指定しているファイルを参照するというような指定方法が可能になります。
→ウェブサーバーが動いて、ファイルを表示しているのでウェブサーバーに下のように指定してやると、そのように動く、機構が「AngularJS」にはあるということです。
このようなところは使用するフレームワーク(自作のものでもできます)に依存するので「こーなんです!」と言い切ることができません。。。

エラー解消できず

しかし、ローカルサーバーを立てても自分の場合は解決しなかったので。こちらのサイトを参考にコマンドからChromeを起動するようにしました。。。。

でわでわ。。。



app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "

Template Test

" // templateUrl : "main.htm" }) .when("./london", { templateUrl : "./project/london.htm", controller : "londonCtrl" }) .when("/paris", { templateUrl : "./pages/paris.htm", controller : "parisCtrl" }); });

AngularJS Routing 〜画面遷移を行う〜

前回ログイン画面を作成しようと考えていましたが、その前にAngularJSでのページ遷移あたりが、わかっていないのでそこを学習し始めようと思います。

参考サイトにある、画面遷移のサンプルをこのページに埋め込み動かしてみようという試みです、しかし本物のファイルへのURLを表示するのはセキュリティ的にアウトなので、画面に表示するところまでは行きませんでした。
しかし、URLを指定すれば表示できルはずです、
注意点としてはURLと参照先ファイルへのパスが混同しないようにするところです。

画面遷移

参考サイトはこちらです。W3 schoolsのサイトです。
ここのページでは、英語表示なので日本語に翻訳して読みます。そして、サンプルとしてこのリンク先に試しにコードと実行結果をいじれるページがありました。

つまり

appモジュールを作る時にngRouteも追加して、routeプロバイイダーでURLを指定してやれば良いという認識を持ちました。

 let app = angular.module('モジュール名(XXApp)', ['ngRoute']);
app.controller('コントローラ名', function($scope) {
  // 処理
} 

つまづいたところ

ルーティングをやるのに設定をするところ

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/pages/london.htm", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});


移動する場所を指定、取得するのに自分のPCでテストする場合はローカルサーバーを立てないとブラウザのセキュリティで弾かれるのでテストが面倒というところ、Node.jsなどでWebサーバーを起動してやるとローカルでテスト(実験)しやすいです。

Routingしてみる

参考サイトにあるように「ロンドン」「パリ」のHTMファイルをロードするように実装して見ます。

app.config(function($routeProvider) {
  $routeProvider
  .when("/it", {
      template: "<h1>Template Test</h1>"
//    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "./pages/london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "./pages/paris.htm",
    controller : "parisCtrl"
  });
});

app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

エラーの対応

そして、実行(表示)してみると
下のようなエラーが出ました。ちなみに無限ループしてちょっと面倒でした。

angular.js:12845 Access to XMLHttpRequest at 'file:///london' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ angular.js:12845
angular.js:12845 Access to XMLHttpRequest at 'file:///paris' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

これの原因はHTMLに定義しているメソッドで以下のような記述がダメでした。
ng-click="headerClick({{categ.url}})
そして、HTMLはこんな感じです。

<div ng-repeat="categ in techCategories" >{{categ.categName}}</div>

色々と試した結果、ng-clickには「{{」がいらない「}}」

という答えが出ました。

結果下のようなコードになりました。

<div class="scrollmenu" style="display:{{leftSideBar_disp}}">
  <a ng-repeat="categ in techCategories" href="{{categ.url}}">{{categ.categName}}</a>
  </div>

一応はこれで表示ができました。

追伸

うまくいかなかった、画面遷移が動きました。

でわでわ。。。



AngularJS WebSite作成 〜BootStrapThemeから作成する〜

JavaMEとWebsiteの作成を並行して進めていくので記事がJavaだったり。。。Angularだったりしますが、両方やります。

AngularJSでウェブサイトを作る

今回のウェブサイト作成に関しては、自分のレンタルサーバーでイマドキのウェブサイトを作成して行こうという企画です。
そもそもは、このようなものを作成したかったのですが、詳細部分が決まらずに、ここまで伸びできた次第です。。。

BootStrapテーマから作る

AngularJS + BootStrap + WebAPI(PHP使用)の形で作成したいと思います。
<必要な環境>

  1. AngularJS(HTMLで読み込む)
  2. BootStrap(HTMLで読み込む)
  3. レンタルサーバー上のPHP
  4. レンタルサーバーのDB

とりあえずは、テンプレートをコピーしてきます。
そして、今回はヘッダーと。。。下のようなテンプレートをコピーしてきました。

そして、左側のサイドバーに下のようなCSSを適用してスライド式のメニューバーを作成しました。以前に技術ポータルを作成しようとして作ったものです。しかし、「役に立つのか?」と疑問に思い却下したアイディアでした。。。

    /* for horizonal menu */
    div.scrollmenu {
      background-color: #333;
      overflow: auto;
      white-space: nowrap;
    }

    div.scrollmenu a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px;
      text-decoration: none;
    }

    div.scrollmenu a:hover {
      background-color: #777;
    }

作成中のサイト(ページ)は現状の出来はこちらのリンクにあります。(随時増築していきます。)

設計から入ります

今回の作成するもののイメージを大雑把に申し上げると以下のようになります。

  1. GoogoleMapにイベント情報を掲載
  2. GoogleMapへの登録にはログインが必要
  3. イベント情報は、「メールを受信したら」 or 「ログイン後の画面上で登録」
  4. ログインしない人は登録されているイベント情報(イベント場所、時間、日付)を閲覧することができます。

このような要件を満たすように実装を進めて行こうと考えていますが、まずは表示するべき情報を登録する仕組みから作成しなくてはならないので、ログインの実装から入ろうと思います。
ちなみにGoogleMapへの表示は確認済みです

下の画面の「Login」を押下した時に、ログイン情報入力用のダイアログを表示することから始めて行こうと思います。

大まかな計画は以下の通りです。

実装計画(手順)

  1. Loginをクリックしたときにダイヤログを開く
  2. 開いたダイアログにログイン情報を入力
  3. ユーザー認証を行う
  4. ログイン画面で、新規ユーザー登録も行える
  5. 新規登録の場合は入力項目が増える
  6. ユーザー画面を開く
    6-1. ユーザー画面は考え中
    6-2. 画面からイベント情報の登録ができる
    6-3. イベントの開催場所を(ブックマーク的な)登録できる

とりあえずは上記のような機能を実装する予定です。

ちょっと実装したものをゆっくりと眺める必要があります。
でわでわ。。。



AngularJS チュートリアル7〜$http 外部画面(HTML)を取得する〜

今回は$httpオブジェクトを使用して自分のホームページ(サーバー)を起点として、外部にあるHTMLを取得、表示するためのチュートリアルをやろうと思います。

$httpオブジェクト

参考URLはこちらです。
単純にHTTPリクエストを送信して対象のURLからHTMLを取得するものです。

リクエストの種類

GET

今回使用するリクエストのメソッドです。よく「GETリクエスト」などと呼びます。このリクエストはhttp://XXXX,com/XXX.htmlなどのように対象のHTMLをダウンロードしようとします。ブラウザで表示しているのもこのリクエストになります。
こうして取得したHTMLをブラウザで表示、もしくは何かしらの処理を行う。。。などいろいろなことができます。

そして、パラメータをつけてJSONを取得するなどのWebAPIを使用する場合にも使用します。パラメータは下のようにつけてやります。
http://XXX.com/webapi/request/?param1=XXX¶m2=OOOOこんな感じで送信します。

POST

上のようにGETで用が足りてしまうのでPOSTメソッドはいらないだろう。。。そう思った方素晴らしい視点です。
しかし、上のようにパラメータを送信すると渡した値がURLで直接見えるため、セキュリティ的にアウトです。
例えば、URLに"XXX市XXX町2-1"などのように個人情報を含むような情報は送信できません。(情報漏洩です)
なのでPOSTメソッドの出番、となるわけです。

POSTメソッドは、単純にURLに値を渡さない方法です。
送信するURL(リクエスト)はhttp://XXX.comで良いのですが、ここでパラメータ(ユーザー名など)をサーバー側に送信したい場合はフォームに値を設定して送信します。
このようなリクエストをPOSTリクエストと呼びます。

本題

今回のように、HTMLをダウンロードするなどしてファイルを参照するときは、Webサーバーを起動してからAngularを実行する必要があります。
最近のブラウザはセキュリティがかかっているのでサーバーを解さないとエラーで対象のHTMLが取得できません。

実行する

参考サイトのコードをコピって(ちょいと修正して)起動してみると下のように表示できます。

コードは下のようになっています。HTMLとJSを1つのファイルに書いています。(チュートリアルなので、わかりやすいようにしています)、そして実行結果はこちらで確認できます。取得している「test.html」は、ブラウザで表示すれば、ただのテキストですが、取得したものは <div>タグがついています。。。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="myCtrl">

        <p>Today's welcome message is:</p>
        <h1>{{myWelcome}}</h1>

        </div>

        <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $http) {
        $http.get("test.html")
          .then(function(response) {
            $scope.myWelcome = response.data;
          });
        });
        </script>
    </body>
</html>

コードについて

初めにJSが起動します。
var app = angular.module('myApp', []);でアングラーモジュールを作成。
app.controller('myCtrl', function($scope, $http) {でコントローラーを作成します。controller()の第一引数はコントローラー名、第二引数はコントローラーの処理(function)です。
ここで$scopeに設定している変数がHTML側で{{}}で囲っている部分にバインドされます。
なので、上のコード$scope.myWelcomeの値を表示するときは{{myWelcome}}を書けば良いです。

でわでわ。。。



AngularJS カスタム〜BootStrapと合わせて画面の調節をする〜

今回は、BootSrapとAngularJSを併用して画面をカスタムしてみようと思います。目的はのちに、「$http」オブジェクトを使用してデータなどを表示するためです。「$hhtp」オブジェクトの主な用途としては、以下のようなことです。

  1. 他のHTMLとかページを取得する。
  2. WebAPIでオープン・データを取得する。
  3. postリクエストでサーバー側のAP(Loginなど)を起動する。

参考サイトはこちらです。

上のことを実現するために、まずは表示方法を変えなくてはいけないのでそちらの方を先にやります。
そして、今回作成するものは「技術ポータル」サイトを作成したいと思っております。のんびりやるつもりです。

作成したもの

現状のやること

  1. 画面の左サイドバーを横スクロールメニューにする
  2. それに合わせて右サイドバーの幅を広げる
  3. AngularJSでコントロールしたいので変数で調節

なので以下のような修正を加えました。
<HTMLの修正>

        <div class="scrollmenu" style="display:{{leftSideBar_disp}}">
      <a ng-repeat="categ in techCategories" href="#">{{categ}}</a>
    </div>
      <div class="col-sm-3 text-left panel panel-default">
        {{secondMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{thirdMessage}}
      </div>
      <div class="col-sm-3 text-left panel panel-default">
          {{fourthMessage}}
      </div>

<JSの修正>

    // 左のサイドバー
    $scope.leftSideBar_disp = "block";
    $scope.leftSideBar_size = 2;
    // 右のサイドバー
    $scope.rightSideBar_disp = "block";
    $scope.rightSideBar_size = 3;
    var messArray = [];
    // メッセージテキスト設定する
    if (docLang == 'ja') {
        messArray = JAPANESE_MESSAGE;
        $scope.techCategories = JAPANESE_CATEGORIES;
    } else {
        messArray = ENGLISH_MESSAGE;
        $scope.techCategories = ENGLISH_CATEGORIES;
    }

見た目は下のようになりました。

エラーが出たところ

表示するデータ(日本語、英語など)を別のJSファイルに分けたのですが、従来のように「var」で宣言した変数は定数として認識されないようなので「const」で宣言したら直りました。

カスタムの結果

ヘッダメニューの下にカテゴリを選択するような横スライド式のカテゴリ選択する部分を作成しました。
今後はこれらを押下すると、それぞれに対応する画面をメイン部分に表示する。。。というイメージです。

でわでわ。。。



AngularJS チュートリアル6〜モジュールの扱い in W3schooles〜

今回はAngularモジュールの扱いを学習します。
参考ページはこちらです。
前回までに、おぼろげながら理解できた「モジュール」について学習します。

モジュール

早い話がvar app = angular.module('myApp', []);の部分です。
これを変数に取り出しているので「app」j変数を操作することがモジュールの操作になります。
今までは下の様にとりあえずでコントローラーを追加していました。
app.controller('myCtrl', function($scope) {このコントローラーで使用する変数などを画面のHTML部分とバインドして表示・非表示をコントロールできます。

ディレクティブ

今まではng-XXXの部分のみをさしていましたが、今回からは下の様なものもディレクティブと呼びます。というかこちらが正しいのかも?
<ディレクティブ名></ディレクティブ名>
実装の仕方としては以下の様になります。

<!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}}
    <br/>
    <h3>ディレクティブ</h3>
    <w3-test-directive></w3-test-directive>
</div>

<script>
// モジュール
var app = angular.module('myApp', []);
// コントローラー
app.controller('myCtrl', function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
});
// ディレクティブ
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  }
});

</script>
</body>
</html>

こんな感じで、HTMLに外部のHTMLを読み込むことができます。このtemplate: XXXXで指定して入る部分に、HTMLファイルを指定することもできます。
ただし、HTMLファイルを指定するときはtemplateUrl: を使用する様です。
まとめると以下の様になります。

// ディレクティブ
app.directive("w3TestDirective", function() {
  return {
//    template : "<h1>Hello World</h1>" -> html記述
    restrict: 'E',
    templateUrl: './tutorial1.html' // htmlファイル指定
  }
});

実行結果

チュートリアルの初めの方にやったものをディレクティブとして読み込んでいます。

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

でわでわ。。。



AngularJS チュートリアル5〜変数の操作 in W3schooles〜

今回は、AngularJSのコントローラでの変数とHTML(テンプレート)の変数型に着目してみようと思います。
参考サイトはこちらです。

Number型

単純に数値型の扱い方です。しかし、JSでのデータ型はコード上では、とても曖昧なので注意しながらやります。
とりあえずはコードを見ます。

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

<h3>数値の扱い</h3>
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

</body>
</html>

実行結果は下の様になりました。

しかし、これではいまいちよくわからないので、前回作成したものをカスタムして下の様に作って見ました。

<!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">

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

<h3>数値の扱い</h3>
<p>{{quantity}} * {{cost}} = {{ quantity * cost }}</p>

</div>

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

やっぱり$scope.XXXの様に変数を用意してその中に数値を代入してやるということです。これを文字列にすると。。。

文字列の扱い

文字列の場合は、初めの方にやりました。実行結果は下のものになります。

コードは下の様になります。

<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>

結局は変数に文字列を代入するか、数値を代入するかで扱い方が変わってくるということです。

JSの基本

数値は計算することができます。

var num = 2;
var result = 1 + num;

文字列は計算できません。

var num = 'moji';
var result 1 + 'moji'; // "1moji"と表示

下のはchromeの開発ツールでテストしたものです。
![](http://zenryokuservice.com/wp/wp-content/uploads/2019/10/スクリーンショット-2019-10-12-11.43.56.png)

こんな感じで、実装ができます。Angularのポイントが少しずつわかってきました。
## 今迄のまとめ
主要な部品(Angularを使うためのもの)には以下のものがある
1. モジュールvar app = angular.module('myApp', []);
2. コントローラーapp.controller('myCtrl', function($scope) { // 処理内容 }

そして、「$scope」のプロパティ$scope.XXXのXXXがHTMLでの変数名に使用できる({{XXX}})というところがわかってきました。

でわでわ。。。