AngularJS をちょっとだけ勉強中。

AngularJS は MVC 構造を導入しやすいフルスタックな JavaScript フレームワーク。

フルスタックなので、JS側では AngularJS 以外にライブラリを導入しなくても良いのでラク。

フルスタックフレームワークとはUIやDB、セキュリティなどの基本的な問題領域にAll in oneな環境を提供するもの

各コンポーネント毎のフレームワークではそれらを組み合わせて動作させることに一定以上の複雑さが有り、特別なノウハウが必要となる。

フルスタックフレームワークでは組み合わせることの相性の問題が無く、ビジネスロジックに集中することが可能となる。

フルスタックフレームワークとは - はてなキーワード

今回作成したサンプルは、入力したテキストをリアルタイムで加工して表示する仕組みのベースになるコード (パソコン用Webブラウザ向けサンプル)。

Model となるデータオブジェクトが2つ、コントローラーが1つのシンプルな構成。 Input 要素の状態が変わると、 ng-model 属性で紐付けられた $scope.myInput の値が自動的に変わる。同時に keyup イベントを拾って $scope.myCard にも値を反映させる仕組み。


<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>AngularJS : Message Card Sample</title>
</head>
<body>
 
<div ng-controller="MessageCardController">
  <div id="input-view" style="border: double 3px #00ff00;">
    <div>Input Your Message</div>
    <div><input type="text" ng-model="myInput.title" ng-keyup="changeTitle()"></input></div>
    <div><input type="text" ng-model="myInput.message" ng-keyup="changeMessage()"></input></div>
  </div>
  <div id="card-view" style="border: double 3px #0000ff;">
    <div>Message Card</div>
    <div>title: {{myCard.title}}</div>
    <div>message: {{myCard.message}}</div>
  </div>
</div>
 
<script src="http://www.nilab.info/lib/js/angular/1.3.0/angular.min.js"></script>
 
<script>
var myAppModule = angular.module("myApp", []);
 
myAppModule.controller("MessageCardController", function($scope){
 
  var data = {
    title: "input your title",
    message: "input your message"
  };
 
  $scope.myInput = data;
  $scope.myCard = {};
 
  $scope.changeTitle = function(){
    console.log("changeTitle:" + $scope.myInput.title);
    $scope.myCard.title = $scope.myInput.title;
  };
 
  $scope.changeMessage = function(){
    console.log("changeMessage:" + $scope.myInput.message);
    $scope.myCard.message = $scope.myInput.message;
  };
 
  $scope.changeTitle();
  $scope.changeMessage();
});
</script>
 
</body>
</html>

サンプルはこちら → AngularJS : Message Card Sample

参考書籍として AngularJS アプリケーション開発ガイド を読んでいる。AngularJS 1.2 に対応した本なので、最新バージョンの AngularJS 1.3 系だとエラーが出ることもあるので注意。

Posted by NI-Lab. (@nilab)