【AngularJS】ng-appとモジュールについて

この記事は､以下の開発環境のもと行っています｡
AngularJSの記事を書いていく上での開発環境

ng-appとは

AngularJSの機能を有効/無効の切り替えを行うためのもの。

以下に、"ng-app"を記述しているとしていない場合のソースコードと結果を示す。

記述していない

<body>
	<p>{{ 3 + 4}}</p>
</body>

出力結果:
f:id:shinji-fsi-5761:20161002173038p:plain

記述している

ソースコード:

<body ng-app>
	<p>{{ 3 + 4}}</p>
</body>

出力結果:
f:id:shinji-fsi-5761:20161002173045p:plain
{{…}}は"Angular式"と呼ばれる。
式の中に記述された結果を出力してくれる。
式には、単純な数式の他に、"ng-bind"で設定した値なども入力することができる。("ng-bind"については後日)
今回の例では、"ng-app"が無効になっている方は、『{{ 3 + 4 }}』と､文字列で表示されているが､有効になっている方は『7』と出力されていることがわかる｡
以上が､"ng-app"の有効／無効の違いである｡

モジュールについて

プログラミングにおいて､コードを機能ごとにモジュールやパッケージとして管理することがある｡AngularJSでは"mojuleメソッド"が提供されており､アプリケーションを構成する要素を､モジュール配下に置く｡

モジュールは以下のように作成する｡

HTML

<body ng-app="モジュール名">

JavaScript

var app = angular.module('モジュール名', ['依存モジュール']);

angular.moduleはグローバルAPIと定義されており､モジュールの作成を行ってくれる｡
モジュール名は､"ng-app"に対して属性値を設定したものがそれになる｡
JavaScriptで定義した"app"はModuleオブジェクトとなり､以下のような機能が付与される｡

animation
config
constant
controller
directive
factory
fillter
provider
run
service
value
name
require

詳しくは各々の記事を記載する予定です｡(自分はまだ"controllerとservice,configくらいしか使ったことないですが...)

参考

js STUDIO
My Web Tutorial

Sierですが何か?

仕事、趣味などで興味を持った技術など(ブログタイトル迷走中)