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。
