AngularJSの基本操作
1-1.【AngularJS】データモデルをビューへ表示する①
今回からAngularJSの実装メモをまとめていく。勉強しながらなので、ベストアンサーではないかもしれないので、そこはご理解いただけたらと・・・
ネット接続とブラウザがあればできるので、特別な準備は不要。
最初にHelloWorld!を表示することをやっていく。
index.html と データモデルを保持するdata.jsの二つのファイルを作成して、それぞれを以下のような構成で配置します。
appディレクトリ
- index.html
- jsデイレクトリ - data.js
appディレクトリの直下にindex.htmlとjsディレクトリがあり、jsディレクトリの下にdata.jsを置いた。例ではこの構成で作成しているが、そこは個人におまかせします。
HelloWorld!を表示する方法は複数あるけど、２つのパターンでやってみます。
・data.jsに「HelloWorld」というモデルを持ち、それを表示させる
・inputフォームに入力された内容をそのまま表示させる
今回は前者。 もう一つは次回の記事で。
data.jsに「HelloWorld」というモデルを持ち、それを表示させる
最初はdata.jsにHelloWorld!というデータを用意して、それを表示する方法。
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="js/data.js"></script>
</head>
<body>
<div>
<div ng-controller="MyCtrl as myctrl">
<p>{{myctrl.str}}</p>
</div>
</div>
</body>
</html>
モジュールの指定
まず2行目、このhtmlでangularjsを使うと宣言するために、
<html ng-app="myApp">
と書いている。myAppはdata.jsで定義しているモジュールの名前。詳細は後程。
コントローラの指定
また9行目で以下のような記述がある
<div ng-controller="MyCtrl as myctrl">
こちらではここで使用するコントローラの指定を行っている。 このコントローラもdata.jsで定義する。また「as」を使って、MyCtrlをmyctrlに置き換えている。この理由は以下のページに書いてある。
データモデルの表示
10行目
<p>{{myctrl.str}}</p>
htmlファイル内でAngularJSのデータを扱うためには
{{ //なんらかの操作 }}
のように {{ と }} で囲まれた部分で行う。 ここではmyctrl内のstrという変数に入っているデータを表示しようとしている。
data.js
var myapp = angular.module('myApp',); myapp.controller('MyCtrl',function(){
this.str = 'Hello World!';
this.arrs = [
{
name:"kobayashi",
score:24
},{
name:"kikuchi",
score:18
},
{
name:"yamada",
score:87
}
];
});
モジュールの定義
1行目でモジュールの定義をしている。
var myapp = angular.module('myApp',);
モジュールについての詳細は以下のページを参照。
コントローラの定義
また2行目以降ではコントローラの定義をしている
myapp.controller('MyCtrl',function(){
// データモデルなどの記述
});
コントローラの定義方法にはさまざまあるが、このブログでは基本的には上記の形で記述することにしている。 場合によっては関数部分を外出しすることもある。
コントローラについての詳細は今後まとめる予定。
コントローラ「MyCtrl」のなかには、文字列strと連想配列arrsを用意している。
今回は文字列strの中に"Hello World!"というデータモデルを用意し、これをビューに表示する。ここまでの内容をセーブして、index.htmlをブラウザで見てみると「Hello World!」と表示されていると思う。
これで一つ目のHelloWorld表示は完了！
次回は「inputフォームに入力された内容をそのまま表示させる」というタイトルでまとめていく。
