モジュールとコントローラー (1/6)
作成:2015-12-12 09:40
更新:2015-12-12 09:40
更新:2015-12-12 09:40
■モジュールについて
前回、AngularJSを使ってみましたが、前回のサンプルにはJavaScriptのスクリプトがありませんでした。やはり本格的な処理を実装しようとなると、「スクリプトをどう組み込むか」は重要になります。
AngularJSでは、「モジュール」というものを使ってスクリプトを組み込みます。モジュールというのは、AngularJSで利用される「プログラムのかたまり」のようなものです。AngularJSでは、プログラムはモジュール単位で組み込みます。モジュールの中には、いくつもの小さなプログラムを組み込んでおけます。
AngularJSでは、「ng-app」という属性を指定することで、そのタグ内にAngularJSの機能を割り当てることができました。このng-appを使う際、モジュール名を指定することができるようになっています。例えば、
こんな具合にすると、この<body>タグ内でhogeモジュールの機能が使えるようになる、というわけです。
モジュールは、プログラムをまとめるものですが、これ自体に直接何かの処理が組み込まれるわけではありません。通常は、このモジュールの中に「コントローラー」と呼ばれるものを作成します。
コントローラーは、さまざまな処理や値をまとめたオブジェクトです。このコントローラーにメソッドやプロパティを作成していくことが、「AngularJS流のプログラム作成」だと考えていいでしょう。モジュールの中には、このコントローラーを必要なだけいくつも保管しておくことができます。
コントローラーの利用も、モジュールと同様、タグにコントローラーの指定を記述しておきます。これは「ng-controller」という属性を使います。
これで、この<○○>タグの内部で指定のコントローラーが利用できるようになります。モジュールには複数のコントローラーも置けるので、必要に応じて「この部分ではAコントローラー」というように利用範囲を切り替えけながら使えます。もちろん、複数のコントローラーを同時に利用することも可能です。
モジュールとコントローラー。この２つがどういうものかを理解することが、AngularJS開発の第一歩となります。
AngularJSでは、「モジュール」というものを使ってスクリプトを組み込みます。モジュールというのは、AngularJSで利用される「プログラムのかたまり」のようなものです。AngularJSでは、プログラムはモジュール単位で組み込みます。モジュールの中には、いくつもの小さなプログラムを組み込んでおけます。
AngularJSでは、「ng-app」という属性を指定することで、そのタグ内にAngularJSの機能を割り当てることができました。このng-appを使う際、モジュール名を指定することができるようになっています。例えば、
<body ng-app="hoge">
こんな具合にすると、この<body>タグ内でhogeモジュールの機能が使えるようになる、というわけです。
■コントローラーについて
モジュールは、プログラムをまとめるものですが、これ自体に直接何かの処理が組み込まれるわけではありません。通常は、このモジュールの中に「コントローラー」と呼ばれるものを作成します。
コントローラーは、さまざまな処理や値をまとめたオブジェクトです。このコントローラーにメソッドやプロパティを作成していくことが、「AngularJS流のプログラム作成」だと考えていいでしょう。モジュールの中には、このコントローラーを必要なだけいくつも保管しておくことができます。
コントローラーの利用も、モジュールと同様、タグにコントローラーの指定を記述しておきます。これは「ng-controller」という属性を使います。
<○○ ng-controller="コントローラー名">
これで、この<○○>タグの内部で指定のコントローラーが利用できるようになります。モジュールには複数のコントローラーも置けるので、必要に応じて「この部分ではAコントローラー」というように利用範囲を切り替えけながら使えます。もちろん、複数のコントローラーを同時に利用することも可能です。
モジュールとコントローラー。この２つがどういうものかを理解することが、AngularJS開発の第一歩となります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ