49
52

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Angular.js入門 (2)コントローラ

Last updated at Posted at 2014-04-24

コントローラの導入

前回: Angular.js入門 (1)導入とデータバインディング
次回: Angular.js入門 (3)フィルタ

コントローラはAngularにおいてモデルとビューを対応付けて操作するためのコンポーネントです。具体的に説明をするために前回のhtmlを例に使います。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <input type="text" ng-model="hello">
    <div class="{{hello}}">ここが装飾される</div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
</html>

ここのフォーム部分にコントローラを適用してみましょう。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="hello">
        <div class="{{hello}}">ここが装飾される</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
</html>

これでng-controller属性を記述したdiv内部は, FirstCtrlというコントローラのスコープ内に置かれることになります。ここでコントローラの処理を外部ファイルに切り出していきましょう。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <div class="{{data.message}}">ここが装飾される</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
main.js
function FirstCtrl ($scope) {
    $scope.data = {message: "panel"}
}

コントローラはAngularのscopeオブジェクトを引数に取ります。main.jsで記述したFirstCtrlのscopeのプロパティとして定義したdata.message = panelがclass属性として適用されていることが確認できます。

panelによる装飾

複数のコントローラ

今度はもうひとつコントローラを入れてみます。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾1</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div class="{{data.message}}">装飾2</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
main.js
function FirstCtrl ($scope) {
}

function SecondCtrl ($scope) {
}

コントローラには何も処理を記載していませんが, それぞれのコントローラごとにスコープが定義されるので同じdata.messageを定義していてもそれぞれの入力欄に記載した内容が個別に反映されることに注意してください。

2つのコントローラ

では逆に, 2つのコントローラ間で値を共有したい場合はどうすればいいのでしょうか?ここでついにng-appの登場です。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "共有されるメッセージ"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;
}

ng-app名に"myApp"を指定して, myAppのfactoryメソッドを通じてDataというサービスを定義しています. このサービスをそれぞれのコントローラで引数に含めることで異なるコントローラ間で同じデータを共有することができるようになるというわけです。

データの共有

同じ値が共有されていること, 入力欄も相互に連動することが確認できます。

スコープ内での関数定義

コントローラ内で独自に関数を定義してやることもできます。

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{reversedMessage()}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "これはテストです"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;

    $scope.reversedMessage = function () {
        return $scope.data.message.split("").reverse().join("");
    }
}

単純にdataの文字列を反転させているだけです。$scopeに生やしたメソッドは自由にhtmlのng-controller内で呼ぶことができるということですね。

メソッド定義

ただし上の例だと関数reversedMessage内で$scopeを使っているので,

index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Angular.jsのテスト</title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/css/foundation.css">
</head>
<body>

<div ng-app="myApp">
    <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <div>{{data.message}}</div>
    </div>

    <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <div>{{reversedMessage(data.message)}}</div>
    </div>
</div>

</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
    return {message: "これはテストです"}
})

function FirstCtrl ($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl ($scope, Data) {
    $scope.data = Data;

    $scope.reversedMessage = function (text) {
        return text.split("").reverse().join("");
    }
}

のように, コントローラ内の関数定義ではパラメータをもたせておいて, html上で実際のデータを引数として入れてやる方がキレイでしょう。

49
52
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
49
52

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?