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

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

非同期通信のまとめ($.ajax,fetch,axiosなど)

非同期通信処理に関して、年明けに少し調べたのでメモします。 非同期通信に関しては長い間、$.ajaxを使っておりました。 フロント側でそれほど複雑な処理をやらなかった、昔覚えたのでそのまま・・ってパタ …

no image

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

携帯のUIに関して

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