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

jQuery子要素の取得方法など

jQueryで要素を取得する方法って$(“セレクタ”)しか知らなかったんですが、他にもいろいろあることがわかったのでちょっと紹介。 例えばtrの列の中に横1列に<inpu …

no image

vueでの配列、オブジェクトの反映に関して

vueでのハマりポイントですが、関門としては コンポーネント間の連携 オブジェクトや配列となった時に反映がされない などがあげられると思います。 コンポーネント間の連携に関してはこちらの記事でも書き、 …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

cssフレームワークをnode_modulesから読み込む+cssの拡張

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。 流れを言うと、下記のようになりま …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …