たちどころにわかる AngularJS

 [Home]  | [旧版の内容を表示する。]

v1.3.x 対応版 投稿日 2015/07/13

 

使いどころ

jQuery が HTML DOM をわかりやすく簡略に記述できるのに対し (つまり、HTML DOM を扱うのに対し)、AngularJS はもっと上位層のフレームワークである。したがって、ある目的には AngularJS を使ったほうが簡単で見やすいコードを書くことができる。具体的には、HTML DOM に密着してなくて、MVC 的な思想で動作するアプリケーションを作るのに向いている。

一方、AngularJS は HTML を拡張したようなフレームワークで、ng-**** というディレクティブを HTML に埋め込み、これらと JavaScript のコントローラと連携する。HTML に埋め込まれた ng-***** はモデルやビューのマークのような働きをする。


ひな型

ビュー

AngularJS アプリケーション用 HTML (ビューに相当) の簡単なひな型を示す。


<!DOCTYPE html>
<html ng-app="app1">
  <head>
    <meta charset="utf-8">
    <title>AngularJS ひな型</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="/js/angular/contoller1.js"></script>
  </head>
  
  <body>
    <h1>AngularJS ひな型</h1>
    <div ng-controller="controller1">
      <p style="text-align:center;">{{message}}</p>
    </div>
  </body>
</html>

コントローラ

コントローラは、JavaScript ファイルとして作成する。ビューのひな型でコントローラ名が "controller1" となっているが、JavaScript ファイルは必ずしも "controller1.js" である必要はない。しかし、わかりやすさの面から同じ名前にしておいた方がよい。

コントローラとビューのひもづけは、html タグで指定した ng-app="app1" と div タグで指定した ng-controller="controller1" により行う。

下の例は、ng-app="app1" でアプリケーションを特定し、さらに ng-controller="controller1" により、このコントローラが関与すべきモデルの位置を特定している。

/* コントローラ controller1.js */
var app1 = angular.module("app1", []);
app1.controller("controller1", function($scope, $http) {
  $http.get('/test')
    .success(
      function(response) {
        $scope.message = response;
      }
  );
});

モデル

モデルとは要するにデータであり、前に出てきたビューとコントローラの例で言えば、"message" に相当する。ビューでは、{{message}} として、モデルであることを示している。コントローラでは、$scope.message = response; としてサーバから受け取ったデータをビューから見えるように $scope (これはビューに対する可視オブジェクト) のメンバ message として設定している。

コントローラで response はサーバから送られてきたオブジェクトであるが、具体的には JSON が使われることが多い。一例としてサーバ側は以下のようなコードになる (node.js + express の例)。

var express = require('express');
var router = express.Router();
// ハンドラ
router.get('/test', function(req, res) {
  res.json('テスト');
});

 

 


 

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。

 このページの先頭へ..