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

ajaxがらみのイベントの発動とwhenに関して

実務で住所のプルダウンを実装する機会がありました。 [東京都][中央区][明石町] みたいにカテゴリーが2〜3あって連動するプルダウンのパターンです。 これを実装するときのポイントですが、新規保存より …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

複数の非同期処理終了後(when&Promise.all)

JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。 Contents1 when2 Promise_all when j …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。 Contents1 モジュールバンドラ1.1 webpack1.2 lar …