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

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

こちらのリンクでJSのnpmパッケージでのインストール&ビルドをしたので、gulpでのビルドを。 前提条件としては nodeのインストール npmのインストール がされていればOKです。 最小構成でい …

no image

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

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

no image

JavaScript 変数、配列、オブジェクト、スコープ、関数、オブジェクトの基本について

日頃業務で使っているJavaScriptについて。自分的なメモです。 Contents1 変数定義2 配列の定義2.1 展開3 オブジェクトの定義3.1 展開4 関数4.1 スコープ4.2 即時関数4 …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …