skillup

技術ブログ

JavaScript UI デザイン

Angularモジュール間の読み込み

投稿日:2017年3月21日 更新日:

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

プログラムでこれらを役割分担させるようにAngularでも分けることが一般的なようです。これら1つ1つの部品のことはモジュールと呼ばれます。

AngularJSでは書き初めに、

のように定義しますが、これが1つ1つのモジュールになります。

基本的にはこの単位でモジュールをつくりますが、最初は[”]で書いているものが多いと思いますが、他のモジュールを読み込む場合はここに別のモジュールを引数として取ることになります。

モジュールを細分化して読み込む

例えば空白チェックをするようなユーティリティーのモジュールを作るとします。ファイル名util.jsとします。

その場合、Serviceというサービスを登録して、モジュールを作り、これを使うことが多いようです。

util.js

これを実行させたいファイルで読み込む場合下記のようになります。

※似たようなものにFactoryというサービスもあります。

違いなどは下記リンク参照。

Angular.jsのServiceとFactoryの違いを考える

constant

また設定情報などを格納するサービスとしてはconstantというものがあります。

こちらも下記のようにしてモジュール登録し、呼び出したい側で読み込めばOKです。ファイル名をconstant.jsとします。

constant.js

呼び出したい側

環境毎にAngularJSのconstantを切り替える方法

-JavaScript, UI, デザイン
-

執筆者:


comment

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

関連記事

no image

フォーカス時のみ書き込み可能になるHTML要素について。contenteditableなど

通常はただのテーブル(or普通のHTML)ですが、クリックするとinputになり、入力が可能になる手法について。 contenteditableなど 普通のHTML要素に [crayon-63822b …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

vueの環境構築

vueについて勉強したことなどを。 Contents1 vueとは?1.1 方法1 CDN1.2 方法2 npm+コンパイル vueとは? 近年のJavaScriptフレームワークの一種で「双方向デー …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

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

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

アーカイブ