アングラーJSコントローラ

6162 ワード

アングラーJS コントローラ

前のブログでは、AnglarJSのコントローラ命令と同様のコード<div ng-controller="ctrl1">を見ることができます.AnglarJSアプリケーションはコントローラによって制御されます.ng-controllerコマンドは、アプリケーションコントローラを定義する.コントローラはJavaScriptオブジェクトで、標準的なJavaScriptオブジェクトの構造関数で作成されます.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.name = "jianggujin"; }); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name" />
        <div>Hello {{name}}</div>
    </body>

</html>

AnglarJSアプリケーションはng-appによって定義されている.アプリケーションは<body>内で実行されます.ng-controller="myCtrl"属性はAnglarJS命令です.コントローラを定義します.AnglarJSは$scopeオブジェクトを使用してコントローラを起動します.AnglarJSにおいては、$scopeは、アプリケーション象(アプリケーション変数と関数に属している)である.制御装置の$scope(作用領域、制御範囲に相当)は、AnglarJS Modelのオブジェクトを保存するために使用される.コントローラは作用領域で属性nameを作成しました.ng-modelは、入力領域をコントローラの属性nameにバインドするように指示する.
上記の例では、name属性を持つコントローラオブジェクトを示しています.コントローラにも方法(変数と関数)があります.上記の例を改造します.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>AngularJS</title>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.name = "jianggujin"; $scope.welcom = function() { return "Hello " + $scope.name; } }); </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="text" ng-model="name" />
        <div>{{welcom()}}</div>
    </body>

</html>

JavaScriptに私有属性を実現する書き込み方法(2)