AngularJS入門01

2016年03月28日
CATEGORY- 1. 技術力｛技術情報｝

AngularJSの特徴

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オブジェクトを作成するファクトリーです。

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

2016年03月28日
CATEGORY- 1. 技術力｛技術情報｝

AngularJS入門01

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG