トッカンソフトウェア

AngularJS はじめに

今回からAngularJSをやります。AngularJSは、Googlesとコミュニティが開発が開発しているJavaScriptフレームワークです。

業務で使ったことなく勉強のために調べたことを纏めるだけなので、内容がないかもしれませんが、いつか使うときのために出来るだけ、
多くの内容を書いていきたいと思います。

Hello Worldのサンプルプログラム

				

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!-- script src="angular.min.js"></script -->
<script>

var testApp = angular.module("testApp", []);

testApp.component("hello", {
	template: "<h1>Hello World!!</h1>"
});

</script>
</head>
<body ng-app="testApp">
	<hello></hello>
</body>
</html>
上記のサンプルプログラムを実行すると以下のようなソースに変換されます(bodyのみ抜き出し)。 
				
<body ng-app="testApp" class="ng-scope">
	<hello class="ng-isolate-scope">
		<h1>Hello World!!</h1>
	</hello>
</body>

AngularJSを使うには

CDNでライブラリjsファイルを参照するか、 本家ページよりangular.min.jsをダウンロードしてきて、参照します。
AngularJSはバージョン1とバージョン2がありますが、バージョン1を使用します。 
				
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!-- script src="angular.min.js"></script -->

module

HTMLとJavaScriptの処理を紐付けるには、JavaScript側で、angular.moduleメソッドよりモジュールを作成し、HTMLのng-app属性に
モジュール名を指定します。 
				
■JavaScript側
var testApp = angular.module("testApp", []);

■HTML側
<body ng-app="testApp">

component

JavaScriptで指定した文字をHTMLで表示するには、色々方法がありますが、今回はコンポーネントを使っています。
HTMLで指定した要素を JavaScript側でcomponentメソッドより要素と表示する文字列を指定し、HTML側で表示したい場所にタグを記述します。 
				
■HTML側
<hello></hello>

■JavaScript側
testApp.component("hello", {
	template: "<h1>Hello World!!</h1>"
});

template

componentメソッドで指定した要素の中に埋め込むHTMLを記述します。

templateUrl

templateでは、出力するHTMLを直接指定していましたが、templateUrlではHTMLファイルを指定します。

※以下のサンプルをローカルファイルに保存して、そのままダブルクリックして実行させたたときGoogle Chromeでは動作しません。
FireFoxで実行するか、Webサーバに置いてHTTPでアクセスして下さい。 
				
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!-- script src="angular.min.js"></script -->
<script>

var testApp = angular.module("testApp", []);

testApp.component("hello", {
	templateUrl: 'test2.html'
});

</script>
</head>
<body ng-app="testApp">
	<hello></hello>
</body>
</html>

test2.html 
				
<h1>Hello World!!</h1>

コンポーネントは Controller、Componentも参照して下さい。

ページのトップへ戻る
ェア All Rights Reserved.