ngController

http://docs.angularjs.org/api/ng.directive:ngController

概要
使用方法
デモ

概要

ngControllerディレクティブは、ビューにコントローラークラスを割り当てます。このディレクティブは、Angularが裏でM(モデル)、V(ビュー)、C(コントローラー)デザインパターンをどのようにサポートするのかの、重要な側面を担います。

AngularのMVCコンポーネントは下記の通りです。

M(モデル): モデルは、スコープのプロパティであり、スコープは紐付けを通してスコーププロパティにアクセスされるDOMに割り当てられます。
V(ビュー): テンプレート(データバインディングされたHTML)が、ビュー内に描画されます。
C(コントローラー): ngControllerディレクティブは、コントローラーのクラスを指定し、このクラスにアプリケーションのビジネスロジックを含めることで、スコープを関数と値によって装飾します。

コントローラーを定義する代わりの方法として、 $routeサービスを経由する方法があることに注意してください。

使用方法

<要素 ng-controller="{expression}">
   ...
</要素>

ディレクティブ情報

このディレクティブは、新しいスコープを作成します。

引数

引数説明 ngController

型：式

グルーバル空間でアクセス可能なコンストラクタ関数名、または現在のスコープのコンストラクタ関数に評価される式を指定します。コントローラーインスタンスは、propertyNameとして指定することによって、スコーププロパティ内に公開することが可能です。

デモ

これは、ユーザーへの連絡情報を編集するシンプルなフォームです。追加、削除、クリア、挨拶のメソッドがコントローラーに定義されています。これらのメソッドは、Angularのマークアップから簡単に呼び出すことが可能です。スコープがこのコントローラーインスタンスのthisになることに注目してください。これによって、コントローラーから容易にビューのデータにアクセス出来るようになります。また、手動で更新する必要なくデータの変更は自動的にビュー内に反映されます。デモでは、2つの異なる定義の仕方をしており、好みに応じてどちらかを使用することが出来ます。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
      Name: <input type="text" ng-model="settings.name"/>
      [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
      Contact:
      <ul>
        <li ng-repeat="contact in settings.contacts">
          <select ng-model="contact.type">
             <option>phone</option>
             <option>email</option>
          </select>
          <input type="text" ng-model="contact.value"/>
          [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
          | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
        </li>
        <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
     </ul>
    </div>
  </body>
</html>

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: '[email protected]'} ];
  };

SettingsController1.prototype.greet = function() {
  alert(this.name);
};

SettingsController1.prototype.addContact = function() {
  this.contacts.push({type: 'email', value: '[email protected]'});
};

SettingsController1.prototype.removeContact = function(contactToRemove) {
 var index = this.contacts.indexOf(contactToRemove);
  this.contacts.splice(index, 1);
};

SettingsController1.prototype.clearContact = function(contact) {
  contact.type = 'phone';
  contact.value = '';
};

it('should check controller as', function() {
  expect(element('#ctrl-as-exmpl>:input').val()).toBe('John Smith');
  expect(element('#ctrl-as-exmpl li:nth-child(1) input').val())
    .toBe('408 555 1212');
  expect(element('#ctrl-as-exmpl li:nth-child(2) input').val())
    .toBe('[email protected]');

  element('#ctrl-as-exmpl li:first a:contains("clear")').click();
  expect(element('#ctrl-as-exmpl li:first input').val()).toBe('');

  element('#ctrl-as-exmpl li:last a:contains("add")').click();
  expect(element('#ctrl-as-exmpl li:nth-child(3) input').val())
    .toBe('[email protected]');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: 'phone', value: '408 555 1212'},
    {type: 'email', value: '[email protected]'} ];
  };

SettingsController1.prototype.greet = function() {
  alert(this.name);
};

SettingsController1.prototype.addContact = function() {
  this.contacts.push({type: 'email', value: '[email protected]'});
};

SettingsController1.prototype.removeContact = function(contactToRemove) {
 var index = this.contacts.indexOf(contactToRemove);
  this.contacts.splice(index, 1);
};

SettingsController1.prototype.clearContact = function(contact) {
  contact.type = 'phone';
  contact.value = '';
};
</script>
  </head>
  <body>
    <div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
      Name: <input type="text" ng-model="settings.name"/>
      [ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
      Contact:
      <ul>
        <li ng-repeat="contact in settings.contacts">
          <select ng-model="contact.type">
             <option>phone</option>
             <option>email</option>
          </select>
          <input type="text" ng-model="contact.value"/>
          [ <a href="" ng-click="settings.clearContact(contact)">clear</a>
          | <a href="" ng-click="settings.removeContact(contact)">X</a> ]
        </li>
        <li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
     </ul>
    </div>
  </body>
</html>

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div id="ctrl-exmpl" ng-controller="SettingsController2">
      Name: <input type="text" ng-model="name"/>
      [ <a href="" ng-click="greet()">greet</a> ]<br/>
      Contact:
      <ul>
        <li ng-repeat="contact in contacts">
          <select ng-model="contact.type">
             <option>phone</option>
             <option>email</option>
          </select>
          <input type="text" ng-model="contact.value"/>
          [ <a href="" ng-click="clearContact(contact)">clear</a>
          | <a href="" ng-click="removeContact(contact)">X</a> ]
        </li>
        <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
     </ul>
    </div>
  </body>
</html>

function SettingsController2($scope) {
  $scope.name = "John Smith";
  $scope.contacts = [
    {type:'phone', value:'408 555 1212'},
    {type:'email', value:'[email protected]'} ];

  $scope.greet = function() {
   alert(this.name);
  };

  $scope.addContact = function() {
   this.contacts.push({type:'email', value:'[email protected]'});
  };

  $scope.removeContact = function(contactToRemove) {
   var index = this.contacts.indexOf(contactToRemove);
   this.contacts.splice(index, 1);
  };

  $scope.clearContact = function(contact) {
   contact.type = 'phone';
   contact.value = '';
  };
}

it('should check controller', function() {
  expect(element('#ctrl-exmpl>:input').val()).toBe('John Smith');
  expect(element('#ctrl-exmpl li:nth-child(1) input').val())
    .toBe('408 555 1212');
  expect(element('#ctrl-exmpl li:nth-child(2) input').val())
    .toBe('[email protected]');

  element('#ctrl-exmpl li:first a:contains("clear")').click();
  expect(element('#ctrl-exmpl li:first input').val()).toBe('');

  element('#ctrl-exmpl li:last a:contains("add")').click();
  expect(element('#ctrl-exmpl li:nth-child(3) input').val())
    .toBe('[email protected]');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function SettingsController2($scope) {
  $scope.name = "John Smith";
  $scope.contacts = [
    {type:'phone', value:'408 555 1212'},
    {type:'email', value:'[email protected]'} ];

  $scope.greet = function() {
   alert(this.name);
  };

  $scope.addContact = function() {
   this.contacts.push({type:'email', value:'[email protected]'});
  };

  $scope.removeContact = function(contactToRemove) {
   var index = this.contacts.indexOf(contactToRemove);
   this.contacts.splice(index, 1);
  };

  $scope.clearContact = function(contact) {
   contact.type = 'phone';
   contact.value = '';
  };
}
</script>
  </head>
  <body>
    <div id="ctrl-exmpl" ng-controller="SettingsController2">
      Name: <input type="text" ng-model="name"/>
      [ <a href="" ng-click="greet()">greet</a> ]<br/>
      Contact:
      <ul>
        <li ng-repeat="contact in contacts">
          <select ng-model="contact.type">
             <option>phone</option>
             <option>email</option>
          </select>
          <input type="text" ng-model="contact.value"/>
          [ <a href="" ng-click="clearContact(contact)">clear</a>
          | <a href="" ng-click="removeContact(contact)">X</a> ]
        </li>
        <li>[ <a href="" ng-click="addContact()">add</a> ]</li>
     </ul>
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。