質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    1010questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    578questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

AngularJS アドバイス

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 962

atc

score 1

初心者です
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;            
}
}
}
}]);
    

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

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

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

以上です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/18 19:37

    回答ありがとうございます!
    as記法挑戦してみます

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

    キャンセル

  • 2017/03/19 17: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タグを作ってしまったほうがスマートといえるかもしれません。
    なんにせよ、必要に迫られれば使うということで良いと思います。

    キャンセル

  • 2017/03/19 19:40

    分かりやすい解説ありがとうございます!
    勉強になりました

    自分なりに考えながらやりたいと思います

    キャンセル

  • 2017/03/19 21:13

    頑張ってくださいね~

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17496questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Monaca

    1010questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • AngularJS

    578questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。