The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

1-1.【AngularJS】データモデルをビューへ表示する① - 【連載】AngularJSの基本操作

AngularJSの基本操作

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

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

今回から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!を表示する方法は複数あるけど、2つのパターンでやってみます。

・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

 

これで一つ目のHelloWorld表示は完了!

次回は「inputフォームに入力された内容をそのまま表示させる」というタイトルでまとめていく。