吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

AngularJSの書き方(Hello world)

2013年11月23日 / category : angularjs, その他

最近、AngularJSを勉強中なのですが、
公式サイトはもちろん英語で、英語が全くわからない自分は、手探りで勉強しています。
なので、勘違いをして覚えている個所があるかもしれませんが、
自分なりに理解していること、試してみたこと、いまだわかっていないこと、などなど基本的なものから書いていこうと思います。
覚えようと思ったきっかけは、仕事で「AngularJS」の名前が出てきたため、焦って勉強しました。

まず、AngularJSとは、
Googleが開発したJavaScriptのMVCフレームワークです。
http://ja.wikipedia.org/wiki/AngularJS

MVCとは、
Model : 処理ロジック。
View : 処理結果による画面表示(HTML出力)。
Controller : ModelとViewを操作するもの。

ということで、触ってみます。
まず、公式サイトから、ファイル一式をダウンロードします。

AngularJS — Superheroic JavaScript MVW Framework
http://angularjs.org/

ダウンロードすると、jsファイルがたくさんありますが、とりあえずは、

angular.min.js

これだけ使います。

それでは、さっそく「Hello world」作りましたので、これを基に見ていきます。

■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/0/
■サンプルファイル一式
ダウンロード – zip
■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div ng-controller="CtrlA">
<p>msg : {{msg}}</p>
</div>

<div ng-controller="CtrlB">
<p>msg : {{msg}}</p>
</div>

<div ng-controller="CtrlC">
<p>msg : {{msg}}</p>
</div>

</body>
</html>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.msg = 'Hello world ! - CtrlA';
}]);

myApp.controller('CtrlB', ['$scope', function($scope){
	$scope.msg = 'Hello world ! - CtrlB';
}]);

myApp.controller('CtrlC', ['$scope', function($scope){
	$scope.msg = 'Hello world ! - CtrlC';
}]);
■解説
<html ng-app="app">

ng-app属性で、AngularJSを使用すると宣言する。(この記述がないと、AngularJSは動作しません。)
ng-app

<div ng-controller="CtrlA">
-
</div>

ng-controller属性で、スコープを制限する。
ng-controller

{{msg}}

AngularJSで使用する変数は{{}}で囲む。

var myApp = angular.module('app', []);

ng-app属性で指定したappを、モジュール化し、変数myAppに格納する。
第2引数には、空の配列を指定しておく。
angular.module

myApp.controller('CtrlA', ['$scope', function($scope){
	$scope.msg = 'Hello world ! - CtrlA';
}]);

第1引数には、ng-controller属性で指定した値を指定する。(この値がコンストラクタ関数の関数名となります。)
第2引数には、[スコープ変数、コンストラクタ関数]という配列形式で記述する。
コンストラクタ関数には、スコープ変数($scope)を引数に指定し、
$scope.変数 = {{変数}}
というカタチでHTML側に出力ができる。
.controller