プログラム猿進化日-AnglarJS学習の表現

AngulalrJSはJavascriptの枠組みであり、Javascriptの文法を大幅に簡略化し、現在のソフトウェア設計モード-MVC(ルート-サービス)に適合し、コマンドによってHTMLを拡張し、自分の表現でデータを結合することもできます.続いて、AnglarJSを勉強しています.何ヶ月間の難点解析です.
表式-$パース
式はAngularJS応用において広く使われており、開発の鍵の一つとして深く理解されている.
まず、先端コードを作ります.テキストボックスを1つ書き、属性名exprをバインドします.
{parsedExpr}
次に、私たちはスクリプトを作成します.私たちは$watchサービスを通じて、私たちの入力ボックスの新旧値をモニターします.新旧値が異なる場合、私たちは$parseサービスを使って新しい値をパーサーフ関数に解析してから、パースFun関数でscopeオブジェクトを呼び出します.このようにして、私たちが入力したボックスの表現を解析して、私たちが望む結果に達することができます.(ただし、$parseサービスをバインディングした後、式を関数として解析します).
controller('MyController',function($scope,parse)｛
$scope.$watch('expr',function(newVal,oldVar,scope){
consolie.log('newVar'+newVal);
consolie.log('oldVar'+oldVar);
if(newVal!=oldVar){
var parseFun=$parse(newVal);
scope.parsedExpr=parseFun(scope)
)
｝
｝
｝
};
まとめ:AngulalrJSは$parseサービスを通じて式の演算を行い、このサービスは現在位置しているスコープにアクセスすることができます.このプロセスでは、私たちは$scopeで定義されたオリジナルJavascriptのデータと関数にアクセスすることができます.
表式-interpolate
$interpolateは非常に強力です.
例えば、AngularJSでは、直接にDOMをテンプレートとして使用することができます.
My name is{name}
私たちは直接にscopeを使ってコントローラの中でnameの値を取得することができます.では、DOMで予め生成した場合ではなく、生成した文字列をテンプレートとして変更する必要がある場合は、$interpolateを使用します.
まず、次のようなビューを作成します.第一のビューは私たちの入力した名前を表します.第二はテキストボックスで、私たちのemailの内容を表します.そして、それぞれの属性を結合します.最後に、私たちの

     。
 
 
 
  

 
  

 
  
<br/></p> 
  <pre><code>{{previewText}}</code></pre><br/> 
  <div><br/> 
  
 <p>  ，    script      $interpolate。 script ，       text        ，  $watch    emailBody          ，     emailBody   ，  ，      $interpolate   emailBody       ，            {{to}}    scope    。           previewText    。</p> 
 <blockquote> 
  <p><script><br></p> 
  <p>angular.module('myApp',[])<br></p> 
  <p>  .controller('secondCtrl',function($scope,$interpolate){<br></p> 
  <p>   $scope.to = '232423@qq.com';<br></p> 
  <p>   $scope.emailBody = 'Hello {{to}},<br><br>My name is Aril';<br></p> 
  <p>   $scope.$watch('emailBody',function(body){          <br></p> 
  <p>       if(body){<br></p> 
  <p>     var template = $interpolate(body);<br></p> 
  <p>      $scope.previewText = template({to:$scope.to});<br></p> 
  <p>}<br></p> 
  <p>});<br></p> 
  <p>}); </script><br/></p> 
 </blockquote> 
 <p><b>  :        ，     DOM      ，         DOM    ，  ，                       。</b></p> 
 <p>  ，    ，              {{}}，              ，  ，              ，  ，               $interpolate  ， startSymbol()           ---startSymbol()         ，endSymbol         。</p> 
 <p>    ，    previewText。</p> 
 <pre><code><pre><code>__previewText__</code></pre></code></pre> 
 <p>  ，           :</p> 
 <blockquote> 
  <p>angular.module('emailParser', [])<br/></p> 
  <p>.config(['$interpolateProvider', function($interpolateProvider) {</p> 
  <p>$interpolateProvider.startSymbol('__');</p> 
  <p>$interpolateProvider.endSymbol('__');</p> 
  <p>}])</p> 
  <p>.factory('EmailParser', ['$interpolate', function($interpolate) {<br/></p> 
  <p>return {</p> 
  <p>parse: function(text, context) {</p> 
  <p>var template = $interpolate(text);</p> 
  <p>return template(context);</p> 
  <p>}<br/></p> 
  <p>};</p> 
  <p>}]);</p> 
 </blockquote> 
 <p>    </p> 
 <blockquote> 
  <p>angular.module('myApp', ['emailParser'])<br/></p> 
  <p>.controller('MyController', ['$scope', 'EmailParser',</p> 
  <p>function($scope, EmailParser) {</p> 
  <p>$scope.$watch('emailBody', function(body) {</p> 
  <p>if (body) {</p> 
  <p>$scope.previewText = EmailParser.parse(body, {</p> 
  <p>to: $scope.to<br/></p> 
  <p>});</p> 
  <p>}</p> 
  <p>});<br/></p> 
  <p>}]);</p> 
 </blockquote> 
 <p>  ，          "__XXX__"         。    cool。</p> 
 <p><br/></p> 

                            </div>
                        </div>
                    </blockquote></code></pre></article></div>
                    <!--PC WAP    -->
                     
                    <script type="text/javascript" src="/views/front/js/chanyan.js"/>
                    <!--    -         -->
                     
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!--    -  1       -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  2       -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                        <!--    -  3       -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                             
                        </div>
                    </div>
                </div>

を通して.