skillup

技術ブログ

JavaScript

Angular概論 モジュール、コントローラー、スコープなど

投稿日:2017年1月6日 更新日:

Angularインストール

正当な(?)インストール方法としては下記のようにbowerを使ったほうがいいでしょう。

bowerに関してはこちら

ソース

ただ最初のうちはとっつきにくいと思うので下記のように公開されているanuglarのファイルをそのまま読み込んでしまうがもっとも楽です。

ng-modelと書くことにより変数として認識させることができ、{{}}でその変数を使用することができます。

上記の例だと単純すぎてわからないとおもいますが、実務で一番使えるのは下記のような処理ではないでしょうか。

  • 複数行の数値計算(具体的には受注伝票などで明細行の数値計算の合計値を計算など)

これjQueryだけでやろうとするとかなり大変で、不具合の温床になります。

モジュール、スコープとコントローラ

上記は非常に単純な例ですが、一般的にAngularJSではモジュール、スコープ、コントローラといった概念を使うことが一般的です。

 モジュールとは

ものすごく簡単に言うとAngularがアプリを作る際の単位の1つです。

例えば下記の部分をモジュールと呼びます。

myAppというのはモジュール名になります。

またmyAppの横の[]ですが、ここは依存するモジュールがある場合に配列でこの中に定義をします。何もなくても[]で定義しておきましょう。かかないと動きません!

なおエラーを探すのがとても大変です・・

HTML上でng-app=”myApp”と定義して囲ってあるところがモジュールの該当部分になります。

AngularJSまとめ ~モジュール~
AngularJSでモジュールを定義するには?

コントローラーとは

次に紹介するスコープ(HTMLとJavaScriptをつなぐ仕組み)を準備するための仕組みです。

AngularJSのなかで最も基本的な構成単位です。

下記部分がコントローラの登録方法です。

myControllerがコントローラー名で、functionの部分がコンストラクタ関数になります。

下記がHTMLへの反映部分になります。

AngularJSでコントローラーを定義するには?

スコープとは

HTMLとJavaScriptの橋渡しをするサービスです。

ここの$scopeという部分がスコープサービスになります。

ここで変数として使用するとHTMLのほうで、それがそのまま引き継がれ(このことをバインドするなどといいます。)、使用できるようになります。

一連の作業をまとめると、オブジェクト$scopeを引数にとる関数myControllerを用意し、$scopeオブジェクトにmessageを登録し、angular.module()でモジュールappを作詞し、app.controllerでコントローラーmyControllerを登録しています。

 

参考リンク

今はドッ○インストールなのかもしれませんが、昔は初心者救済サイトというと↓のとほほシリーズでしたね。

AngularJS入門

モジュール、スコープとコントローラーの理解でお世話になりました。

AngularJSのControllerとScopeの基礎を学ぼう AngularJS は MVW(hatever)!!!

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

JSでの他ファイル読み込み。requireやimportについて

JavaScriptに関して、知識が非常に古い段階で止まっているのでコツコツとアップデートをしております。 今回はrequireやimportなど、他のファイルの読み込みについてです。 PHPなどサー …

no image

vue-routerと認証など

vue-routerで簡単な認証に関する処理など。 例によって https://github.com/umanari145/admin_tool を題材に。 Contents1 サーバーサイドとのルー …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …

no image

npmでのJSライブラリインストール&ビルド(※Laravel使用時)

JavaScriptのインストールですが、いままではライブラリを1つ1つインストールしてました。 bowerでインストールしたこともあったんですが、読み込み自体は1つ1つしていました。 先日仕事でnp …

アーカイブ