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も参照して下さい。
ページのトップへ戻る