使用AngularJS构建应用时遇到的问题及解决方案（版本为1.3.9）
最近在公司使用用AngularJS（1.3.9）完成了一个项目，在此记录一下过程中遇到的问题及解决方案。
使用$http服务发送ajax请求时后端无法判断请求是XMLHttpRequest
问题及场景：
有时候后端会读取请求中header的X-Requested-With字段判断前端的请求是否为异步请求XMLHttpRequest，在使用$http服务发送请求时后端却判断为false。
原因：
'X-Requested-With' : 'XMLHttpRequest'并不属于标准的header内容，因此Angular不会在header中默认设置该字段。
解决方案：
手动在$httpProvider中设置该字段，代码如下：
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
note:
可以创建一个公用服务，在配置方法做这个修改，公用服务注入到每个module里就一劳永逸了。
使用$http.post()方法参数类型不正确
问题及场景：
在angular中，使用$http.post()方法提交数据时，发现所带参数并非Form Data，而是JSON对象，导致服务器无法使用一般方法正确获取参数，而使用jQuery的$.post()方法却可以正确获取。
原因：
两者的post对header的处理有所不同，jQuery会把作为JSON对象的myData序列化，例如：
var myData = { a : 1, b : 2 }; // jQuery在post数据之前会把myData转换成字符串："a=1&b=2" angular显然没做这个处理。
解决方案：
修改Angular的$httpProvider的默认处理，代码如下：
$httpProvider.defaults.transformRequest = function(obj){ var str = []; for(var p in obj) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])); } return str.join("&"); }; $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' }; note:
同样应该在公用服务中做此修改。
调用$scope.$apply(fn)更新视图时报错$rootScope:inprog
问题及场景：
在更新$scope上的model数据时，如果是在digest监听外，会发现视图并没有自动更新，于是手动调用$scope.$apply(fn)方法通知视图进行更新，却发现有时候会报错$rootScope:inprog。
原因：
该错误原因是在进程当中$scope.$apply(fn)正在执行，不能在此基础上重复调用该方法。
解决方案：
可以在调用该方法时做一个安全检测，封装代码如下：
$scope.safeApply = function(fn) { var phase = this.$root.$$phase; if (phase === '$apply' || phase === '$digest') { if (fn && (typeof(fn) === 'function')) { fn(); } } else { this.$apply(fn); } }; note:
$$phase变量是scope中的一个内部属性，如果为null或者undefined则说明进程中没有$apply方法在运行，则可以直接调用，否则直接执行入参方法。
添加统一拦截器对ajax的请求或返回做处理
问题及场景：
我遇到的场景是在发送异步请求时，后端会先判断用户是否已经登录，如果未登录则会在response的header中添加一个redirecturl字段，前端读取该字段控制页面跳转到该url，我首先想到的解决方案就是前端需要做一个统一拦截器，对所有异步请求的response进行拦截。
解决方案：
通过看Angular中$httpProvider部分的源码注释，发现了拦截器的几种写法，我选择的写法源码注释如下：
* // register the interceptor as a service * $provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) { * return { * // optional method * 'request': function(config) { * // do something on success * return config; * }, * * // optional method * 'requestError': function(rejection) { * // do something on error * if (canRecover(rejection)) { * return responseOrNewPromise * } * return $q.reject(rejection); * }, * // optional method * 'response': function(response) { * // do something on success * return response; * }, * * // optional method * 'responseError': function(rejection) { * // do something on error * if (canRecover(rejection)) { * return responseOrNewPromise * } * return $q.reject(rejection); * } * }; * }); * $httpProvider.interceptors.push('myHttpInterceptor'); 我拦截response的代码如下：
commonService.factory('redirectInterceptor', function(){ return { 'response': function(response) { if(response.headers().redirecturl) { window.location.href = response.headers().redirecturl; } return response; } }; }); $httpProvider.interceptors.push('redirectInterceptor'); note：
最后一行表示将该拦截器登记到$httpProvider的拦截器中，同样应该写在公用服务的配置方法当中。
controller之间的通信问题
问题及场景：
当有两个视图分别由两个controller控制时，其中一个视图发生变化，需通知另一个视图产生了此变化。
解决方案：
总的来说，Angular中控制器通信有三种处理方法：
-
利用作用域继承的方式 即子控制器继承父控制器中的内容；
-
基于事件的方式 即
$on,$emit,$boardcast这三种方法； -
服务方式 写一个服务的单例然后通过注入来使用。
我选择了最后一种方法，示例代码如下：
//JS var app = angular.module('myApp', []); app.factory('instance', function(){ return {}; }); app.controller('MainCtrl', function($scope, instance) { $scope.change = function() { instance.name = $scope.test; }; }); app.controller('sideCtrl', function($scope, instance) { $scope.add = function() { $scope.name = instance.name; }; });//html <div ng-controller="MainCtrl"> <input type="text" ng-model="test" /> <div ng-click="change()">click me</div> </div> <div ng-controller="sideCtrl"> <div ng-click="add()">my name </div> </div>
note:
在Angular中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享。
如果不是通过点击产生变化，还可结合$scope.$watch()方法来进行通信。
其他两种方法可参考站内文章：AngularJS控制器controller如何通信？
结语
以上为我在编写一个angular应用时遇到的问题及解决方案，记录并分享出来，欢迎大家指正！