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

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

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

no image

Angularでのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

no image

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

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

no image

switch(true)イディオム

switch文は通常、文字や数字で分岐をさせることが多いですが、実は条件式を入れることも可能です。 私の場合、正規表現を動的に変えたいケースがあり、検索したところ似たケースがありました。 【JavaS …

アーカイブ