HTML/JSファイルに組込み

Level 0｜｜2016/06/20

「AngularJS」を、HTMLファイルに組み込んで、いろいろやってみます。

目次 HTML/JSファイルの準備 ng-app属性を知る moduleオブジェクトを知るインポート方法

HTML/JSファイルの準備

「angularJS」を、HTML/JSファイルに組み込んでみます。
先に、表示結果を見てから、コードを紹介します。

DEMOファイルをDownload！(2kb)

組み込み前に、表示結果を見ておいてください。

メッセージを表示

fillterを使ってみる

今日は、{{today | date: 'yyyy/MM/dd'}}です。

タイトル数は、{{ctmls.length}}です。

ng-repeatを使ってみる

タイトル名、価格をテキストボックスに入力すると、検索結果に反映

タイトル名	価格	発売日
{{list.title}}	{{list.price \| number}}円	{{list.published \| date: 'yyyy年MM月dd日'}}

HTMLファイル

HTMLファイルのコードは以下の通りです。
1）ng-app属性で、angularJSを有効化し
2）インポートで、JSを読み込み
3）Angular構文で、結果を表示します。


<!doctype html>
<!-- 1)ng-app属性 -->
<html class="no-js" lang="ja" ng-app="myApp">
<head>
<!-- 2)インポート -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>                
<!-- 3)Angular構文 -->
<div ng-controller="MyController">

<h1>メッセージを表示</h1>
<div>{{msg}}</div>

<h1>fillterを使ってみる</h1>
<p>今日は、{{today | date: 'yyyy/MM/dd'}}です。</p>
<p>タイトル数は、{{ctmls.length}}です。</p>

<h1>ng-repeatを使ってみる</h1>
タイトル名、価格をテキストボックス入力すると、検索結果に反映<br />
<input type="text" ng-model="query">
<table>
<tr><td>タイトル名</td><td>価格</td><td>発売日</td></tr>
<tr ng-repeat="list in ctmls|filter:query">
<td>{{list.title}}</td>
<td>{{list.price | number}}円</td>
<td>{{list.published | date: 'yyyy年MM月dd日'}}</td>
</tr>
</table>

</div>
</body>
</html>

JSファイル

JSファイル(controller.js)のコードは以下の通りです。
1）モジュールメソッドで、目的や用途で管理し
2）モジュールオブジェクトのメソッドで、様々なコンポーネントを簡単に定義でき、
3）スコープオブジェクトを介して、結果の受け渡しをします。


// 1）モジュールオブジェクト
angular.module('myApp', [])
// 2）モジュールオブジェクトのメソッド
 .controller('MyController',function($scope, CustomList){
// 3）スコープオブジェクト
     $scope.msg = 'AngularJS 1.5.7を試してみる！「アズ勉。」';
     $scope.today = new Date();
     $scope.ctmls = CustomList();
 })
  .value('CustomList', function(){
     return [
      {
          title: 'bootstrapリファレンス',
          price: 12000,
          published: new Date(2016, 1, 18)
      },
      {
          title: 'wordpressリファレンス',
          price: 15000,
          published: new Date(2016, 4, 18)
      },
      {
          title: 'HTMLリファレンス',
          price: 2500,
          published: new Date(2016, 7, 18)
      },
      {
          title: 'CSSリファレンス',
          price: 5000,
          published: new Date(2016, 6, 18)
      },
      {
          title: 'jQueryリファレンス',
          price: 7500,
          published: new Date(2016, 5, 18)
      },
      {
          title: 'mySQLリファレンス',
          price: 10000,
          published: new Date(2016, 4, 18)
      }
     ];
 });

DEMOファイルをDownload！(2kb)

ng-app属性を知る（htmlファイル）

ng-app属性は、HTMLファイルの冒頭で出てきたng-app="myApp"のことです。
「ng」は、AngularJS特有のものだということを覚えておきます。

ng-app="モジュール名"

ng-app属性は、AngularJSを有効化しまっせを宣言するもので、JSファイルのmoduleを使ってコントロールします。このモジュール名「myApp」下で自動で指示されたコントロールを実行させてくれます。
ちなみに、これを複数設置させたい場合は、手動で2個目のモジュールを実行させなければいけません。
また、サンプルコードでは、モジュール名を「myApp」にしていますが、任意の文字列でも大丈夫です。

moduleオブジェクトを知る（jsファイル）

moduleメソッドとは、JSファイルの冒頭で出てきたangular.module()のことです。

angular.module('モジュール名', [])

moduleメソッドは、javascriptの関数やらをまとめて管理するものです。ng-app属性で設定したモジュール名と同じものを記述します。[]の中身は、他ファイルとの依存性注入をする時などに使います。

インポート方法

ローカルに置く！

って場合は、以下コードをHTMLに記載します。先に読み込ませるために、head内に置きましょう！


<script src="angular.min.js"></script>

いやっローカルに置きたくない！

って場合は、以下コードをHTMLに記載します。先に読み込ませるために、head内に置きましょう！


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>

Bootstrapも一緒に使いたい！

って場合は、以下コードも一緒に設置しておきます。これでBootstrapを使えますが、0.12.0は、2016年6月現在のバージョンですので、ご注意を。


<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<!-- Javascriptファイルに追加 -->
angular.module("myApp", ["ui.bootstrap"]);