Motomichi Works Blog

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

AngularJS1.x その0004 myAppモジュールを作成して、その構成部品のcontrollerとしてSampleCtrlを登録して使う

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

AngularJSでモジュールを定義するには? - Build Insider

今回やること

AngularJS1.x その0002 ng-controllerを使う - MOTOMICHI WORKS BLOG
の記事おいて非推奨な記述とされていた記述のまま、
AngularJS1.x その0003 ng-clickディレクティブ - MOTOMICHI WORKS BLOG
の記事を書いてしまっていたので、推奨される記述に則って書き直す。

ng-app.jsに記述する内容

例として以下の通り。

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

angularオブジェクトが持っている、moduleメソッドを実行して、モジュールを作成する。
第一引数は必須で、作成するモジュール名。
第二引数も必須で、今回は空の配列を渡している。
第三引数は省略可能なので、今回は省略している。

index.htmlのng-app属性の値として、モジュール名を設定する

以下のように記述した。

<html ng-app="myApp">

モジュール作成の際に第一引数がmyAppだったので、ng-app="myApp"とする。

index.htmlのうちSampleCtrlに対応する部分

前回記述したままで、以下の通り。

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