AngularJS (+ Bootstrap & Express.js)

投稿日 2015/07/16

[Home]  | [ディレクティブ] [関数の使用]  | [サービス]  | [フィルタ] 

この記事の内容

この記事は、JavaScript フレームワークの AngularJS の使い方を中心として解説したものです。サンプルには同時に、Bootstrap および Express.js を使用しています。Express.js のテンプレートエンジンには、Jade を使用しています。

AngularJS のクイックスタートとして、下記のページを参照してください。

たちどころにわかる AngularJS


また、関連するページを下記に示します。


AngularJS の概要

AngularJS 特徴ですが、以下のような感じです。

  1. MVC (Model, View, Controller) アーキテクチャ
  2. 2-Way Binding : モデル (データ) を変更するとビューにも直ちに反映される。
  3. HTML を拡張する ng ディレクティブ。
  4. jQuery のサブセットを持つ。これは jQuery が利用できる場合は、jQuery の薄いラッパー (Wrapper) になる。
  5. モデルを加工して表示するためのフィルタ。
  6. モジュール化されたサービス。

MVC (Model, View, Controller) アーキテクチャ

モデルは、要するにビューに表示するデータです。ビューは ng ディレクティブを使用して拡張された HTML で、モデルが埋め込まれています。モデルは {{ }}ng-model ディレクティブを使って HTML に埋め込みます。コントローラは、クライアント・サイドの JavaScript で、ビューのためにサーバから受け取ったデータからモデルを作成したり、ビューからモデルを取得して加工したり、サーバへ送ったりします。


2-Way Binding

例えば、テキストボックスに文字列を入力した場合、他のフレームワークではリアルタイムでその内容を他のコントロールに反映することはできませんが、AngularJS ではリアルタイムで変更を反映することができます。


ng ディレクティブ

AngularJS ではディレクティブにより HTML を拡張しています。これは先頭が ng- で始まる属性として HTML に埋め込みます。また、モデルを表示するときは、特殊シンボル {{ }} を使います。


jQuery のサブセット

jQuery の機能を使う場合は、angular.element() という関数を使います。これは、jQuery の薄いラッパーです。これは、jQuery が使用できないとき(読み込んでいないとき)も利用可能です。


モデルを加工して表示するためのフィルタ

モデル (データ) を表示するには、{{ }} の中にモデルの名称を書きますが、それだけでなくフィルタという機能を利用して加工できます。例えば、モデル string1 を小文字だけにするフィルタは {{ string1 | lowercase }} のように書くことができます。


モジュール化されたサービス

サービスとは、AngularJS で利用可能なオブジェクトです。これらは先頭が $ で始まるシンボルです。例えば、HTTP 通信を行うサービスは、$http という名前です。これらは、モジュール化されていて、使うものだけ読み込むようにできます。それにより、無駄な機能を読み込まないのでスタート時のパフォーマンスが向上します。


AngularJS のひな型

ビュー

Jade の場合

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

HTML (ejs) の場合

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

コントローラ

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

モデル

AngularJS のモデルは本来、ng-model ディレクティブ (あるいは {{ }})で定義した変数です。このひな型では message に相当します。下のコードは、サーバ側でこの message をコントローラへ渡すためのものです (node.js + express 4)。

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

 

 


 

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

 このページの先頭へ..