skillup

技術ブログ

JavaScript

Angular複数ファイルでの読み込み

投稿日:

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。

ざっくり分けると

  • ほとんどの処理に共通な処理を集めたファイル
  • 特定の画面に特化したファイル

になるでしょう。物凄くざっくり分けた場合ですが・・・

プログラムでは上記のように書き、役割分担をすることが当たり前になっていますが、JSでも近年でそのようなことをするのが一般的なようですね。

このためにはコントローラー自体を分割することが重要になってきます。

今ファイルを親コントローラー(parentController)、子コントローラ(childController) ,モジュール登録(app.js)に分けるとします。

parent.controller.js

child.controller.js

app.js

HTML

今までと違うところは関数を変数化し、一番最後のファイルapp.jsで最後にControllerの登録とモジュール作成を行っています。上記のようなControllerの登録の仕方によって親子関係が決まります。子供は親を呼べますが、親は子の変数やメソッドをよぶことができません。

またHTMLでControllerで制御している外は当然影響範囲外になります。

参考図書

AngularJSリファレンス

以前立ち読みした時点ではボコボコだったんですが、今の段階で読むとわかる部分がかなり増えてました。多少古いですが(2014/09)かなりまとまっており、いい本だと思います。

-JavaScript
-

執筆者:


  1. […] Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …

no image

JSでの金額変換で気をつけることなど

以前、ちょっと特集した JSでの画面の金額集計 の続きです。 画面で帳票系のアプリを作ろうとしている時など、画面上の値から金額の合計金額を出すなどがよく見られます。 すごく基本的ですが、PHPに慣れて …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

vueについてのポイント

vueについて学習した時のポイントなどを。 Contents1 機能として確認したこと2 component3 vue-route4 vuex5 computed6 created,mounted7 …

アーカイブ