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

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

画面系の小さい小ネタなど。 Contents1 position:sticky2 datalist(プルダウン+自由入力) position:sticky ヘッダーに関して画面をスクロールすると、付い …

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

メインで使う画像のcssについて

CSSについていろいろと勉強したんですが、画像の使いに関して結構てこずったんでポイントをまとめておこうかと。 画像といっても商品の画像などワンポントでなくメインで使うタイプのものです。 imgタグをd …

no image

Angularでのfilter

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

no image

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

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

アーカイブ