PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのAngularJS入門:

モジュールとコントローラー (1/6)

作成:2015-12-12 09:40
更新:2015-12-12 09:40
■モジュールについて
前回、AngularJSを使ってみましたが、前回のサンプルにはJavaScriptのスクリプトがありませんでした。やはり本格的な処理を実装しようとなると、「スクリプトをどう組み込むか」は重要になります。

AngularJSでは、「モジュール」というものを使ってスクリプトを組み込みます。モジュールというのは、AngularJSで利用される「プログラムのかたまり」のようなものです。AngularJSでは、プログラムはモジュール単位で組み込みます。モジュールの中には、いくつもの小さなプログラムを組み込んでおけます。

AngularJSでは、「ng-app」という属性を指定することで、そのタグ内にAngularJSの機能を割り当てることができました。このng-appを使う際、モジュール名を指定することができるようになっています。例えば、
<body ng-app="hoge">

こんな具合にすると、この<body>タグ内でhogeモジュールの機能が使えるようになる、というわけです。

■コントローラーについて

モジュールは、プログラムをまとめるものですが、これ自体に直接何かの処理が組み込まれるわけではありません。通常は、このモジュールの中に「コントローラー」と呼ばれるものを作成します。

コントローラーは、さまざまな処理や値をまとめたオブジェクトです。このコントローラーにメソッドやプロパティを作成していくことが、「AngularJS流のプログラム作成」だと考えていいでしょう。モジュールの中には、このコントローラーを必要なだけいくつも保管しておくことができます。

コントローラーの利用も、モジュールと同様、タグにコントローラーの指定を記述しておきます。これは「ng-controller」という属性を使います。
<○○ ng-controller="コントローラー名">

これで、この<○○>タグの内部で指定のコントローラーが利用できるようになります。モジュールには複数のコントローラーも置けるので、必要に応じて「この部分ではAコントローラー」というように利用範囲を切り替えけながら使えます。もちろん、複数のコントローラーを同時に利用することも可能です。

モジュールとコントローラー。この2つがどういうものかを理解することが、AngularJS開発の第一歩となります。



 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。


 


「初心者のためのAngularJS入門」に戻る



※その他のコンテンツ