AngularJSプロジェクトを保守しやすくするためにやっておくべき5つのこと

いなば

2015.08.04

4. Controller As記法を使う

Controller As記法を使うべき理由はこちらになります

参考：Digging into Angular’s “Controller as” syntax
http://toddmotto.com/digging-into-angulars-controller-as-syntax/

参考記事ではコントローラーを入れ子にして、それぞれのコントローラーで同じ名前のプロパティを参照した場合の例について解説がされています。

AngularJSではコントローラーを入れ子にした場合に、子コントローラーは親コントローラーのscopeを参照することができますが、階層が深くなると

データがどこから来たのかわかりずらくなる
スコープの値の変更が想定していないところに影響する

というデメリットがあります。

Controller As記法であれば、そのプロパティがどのコントローラーに属しているのかが一目でわかるようになり、意図しないバグを防ぎやすくなります。

日本語で書かれた記事もありますのでこちらもどうぞ。

AngularJSの$scopeをController As で置き換えるべき理由
http://qiita.com/Quramy/items/e55ba394031794236fc9

5. UIコンポーネントはディレクティブ化する

特にJSの処理がないUIコンポーネントでもどんどんディレクティブ化しています。
ディレクティブにするメリットには、

viewのHTMLが簡略化されてスッキリする
ディレクティブのHTMLテンプレート一箇所を直せばすべてに修正を反映できる

などがあります。

ディレクティブはOOCSS（オブジェクト指向CSS）な設計と相性がよいなと思っていて、ディレクティブ名とcssクラス名を同じ名前にしておくことで、CSSのクラス名のバッティングが回避しやすいです。
さらにこのパターンの利点としてHTMLの記述があちこちに散らないので、コンポーネントの設計が変わってもディレクティブのテンプレートのHTML一箇所だけを修正するだけで済むので改修に強くなります。

ただし、それぞれが好き勝手にオレオレ実装をしていってしまうとかえって破綻する危険性もあります。
事前にルールを決める&ドキュメントを用意するなどしましょう。

angular.module('directives').directive('btn', [
    function(){
        return {
            template: function(element, attrs){
                var type = attrs.type || 'default';
                return '<a href="{{::href}}" class="btn btn-{{::type}}" ng-transclude></a>';
            },
            restrict: 'AE',
            transclude: true,
            scope: {
                type: '@',
                href: '@'
            }
        }
    }
])

使用例

<btn href="#" type="default">default</btn>

展開後

<btn href="#" type="default" class="ng-isolate-scope">
    <a href="#" class="btn btn-default" ng-transclude="">
        <span class="ng-scope">default</span>
    </a>
</btn>