AngularJs入門「アズ勉。」

アズ勉。AngularJs v1.5.1を、ズブの初心者が、勉強した

  1. HOME
  2. アズ勉。ノート一覧
  3. ViewとControllerを学ぶ

Moduleメソッドと$scopeを学ぶ。

Level 0||2016/06/20

サンプルコードを使って、AngularJsのModuleメソッドと$scopeを学びます。併せて、HTMLとJSに設定するAngular構文と双方向バインディングも学びます。サンプルコードを事前に見ておいてください。

サンプルコードを見る

メッセージを表示してみる

HTMLファイル


<!doctype html>
<html class="no-js" lang="ja" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>                
<!-- 2)コントローラー -->
<div ng-controller="MyController">

<h1>メッセージを表示</h1>
<!-- 1)Angular式 -->
<div>{{msg}}</div>

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

1)Angular式は、HTMLで簡単に出力できるAngular式というものがあります。メソッドやプロパティなどを{{ }}波カッコで囲むだけで、値を返してくれます。

{{ メソッド/プロパティ他 }}

サンプルコードでは、{{msg}}という変数名を指定しました。{{msg}}は、HTML単体では値を指定していないので動きません。
指定するには、まず、2)コントローラー ng-controllerで囲います。

<HTMLtag ng-controller="コントローラー名">

HTMLtagは、HTMLで使用するタグ(div、p、span 他)のことです。
ここで指定したコントローラー名「MyController」を使って、JSで指示を書きます。

JSファイル


angular.module('myApp', [])
// 1)モジュールオブジェクトのコントローラーメソッド
 .controller('MyController',function($scope){
// 2)スコープオブジェクト
     $scope.msg = 'AngularJS 1.5.7を試してみる!「アズ勉。」';
 });
            

1)モジュールオブジェクトのコントローラーメソッドは、HTMLで指定したコントローラー名「MyController」を指定し、関数で操作します。

.controller("コントローラー名",function())

controllerは、コントローラーを定義していますが他にもメソッドがあるので、一部抜粋しておきます。

メソッド内容
controllerコントローラー
animationアニメーション
serviceサービス
directiveディレクティブ

$scopeオブジェクト

$scope.変数名 = '値'

2)スコープオブジェクトとは、HTMLとJSの仲介役で、このスコープを介してデータの受け渡しをしています。

$scopeオブジェクト

HTMLから受け取ったデータと、JSで指示されたデータをスコープが受け取り、動的に値を生成します。サンプルコードで言うと、HTMLの{{msg}}と、JSの$scopeオブジェクトのmsgで指示をしている値 = 'AngularJS 1.5.7を試してみる!「アズ勉。」'を受け取り、スコープが双方に値を渡したので、これでメッセージが表示されるようになります。

このサイトはLiruu Design(リールーデザイン)が運営しています

WEBデザイン制作
WEBショーケース
Liruu Blog