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

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

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

no image

webpackについて再履修

webpackについて今まで見よう見まねでやってきましたが、おまじないのような感じでプロパティ内部までしっかり理解しているとは言い難いため、再履修です。インストールとかは省略。 今まで書いた既存のwe …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

AngularJSでのDB接続

AngularJSでデータベースへのアクセスをしたいときの処理を記述します。 注意点としては、なんといっても非同期なことです。同期させることも無理ではないようですが、基本非同期ですので、この点を理解し …