AngularJSの基本原則

4. コントローラ

コントローラは、AngularJSアプリケーションのロジックを担当します。コントローラ内では、モデルを管理し、ビューにデータを提供する役割を担います。コントローラは、アプリケーション内の特定の部分（例えば、特定の画面や機能）に関連付けられます。

コントローラを定義するには、次のようにangular.moduleとcontrollerを使用します。

javascript
CopyEdit
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.message = "Hello, AngularJS!";
});

この例では、myCtrlというコントローラが定義され、$scope.messageがビューに提供されています。ビューで{{ message }}として表示されます。

5. 依存性注入

依存性注入（DI）は、AngularJSの重要な特徴の一つです。DIは、モジュール間でサービスやコンポーネントを簡単に渡すことを可能にし、コードの可読性とテストのしやすさを向上させます。AngularJSでは、サービスやコントローラ、ディレクティブなどが依存関係を必要とする場合、その依存関係をコンストラクタに注入することで管理します。

例えば、HTTPリクエストを送信するために、$httpサービスをコントローラに注入することができます。

javascript
CopyEdit
app.controller('myCtrl', function($scope, $http) {
  $http.get('data.json').then(function(response) {
    $scope.data = response.data;
  });
});

ここでは、$httpサービスをコントローラに注入して、外部からデータを取得しています。

6. サービスとファクトリー

AngularJSでは、サービスとファクトリーを使って再利用可能なコードを作成します。サービスはオブジェクトや関数を提供し、アプリケーション全体で共有できます。ファクトリーは、サービスのインスタンスを作成するための関数を返します。

javascript
CopyEdit
app.factory('myFactory', function() {
  var factory = {};
  factory.getData = function() {
    return "This is some data";
  };
  return factory;
});

この例では、myFactoryファクトリーがgetDataメソッドを提供し、他のコンポーネントで共有できるようにしています。

7. ルーティング

AngularJSには、シングルページアプリケーション（SPA）を作成するためのルーティング機能があります。これにより、URLが変更されてもページ全体のリロードをせずに、異なるビューに遷移できます。$routeProviderを使用してルートを定義し、異なるコントローラとビューを関連付けます。

javascript
CopyEdit
app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'homeCtrl'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'aboutCtrl'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

このコードでは、/homeと/aboutというルートが定義され、それぞれ異なるテンプレートとコントローラが関連付けられています。

8. フィルター

AngularJSでは、データを表示する際に加工するためのフィルターを使用できます。フィルターは、ビューで表示するデータをフォーマットしたり、並べ替えたり、検索したりするために使用されます。

例えば、日付を特定のフォーマットに変換するdateフィルターを使用することができます。

html
CopyEdit
<p>{{ currentDate | date:'yyyy-MM-dd' }}p>

このコードは、currentDateをyyyy-MM-ddの形式で表示します。

9. テスト

AngularJSはテストに非常に重視しており、ユニットテストと統合テストを簡単に行うことができます。AngularJSでは、ngMockモジュールを使用して、コントローラやサービス、ディレクティブなどのテストを行います。テストフレームワークとしては、JasmineやMochaなどがよく使用されます。

javascript
CopyEdit
describe('MyController', function() {
  var $controller;
  beforeEach(module('myApp'));
  beforeEach(inject(function(_$controller_) {
    $controller = _$controller_;
  }));

  it('should set message on the scope', function() {
    var $scope = {};
    var controller = $controller('myCtrl', { $scope: $scope });
    expect($scope.message).toBe("Hello, AngularJS!");
  });
});

このテストでは、myCtrlコントローラが$scope.messageを正しく設定していることを確認しています。

10. 結論

AngularJSは、強力なデータバインディング、ディレクティブ、コントローラ、サービス、依存性注入など、多くの機能を提供し、複雑なウェブアプリケーションの開発を効率化します。これにより、開発者は短期間で高品質なアプリケーションを作成できるようになります。AngularJSは、SPAの構築に最適なフレームワークであり、特に大規模なプロジェクトでその真価を発揮します。

AngularJSを学ぶことで、動的でインタラクティブなウェブアプリケーションの開発において、より高い生産性を実現できます。