KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

AngularJS入門01

LINEで送る
[`evernote` not found]
Pocket

AngularJSの特徴
misawa01

AngularJSとはGoogleとコミュニティにより開発されたJavaScript(MVW *1)フレームワークです。データバインディング、DI(依存注入)などの機能を保有し、複雑なアプリケーションもシンプルに実装可能です。
*1 「MVW」とは「Model View Whatever」の略で、「Model」「View」「その他何でも」という意味です。

AngularJSの主な機能

1.テンプレート機能
HTMLをベースにコントローラー内の変数を「View」に表示しますが、
AngularJSは他のMVXフレームワークとは異なり、「Directive」という仕組みを持っています。Directiveは「属性、要素」をユーザが独自に定義し、一つの独立した機能を作成することができる。これは、AngularJSの作り全体に関わることで、非常に重要な機能です。「Directive」に関してはまた別の回で詳しく説明したいと思います。
AngularJSのView作成時にテンプレートへの埋め込みをこのDirectiveを利用して記述しています。
下の例は

タグ内にコントローラー内のnameという変数を結びつけて内容が表示されます。

var app = angular.module('MainApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'AngularJS';
});
<!DOCTYPE html>
<html ng-app="MainApp">
  <head>
    <meta charset="utf-8" />
    <title>1.テンプレート機能</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p ng-bind="name"></p>
  </body>
</html>

Sample: [http://embed.plnkr.co/OebiMtziZumq8AjGZbJ0/]

この例は上の例と同様

タグ内にコントローラー内のname変数の内容が表示されます。

var app = angular.module('MainApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'AngularJS';
});

2.双方向データバインディング
コントローラー内のモデルとViewを双方向で結びつけることで、Model <=> View間が双方向でバインディングされます。
下のサンプルはコントローラー内のModel[name]を<input>タグのValueと

タグのViewで共有しています。
<input>タグのValueを変更すると、その変更がModel、タグのViewの順に伝わりViewの内容も変更されます。

<input type="text" ng-model="name">
<div ng-bind="name"></div>
<!DOCTYPE html>
<html ng-app="MainApp">

<head>
  <meta charset="utf-8" />
  <title>2.双方向データバインディング</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" ng-model="name">
  <div ng-bind="name"></div>
</body>

</html>

Sample: [https://embed.plnkr.co/DX6uXGS035djKmfGJ9MP/]

3.DI(依存性注入)
「DI(依存性注入) – Dependency Injection」とは、「オブジェクトに必要な情報を外部で設定する手法」です。
SpringやSeaser2でおなじみの手法です。
下のサンプルはMainFactoryという外部ファクトリーをMainCtrlにDIし、
コントローラー内で`getName()`メソッドが呼び出されています。
getName()メソッドは「AngularJS」という文字列が返され、
$scope.message変数に格納されます。

var app = angular.module('MainApp', []);

app.controller('MainCtrl', ['$scope','MainFactory', 
  function($scope, MainFactory) {
      $scope.message = MainFactory.getName();
  }
]);

app.factory('MainFactory', [ 
  function($scope) {
    mainFactory = {};
    mainFactory.getName = function() {
      return 'AngularJS';
    }
    
    return mainFactory;
  }
]);
<!DOCTYPE html>
<html ng-app="MainApp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <p ng-bind="message"></p>
  </body>
</html>

Sample: [https://embed.plnkr.co/OAF6qQIb9DtXyWbw6rEP/]

4.ルーティング機能
ngRouteとngViewを使用して画面遷移を行わず、画面の一部を書き換える機能を実現します。
シングルページアプリケーションの作成には欠かせないモジュール群です。

=> 次回以降で詳しく紹介します。

5.Ajax通信機能
AngularでAjax通信を実現するには、何通りかの方法があります。
代表的なものとしては、以下の2種類があります。

「$http」モジュール
$httpサービスは、Angularサービスの中でも核となる機能で、 ブラウザのXMLHttpRequestオブジェクト、
またはJSONPを通じてリモートHTTPサーバーと通信する機能です。

「ngResource.$resource」モジュール
$resourceはRESTfulによるサーバサイドとのデータ受け渡しを行うresourceオブジェクトを作成するファクトリーです。

=> 次回以降で詳しく紹介します。

【関連記事】
Google App Engine 第一回
Google App Engine 第二回
Javaのライブラリを手軽にテストしたい!! Groovy入門 第1回
Google App Engine 第三回
Google App Engine 第四回
Google App Engine 第五回
Google App Engine 第六回
Google App Engine 第七回
Google App Engine 第八回
Google App Engine 第九回
Google App Engine 第十回
Google App Engine 第十一回
Google App Engine 第十二回
AngularJS入門01

LINEで送る
[`evernote` not found]
Pocket