AnglarJSシリーズ:7、式

4197 ワード

アングラーJS

表式はJavascriptに似たコードセグメントであり、通常はバインディングに用いられ、二大括弧には｛式｝のように書いてあります.表式は$parse方法で処理されます.
以下はいくつかの合法的なAnglarJS表現です.
1+2 3*10|currency user.name
AnglarJS表現とJavascript表現の比較
AnglarJSモードの表現はJavascript表現であると考えられてもいいです.この認識は完全ではないです.AnglarJSはJavascriptのeval関数で表現を実行しないからです.しかし、以下のいくつかの区別が必要なところを除いて、アングラーJS表現をJavascript表現と見なすことができます.
1、属性表現:属性表現は現在の作用領域に対応するもので、Javascriptに対応しないのはグローバルwindowオブジェクトです.
2、未定義値を許可する:表現を実行する時、AnglarJSはundefinedまたはnullを許可できます.Javascriptのように異常を投げます.
3、制御構造がない:アングラーJS表式では「条件判定」「ループ」「投げ異常」などの制御構造を使ってはいけません.
4、フィルタ(unixのパイプ操作子に似ている):フィルタチェーンを通して表現の結果を伝えることができます.日付オブジェクトを指定された読書フレンドリーなフォーマットに変換します.
表式で標準的なJavascriptを使いたいなら、それをコントローラの方法として書いて、表式でこの方法を呼び出すべきです.JavascriptでAnglarJS表式を実行したい場合は、eval()を使用してもいいです.
index.

<!doctype html>
<html ng-app>
<head>
<script src="../js/angular.min.js"></script>
</head>
<body>
    1+2={{1+2}}
</body>
</html>

他の表現を試してみてもいいです.

<!doctype html>
<html ng-app>
<head>
    <script src="../js/angular.min.js"></script>
</head>
<body>
<div ng-controller="Cntl2" class="expressions">
    Expression:
    <input type='text' ng-model="expr" size="80"/>
    <button ng-click="addExp(expr)">Evaluate</button>
    <ul>
        <li ng-repeat="expr in exprs">
            [ <a href="" ng-click="removeExp($index)">X</a> ]
            <tt>{{expr}}</tt> => <span ng-bind="$parent.$eval(expr)"></span>
        </li>
    </ul>
</div>
<script>
    function Cntl2($scope) {
        var exprs = $scope.exprs = [];
        $scope.expr = '3*10|currency';
        $scope.addExp = function(expr) {
            exprs.push(expr);
        };
        $scope.removeExp = function(index) {
            exprs.splice(index, 1);
        };
    }
</script>
</body>
</html>

属性表現
属性式計算は、スコープ内で行われます.Javascriptはデフォルトではwindowをスコープとしています.
AnglarJSがwindowの役割エリアを使うには$windowを使って全体のwindowオブジェクトを指します.
例えば、windowで定義されたalert()を使って、AnglarJS表現では$window.alert()と書かなければなりません.これは予期せぬグローバルスコープ(各種バグのソース)への侵入を防ぐために設計されたものです.index.

<!doctype html>
<html ng-app>
<head>
    <script src="../js/angular.min.js"></script>
</head>
<body>
<div class="example2" ng-controller="Cntl1">
    Name: <input ng-model="name" type="text"/>
    <button ng-click="greet()">Greet</button>
</div>
<script>
    function Cntl1($window, $scope){
        $scope.name = 'World';
        $scope.greet = function() {
            ($window.mockWindow || $window).alert('Hello ' + $scope.name);
        }
    }
</script>
</body>
</html>

未定義の値を許可する
表式は実行時にundifinedとnullを許可します.Javascriptでは、a.b.cを計算すると異常が発生します.もしこれが対象でないならば.これはほとんどの言語にとって意味がありますが、多くの場合、式は数を数えて結合するために使われます.次のような形です.
{a.b.c}
この表式は異常をトリガするよりも空の値を返します.通常はサーバーの応答を待っていますので、変数はすぐに定義されます.表式が未定義の値を許容できない場合、私たちが結合したコードは、例えば作成しなければなりません.
{((((((a 124124;{).b 124{}.c}
未定義の関数a.b.c()を実行してもundefinedに戻ります.異常は発生しません.
フロー制御構造がありません.
表式では制御構造を使用できません.このように設計された理由の一つは、アングラーJSの設計理念の一つとして、論理コードはコントローラにあるべきです.使用条件、サイクル、または異常処理が必要なら、コントローラの方法に記入してください.
フィルタ
データをユーザーに提供する場合、データを読書にやさしい形式に変換する必要があります.例えば、表示の前に日付オブジェクトをユーザーローカルの時間フォーマットに変換する必要があります.チェーン式のフィルタを使って式を伝えることができます.
name up percase
この表式はnameの値をupercaseというフィルターに伝えます.
チェーンフィルタは次のような文法を使います.
value＿filter 1|filter2はまた、コロンを通してフィルタにパラメータを伝えることができます.例えば、123を2桁の小数を持つ形に表示します.
123|number:2
ドル記号
気になるかもしれませんが、このドルのプレフィックスは何のために使いますか?実はこれはAnglarJS独自の属性方法を示す記号で、他のユーザー定義関数とは異なる記号を表すものです.AnglarJSが$を使わない場合、a.length()を実行するとundeifinedに戻ります.aとanglarはこのような属性がありません.
しかし、これからはlengthの方法が追加される可能性があります.また、自分でlengthの方法を追加すると、衝突が発生します.このような衝突が起こる可能性があるのは、AnglarJSの設計は既存のオブジェクトに挙動を付加するためです.$をプレフィックスに使うと、開発者のコードとAnglarJSが調和して共存することができます.

先端学習ノート(三)Javascript文字列関数配列関数