AngualrJS是一个Javascript的一个框架，极大的简化了javascript的语法，符合现在软件设计模式-MVC（路由-服务），并且通过指令来扩展了HTML，还可以通过自己表达式来绑定数据。接下来，是我学习AngularJS几个月遇到的难点解析。

表达式-$parse

表达式在AngualrJS应用中被广泛的使用，深入理解它是作为开发的关键之一。

首先，我们先构造一个前端代码。写一个text文本框，然后给其绑定一个属性名expr。

<div ng-controller="firstController">

<input type="text" ng-model="expr" placeholder="Enter an expression"/>

<div>{{parsedExpr}}</div>

</div>

接下来，我们创建script。我们通过$watch服务，监听我们输入框中的新旧值，其中，当新旧值不同的时候，我们运用$parse服务将新值解析到我们的parseFun函数上，然后通过parseFun函数调用scope对象，这样，我们就可以解析我们输入框中的表达式，达到我们想要的结果。(注意，$parse服务绑定后将表达式解析为一个函数).

.controller('MyController',function($scope,$parse){

$scope.$watch('expr',function(newVal,oldVar,scope){

console.log('newVar'+newVal);

console.log('oldVar'+oldVar);

if(newVal != oldVar){

var parseFun= $parse(newVal);

scope.parsedExpr=parseFun(scope);

}

});

});

});

}]);

总结：AngualrJS 通过$parse服务来进行表达式的运算，这个服务能够访问当前所处的作用域。这个过程中允许我们访问定义在$scope上的原始Javascript的数据与函数。

---

表达式-$interpolate

$interpolate作用非常强大。

例如，在AngualrJS里面，我们可以直接将DOM当做模板来使用，

<div>My name is {{name}} </div>

我们可以直接使用scope在控制器中获取name的值。那么，如果不是在DOM预先生成的情况，而是我们需要将生成的字符串当成模板来进行改变的时候，我们就会用到$interpolate了。

首先，我们创建如下所示的视图，第一个视图代表我们的输入的名称，第二个是一个文本框，代表我们的email的内容，并且各自绑定其属性，最后，通过我们的<pre>标签来查找。

<div ng-controller="secondCtrl">

<input type="email" ng-model="to" placeholder="Recipient"/>

<textarea ng-model="emailBody"></textarea>

<pre>{{previewText}}</pre>

<div>

下面，我们通过script来构建我们的$interpolate。该script中，我们首先将两个text关联的属性给赋值，通过$watch监听我们emailBody里面的值是否有所变化，如果我们的emailBody变化了，那么，我们则会通过$interpolate来通过emailBody的内容作为模板，通过次模板中绑定的属性的{{to}}来对整个scope进行改变。最后将其值赋值给我们的previewText显示出来。

<script>

angular.module('myApp',[])

  .controller('secondCtrl',function($scope,$interpolate){

   $scope.to = '232423@qq.com';

   $scope.emailBody = 'Hello {{to}},\n\nMy name is Aril';

   $scope.$watch('emailBody',function(body){         

       if(body){

     var template = $interpolate(body);

      $scope.previewText = template({to:$scope.to});

}

});

}); </script>

总结: 从上述的操作上，我们可以在DOM没有规定之前，来对我们事后定义的DOM进行操作，这样，我们就可以直接使用我们位置的模板进行定义赋值了。

那么，更进一步，如果我们的文件里面包含很多的{{}}，可能使我们绑定的内容导致混淆，所以，我们可以自定义我们认识的表示，这样，我们必须自己重新配置一下系统的$interpolate服务，用startSymbol()方法修改标志开始的符号---startSymbol()修改标识开始的符号，endSymbol修改结束标志的符号。

如下所示，我们修改previewText。

<pre>__previewText__</pre>

随后，我们通过重写服务的方式:

angular.module('emailParser', [])

.config(['$interpolateProvider', function($interpolateProvider) {

$interpolateProvider.startSymbol('__');

$interpolateProvider.endSymbol('__');

}])

.factory('EmailParser', ['$interpolate', function($interpolate) {

return {

parse: function(text, context) {

var template = $interpolate(text);

return template(context);

}

};

}]);

随后注入

angular.module('myApp', ['emailParser'])

.controller('MyController', ['$scope', 'EmailParser',

function($scope, EmailParser) {

$scope.$watch('emailBody', function(body) {

if (body) {

$scope.previewText = EmailParser.parse(body, {

to: $scope.to

});

}

});

}]);

现在，我们就通过自己修改的"__XXX__"来实现了最终的结果。是不是很cool。