angular-按需加载angularjs和$http.post的二三事

前面的24个章节都是关于yii2框架的理解以及应用，本来是向按照一个一个章节系列写下去的，每个分类都能够比较集中，清晰。但是在项目中又会用到其他的知识，只能够按照平时积累写下去咯，可能会有些乱！

最近前端比较火的框架，可数facebook的react了，一个专门针对移动端开发的前端高性能框架。当然google的angularjs也是一个很火的前端框架，在SPA应用上算是非常出色的。具体的基础入门大家可以看看菜鸟网络的http://www.runoob.com/angularjs/angularjs-tutorial.html，这里都是一些基本知识点

下面要说的是，我本人在应用angular中遇到的一些问题和平时用jquery实现的方式的异同。
(1)单页面应用中加载有关angualr的js文件
在进入单页面的初始化时，所有用到的angualr的js需要一次性加载，不能做到按需加载。
比如在路由中，我们设置了很多的不同页面和对应路由，那么进入不同的路由，我们就需要按需加载不同的的angualr的controller的js文件了。如果我们在页面中直接通过<script src="./test.js"></script>加载angular的这个test.js文件时，这个只会通过xhr的异步对象请求方式加载进来的，test.js文件时加载进来了，但是它并没有将view视图中双向绑定那样，把请求返回来的数据通过$scope的作用域绑定显示出来。具体的原因是因为通过xhr异步加载的test.js文件已将是处于angular的上下文之外了，说的简单点，即是处于两个不同的环境域中，所以对于数据绑定也就是model来说，这个过程是跨域的，不会发生的。（AngularJS 上下文之外的任何地方修改了 model ，那么你就需要通过手动调用 $apply() 来通知 AngularJS 。这就像告诉 AngularJS ，你修改了一些 models ，希望 AngularJS 帮你触发 watchers 来做出正确的响应）。当然如果是普通的js文件，这是可以加载并且可以执行的。

那么对于这种情况，我们应该怎么解决呢？因为在单页应用中，当功能越来越多，越来越复杂的时候，我们就需要按需来加载不同路由下的js文件了！下面，我在github上找到一个比较好的开源的解决方案！
官网：https://oclazyload.readme.io/docs/oclazyloadprovider
ui-router的演示：http://plnkr.co/edit/u18KQc?p=preview

那么我们可以npm install oclazyload 安装

var app = angular.module('app', ['ngRoute','oc.lazyLoad']);app.config(['$routeProvider',function($routeProvider) {$routeProvider.when('/main', {templateUrl: '/home/index/main',controller: 'MainCtrl'}).when('/dashboard', {templateUrl: '/home/index/view',controller: 'DashboardCtrl',            resolve: {             loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {                 return $ocLazyLoad.load({                    name:"view",                    files:["/static/js/angular-gridster/demo/dashboard/script.js"]                 });             }]         }}).otherwise({redirectTo: '/main'});}])

其中最重要就是

resolve: {         loadMyCtrl:['$ocLazyLoad',function ($ocLazyLoad) {             return $ocLazyLoad.load({                name:"view",                files:["/static/js/angular-gridster/demo/dashboard/script.js"]             });         }]     }

这个resove 是在执行路由渲染模板前进行一个操作，resove里面的值由key:value组成，key的值可以自定义，基本模式就是这样子，return 回来一个promise.

所以按照上面的路由配置就可以方便实现按需动态加载，可以给我们的开发带来更加清晰的过程。

angular本身的ng-router在功能上还是受限，建议如果要用路由的话，可以用开源的angular-ui-router，这个功能强大，而且可以多个层级的路由，模板嵌套等。
安装angular-ui-router 直接用npm install angular-ui-router

(2)angular的$http.post()，传输json数据格式问题

在实际项目中，我们遇到了一个很常见问题，当使用
$http.post(url,{'name':'bing','sex':1}).success(function(response){

});
post一个json数据过去的时候，在服务端php(或者一些其他语言)，当我们用$_POST的时候，却没有办法获取到这个json数据。


因为按照我们平时在用jquery的时候
$.post({
url:...,
data:{'name':'bing','sex':1},
.....
});
同样也是这样子，一般是可以成功的将数据post到服务端的，为什么angualr就不可以呢？

在httpd通信的请求中，发送请求时，可以通过content-type指定请求体的发包是以何种格式来实现的！

application/x-www-form-urlencoded是标准的表单发包方式，普通的表单提交，或者js发包，默认都是通过这种方式实现的。也就是说post方法的请求体内容数据最终必须转成application/x-www-form-urlencoded，也就是'name=bing&sex=1'，服务端才可以通过$_POST获取到数据。

那么jquery为什么可以呢？

下面看一下jquery的官方说明:
data:将自动转换为请求字符串格式。GET 请求中将附加在 URL 后面。查看 processData 选项说明，以禁止此自动转换。对象必须为"{键:值}"格式。如果这个参数是一个数组，jQuery会按照traditional 参数的值， 将自动转化为一个同名的多值查询字符串(查看下面的说明)。注：如 {foo:["bar1", "bar2"]} 转换为 'foo=bar1&foo=bar2'。
也就是说jquery会自动将json数据格式转为字符串格式后(序列化后)，再进行post的传输发包。

而在angualr中，请求post过去的json数据并不会转为name=bing&sex=1这种格式的字符串，而是默认就是json,但由于http通信中并没有所谓的json，所有在传输的时候，也就是，application/json可以将它理解为text/plain，普通字符串。那么不满足发包的格式。自然在服务端$_POST就没法接收数据了。

具体的解决办法：
(1)利用jquery的$.param()方法

var queryData = $.param({'name':'bing','sex':1}); $http({      url : 'test.php',      method : 'POST',      data : queryData,      headers : {'Content-Type':'application/x-www-form-urlencoded'},      }).success(function(response) {      });

其中headers : {'Content-Type':'application/x-www-form-urlencoded'}需要设置。
有人说，缺点就是引入jquery,但本人认为在一个应用系统中，大部分都会使用jquery的，angular和jquery相互结合开发，才是强强组合。

而且$.param()处理对象序列化的层数更深层，这个也是非常方便。

(2)利用angular自身封装的$httpParamSerializer()

• {'foo': 'bar'} results in foo=bar
• {'foo': Date.now()} results in foo=2015-04-01T09%3A50%3A49.262Z (toISOString() and encoded representation of a Date object)
• {'foo': ['bar', 'baz']} results in foo=bar&foo=baz (repeated key for each array element)
• {'foo': {'bar':'baz'}} results in foo=%7B%22bar%22%3A%22baz%22%7D (stringified and encoded representation of an object)

另外还可以使用$httpParamSerializerJQLike

https://docs.angularjs.org/api/ng/service/$httpParamSerializerJQLike

一种使用方法

$http({  url: myUrl,  method: 'GET',  params: myParams,  paramSerializer: '$httpParamSerializerJQLike'});

另一种使用方法

.controller(function($http, $httpParamSerializerJQLike) {  //...  $http({    url: myUrl,    method: 'POST',    data: $httpParamSerializerJQLike(myData),    headers: {      'Content-Type': 'application/x-www-form-urlencoded'    }  });});

(3)自己重新定义序列化

var ballApp = angular.module('BallApp', [], function($httpProvider) {    // 修改 header    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';    // Serialize function    //只能是嵌套两层的对象    var param = function(obj) {        var query = '', name, value, fullSubName, subName, subValue, innerObj,i;        for(name in obj) {            value = obj[name];            //如果值是数组            if(value instanceof Array) {                for(i = 0; i < value.length; ++i) {                    subValue = value[i];                    fullSubName = name + '[' + i + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            //如果值是对象            } else if(value instanceof Object) {                for(subName in value) {                    subValue = value[subName];                    fullSubName = name + '[' + subName + ']';                    innerObj = {};                    innerObj[fullSubName] = subValue;                    query += param(innerObj) + '&';                }            如果值是字符串            } else if(value !== undefined && value !== null) {                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';            }        }        return query.length ? query.substr(0, query.length - 1) : query;    }    //重写transformRequest参数处理方法(利用param function 处理)    $httpProvider.defaults.transformRequest = [function(data) {        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;    }];});ballApp.controller('AjaxCtrl', function($scope, $http) {    $scope.ajax = function() {        $http.post('test.php', {name: 'Febr'})        .success(function(data) {            console.log(data);        });    };});

如果您觉得本文对你有帮助，那就按按鼠标，顶一下，让更多的人可以看到它......