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と比べた場合のVueのメリットなど)

Vueを昨年度ぐらいからコツコツと勉強しています。 正直、その理由の半分ぐらいは「流行っているから」というのが大きいですね(汗) エンジニアとしてはやはり新しい技術自体を追い求めること自体に「快感」の …

no image

AngularJSについて

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

no image

Angular複数ファイルでの読み込み

Angularでいろいろな処理を書いているんですが、処理が膨らんでくると1つのファイルに全ての処理を書いていては当然非効率になります。 ざっくり分けると ほとんどの処理に共通な処理を集めたファイル 特 …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

vue-routerについて

vueでのルーティングに関して。 Vueの場合、いわゆるSPA(シングルページアプリケーション)という用途で使われることがあると思います。 ただその場合でも擬似的なルーティング(URLの切り替えなどに …