1-1.【AngularJS】データモデルをビューへ表示する①

AngularJSの基本操作

f:id:duo-taro100:20160218004611p:plain

今回からAngularJSの実装メモをまとめていく。勉強しながらなので、ベストアンサーではないかもしれないので、そこはご理解いただけたらと・・・

ネット接続とブラウザがあればできるので、特別な準備は不要。

最初にHelloWorld!を表示することをやっていく。

f:id:duo-taro100:20160322234907p:plain

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に置き換えている。この理由は以下のページに書いてある。

it-innovation.hatenablog.com

データモデルの表示

10行目

<p>{{myctrl.str}}</p>

htmlファイル内でAngularJSのデータを扱うためには

{{ //なんらかの操作 }}

のように　{{　と　}}　で囲まれた部分で行う。ここではmyctrl内のstrという変数に入っているデータを表示しようとしている。

f:id:duo-taro100:20160218004600p:plain

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',);

モジュールについての詳細は以下のページを参照。

it-innovation.hatenablog.com

コントローラの定義

また2行目以降ではコントローラの定義をしている

myapp.controller('MyCtrl',function(){
// データモデルなどの記述
});

コントローラの定義方法にはさまざまあるが、このブログでは基本的には上記の形で記述することにしている。場合によっては関数部分を外出しすることもある。
コントローラについての詳細は今後まとめる予定。

コントローラ「MyCtrl」のなかには、文字列strと連想配列arrsを用意している。
今回は文字列strの中に"Hello World!"というデータモデルを用意し、これをビューに表示する。ここまでの内容をセーブして、index.htmlをブラウザで見てみると「Hello World!」と表示されていると思う。

f:id:duo-taro100:20160218005810j:plain