Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

AngularJS1.x その0005 Controller as構文を使う

参考にさせて頂いたページ

AngularJSの$scopeをController as で置き換えるべき理由 - Qiita

ng-app.jsの記述内容

// myAppモジュールを作成
var app = angular.module('myApp', []);
// myAppモジュールにSampleCtrlコントローラーを登録
app.controller('SampleCtrl', function() {
  // デフォルトの値を設定
  this.msg = 'こんにちは、誰かさん!';
  // ng-click="sample.onclick"なので、this.onclickメソッドを定義
  this.onclick = function() {
    this.msg = 'こんにちは、' + this.name + 'さん!';
  };
});

index.htmlの記述内容

<div ng-controller="SampleCtrl as sample">
  <input type="text" ng-model="sample.name" />
  <button ng-click="sample.onclick()">送信</button>
  <div>{{sample.msg}}</div>
</div>

このソースコードについて

前回の記事AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う - MOTOMICHI WORKS BLOGをもとにして少し変更した。

まずng-controller="SampleCtrl as sample"とすることで、このdivの範囲内で使用するsampleと、ng-app.js内のthisが紐付く。

ng-app.js内では、今回$scopeを使用していないので、引数$scopeを削除した。

Controller as構文の優位性について

コントローラーに親子関係がある場合は「Controller as構文を使用する方が優位性がある」という事について、 参考にさせて頂いたAngularJSの$scopeをController as で置き換えるべき理由 - Qiitaに詳細に書かれており、またそのときがきたら復習しようと思う。