numalog

ぬまおうの活動日誌

[AngularJS]controller宣言方法について

with one comment

最近、Webアプリケーション作成のためAngular.js勉強中です。
忘れないように自分用のメモもかねて、使い方の紹介など。

サンプルコードなどでは、

function HogeCtrl($scope) {
    $scope.hoge = {"foo":"bar"};
}

とコントローラーを宣言することが多いと思うのですが、
以下の形で宣言したほうがいいです。

angular.module('Controllers', [])
    .controller('HogeCtrl', function ($scope) {
        $scope.hoge = {"foo":"bar"};
    });

利用側

<script>
    angular.module('app', ['Controllers']);
</script>
<html ng-app="app">
~
<div ng-controller="HogeCtrl">
    <h1>{{hoge.foo}}</h1>
</div>

‘Controllers’という名前のmoduleを宣言、その中にHogeCtrlというcontrollerを宣言しています。
この方法の利点は、

  • functionとしてglobal宣言しなくてよい。スコープをより高次に隠蔽できる
  • module同士の依存関係がわかりやすくなる
  • moduleとして独立するので機能分割しやすく、再利用がしやすい

などです。

基本的にはfunctionをつなげていくというより、moduleとして宣言したコンポーネントをつなげていく方針でコーディングするほうが、可読性、メンテナンス性を上げることができるかと思います。
angular.jsのチュートリアルを一通りやり、実際の制作に取り掛かるとき、まずやるべきはmoduleの概念の理解だと感じました。


Written by numa

9月 25th, 2013 at 2:53 pm

One Response to '[AngularJS]controller宣言方法について'

Subscribe to comments with RSS or TrackBack to '[AngularJS]controller宣言方法について'.

  1. viagra cheap fast delivery , http://www.deansart.com.au/scripts/redir.asp?link=http://www.genericpillonline.com , can viagra be bought over the counter what is in viagra viagra main ingredient

    Warrenjusa

    25 5月 16 at 11:29 PM

Leave a Reply