AngularJS アドバイス

初心者です
JavaScriptのフレームワークのAngularJSを少しだけ勉強しました
勉強のため簡単に電卓のアプリでも作ろうと思ってなんとなく途中までコードを書いたのですが、サービスとか役割分担？あってるでしょうか
使い方とかこうした方が良いよとかアドバイスが欲しいです

###該当のソースコード
HTMLのコード(とりあえずbodyだけ)

<p>
  <ons-input id="text" name="text"  modifier="underbar" ng-value = "{{text}}" ng-model="text"></ons-input>
</p>
<!-- 4 * 4のボタンテーブル -->
<table>
     <tr ng-repeat="col in btns">
        <td ng-repeat="row in col">
            <section>
                <ons-button modifier="large" ng-click="onclick(row)">{{row}}</ons-button>
            </section>
        </td>
    </tr>
</table>

JavaScriptのコード
angular.module('myApp', ['onsen','ngStorage'] )

//ボタン
.value('btnsValue', [
    [7,  8,  9, '÷'],
    [4,  5,  6, '×'],
    [1,  2,  3, '-'],
    ['.',0,'=', '+'],
])

//計算とか サービス
.service('calcService',function() {
    this.text = '';
    this.num1;
    this.num2;
    this.plus = function() {
    }
    this.minus = function() {
    }
    this.multiplied = function() {
    }
    this.divided = function() {
    }
})

//コントローラ
.controller('MyController', ['$scope','btnsValue','calcService',
function($scope,btnsValue,calcService) {
    $scope.btns = btnsValue;
    //クリック
    $scope.onclick = function(num) {
        //押したボタンが数字かどうか
        if(!isNaN(num)) {
            
            
        //演算子ボタンを押した       
        } else {
            switch(num) {
                case '÷': $scope.text = calcService.plus();
                            break;
                case '×': $scope.text = calcService.minus();
                            break;
                case '-': $scope.text = calcService.multiplied();
                            break;
                case '+': $scope.text = calcService.divided();
                            break;            
            }
        }
    }
}]);

行動規範の内容に同意します

回答1件

ベストアンサー

全体的に綺麗にまとまっていると思いました。
何点か気付いた点を記載します。

好みの問題ですが、AngularJSで$scopeを使うことについては色々と議論があり、as記法というものを推奨するような流れもあります。
参考
as記法が気に入れば、これを用いることも検討されても良いかと思います。なお$scopeが悪いということではありません。

btnsValueはValueで定義されていますが、利用するのがMyControllerだけであればController内に記載してもよいかと思います。calcServiceも同様です。
他のControllerやServiceで利用することを前提とするのであれば今回のような役割分担で良いかと思います。

tableタグを用いておられますが、OnsenUIではテーブルを表現するためのons-row、ons-colというタグが提供されています。利用が可能であれば検討してみても良いかと思います。

以上です。

投稿2017/03/18 09:30

akabee

総合スコア1947

atc

2017/03/18 10:37

回答ありがとうございます！ as記法挑戦してみますまた、いくつか質問なのですが、・前に調べた時、コントローラーはスコープのセットアップに徹して、ビジネスロジックはサービスとして切り出すべきっていうのを見たのですが今回みたいに1つのコントローラーならサービス特に必要ないのですか？・自作ディレクティブとはどういう時に使えば良いのでしょうか

akabee

2017/03/19 08:58

＞コントローラーはスコープのセットアップに徹して、ビジネスロジックはサービスとして切り出すべきどういう文脈で語られたのかちょっと分かりませんが、AngularJSの提供元でもあるGoogleはAngularJSのことをMVWフレームワークと言っていたように記憶しています。WはWhateverの略で、Model-Viewの他はなんでもアリってことです。いろいろな使い方をしてみて、自分に合う書き方を考えればよいのではないでしょうか。私個人としては、Serviceは「他のControllerで共有する値や処理で利用する」というような使い分け方をしています。Controller間での値の受け渡しや共有が難しいためです。そういう意味で言えばロジックは基本的にServiceで定義しておけば、Controllerでは依存性注入するだけで共有して使えますからビジネスロジックをServiceに記述するのというのは正しいとも言えそうです。ただし「このServiceを使うには同時にこのValueの依存性も必要」などということになってくると後での再利用が難しくなる可能性があります。今回のコードでも、calcServiceを使うにはbtnsValueの依存性が必要ですよね。btnsValueはcalcServiceのプロパティとしても良いのかもしれません。そのへんを良しとするか悪とするか、どのような書き方であれば自分が見やすいか、試行錯誤しながら固めていかれるのがよいのではと思います。＞自作ディレクティブとはどういう時に使えば良いのでしょうかディレクティブはHTMLタグに対して様々な処理を付加する機能です。HTMLタグを作ってしまうこともできます。必要がなければ使わなくても良いとは思うのですが、UI上でのイベント処理関連では役に立つことも多いです。例えば以下GitHubに「長押し」時の処理を実現するためのディレクティブが公開されています。必要なHTMLタグにon-long-pressという属性を与えれば、長押しの処理が実現できます。Controllerでも実現できなくはありませんが、どのHTMLタグに対して長押しの処理を実行するか実行しないかは例えばHTMLタグのidを判断して実行可否を決定するなどの処理が必要になるかもしれません。その点ディレクティブであれば必要なHTMLタグに対し自作の属性を付与すれば良いというだけになります。 https://gist.github.com/BobNisco/9885852 また確かOnsenUIv1もディレクティブで作られていたような気がします。デザインをCSSに死ぬほど書くよりもディレクティブでHTMLタグを作ってしまったほうがスマートといえるかもしれません。なんにせよ、必要に迫られれば使うということで良いと思います。

atc

2017/03/19 10:40

分かりやすい解説ありがとうございます！勉強になりました自分なりに考えながらやりたいと思います

akabee

2017/03/19 12:13

頑張ってくださいね～

行動規範の内容に同意します