SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用

今話題の「AngularJS」と「Wijmo(ウィジモ)」連携で広がる可能性

jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用 第8回

  • このエントリーをはてなブックマークに追加

簡単なサンプルでAngularJS入門

 Wijmoと連携させるサンプルの前に、AngularJSのみを用いたシンプルな実装例をリスト1に示します。

リスト1 AngularJSのシンプルな実装例(001_angularjs_sample1.html)
<!DOCTYPE html>
<html ng-app="MyApp"> <!-- モジュールを指定 ...(1)-->
<head>
<meta charset="UTF-8">
<title>簡単なAngularJSのサンプル</title>

<!-- AngularJS ...(2) -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js" type="text/javascript"></script>

<script type="text/javascript">
    // モジュールを定義 ... (3)
    var myApp = angular.module("MyApp", []);

    // モジュールにコントローラーを定義 ...(4)
    myApp.controller("MyController", function($scope) {
        // スコープに変数を設定
        $scope.text = "AngularJS";
        // スコープにメソッドを設定
        $scope.getHelloMsg = function() {
            return "Hello to " + $scope.text + " !!";
        };
    });
</script>

</head>
<!-- bodyタグ内でMyControllerを参照  ...(5)-->
<body ng-controller="MyController">
<h1>簡単なAngularJSのサンプル</h1>

<p>入力:
<!-- 入力値を変数textにバインド      ...(6)-->
<input ng-model="text" style="width: 200px;" /> 
</p>
<!-- 変数textの値を表示              ...(7)-->
<p>入力内容: {{text}}</p>            
<!-- getHelloMsgメソッドの結果を表示 ...(8)-->
<p>ごあいさつ: {{getHelloMsg()}}</p> 

</body>
</html>

 まず(2)はAngularJSのJavaScriptファイルを読み込む記述です。

 次に(1)(3)(4)について説明します。AngularJSには「モジュール」「コントローラー」「スコープ」という概念があります。モジュールは機能をグループ分けする単位で、コントローラーは機能を実現するための変数やメソッドをスコープに設定し、スコープはHTMLに対して変数やメソッドを公開します。(3)は「MyApp」というモジュールの定義です。(1)では(3)のMyAppモジュールをこのHTMLで使用するように指定しています。また(4)ではMyAppモジュールに「MyController」というコントローラーを定義し、$scope変数(=スコープ)に変数やメソッドを設定しています。

 (5)はMyControllerをbodyタグ内で使用することを表しています。(6)ではAngularJSが提供するng-modelディレクティブを用いて、スコープに含まれる変数textをinput要素にバインド(関連付け)しています。(7)(8)はスコープに含まれる変数textの内容とgetHelloMsgメソッドの返り値をHTMLに反映する記述です。「{{(変数名またはメソッド)}}」という記述の箇所に変数の内容やメソッドの戻り値が挿入されます。

 リスト1を実行すると、変数textの初期値である「AngularJS」がHTMLに反映されて表示されます。

図1 リスト1を表示させた直後の状態(001_angularjs_sample1.html)
図1 リスト1を表示させた直後の状態(001_angularjs_sample1.html)

 この状態からテキストボックスの内容を書き換えると、書き換えた内容がHTMLに反映されます。

図2 テキストボックスを書き換えるとHTMLの表示が変化(001_angularjs_sample1.html)
図2 テキストボックスを書き換えるとHTMLの表示が変化(001_angularjs_sample1.html)

 これはテキストボックスと変数textがバインドされた結果、テキストボックスの内容変化が変数textに反映され、さらに変更された内容がHTMLにリアルタイムで反映されたためです。このようにAngularJSを用いると、JavaScript変数のデータと、HTMLの表示内容を同期させることが可能です。この仕組みを双方向データバインディングと呼びます。

 なおAngularJSについてはCodeZineで別の連載がありますので、AngularJSそのものに興味がある方はそちらも読んでみてください。

次のページ
連携機能を使ってWijmoでAngularJSの機能を利用

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
jQuery UIの標準ウィジェットを補完する高機能ライブラリ「Wijmo」の活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLDB/PEAR/Smarty)」「独習シリーズ(ASP.NET/PHP)」「10日でおぼえる入門教室シリーズ(ASP.NET/PHP/Jakarta/JSP&サーブレット/XML)」「Pocket詳解辞典シリーズ(ASP.NET/PHP/Perl&CGI)」「今日からつかえるシリーズ(PHP/JSP&サーブレット/XML/ASP)」「書き込み式 SQLのドリル」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8313 2014/12/08 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング