（解决跨域）自定义服务wmxHttp,自定义jsonp

• 背景
  豆瓣服务器接受callback时,名称不能出现小数点,所以没有办法是用angular内置的跨域方法.所以只能自定义jsonp,也就是自定义一个服务

• 作用：解决跨域的问题

• 自定义服务wmxHttp

  • 注意点：回调的函数名中不能出现小数点
  • 函数名要随机
  • 原理:原生的jsonp的原理

   // 方法：给服务器返回的数据调用（不能出现点；方法随机）
      //注入$window服务
    app.service('wmxHttp',['$window',function ($window) {
        /**
         * 跨域请求数据
         * @param url 请求地址
         * @param params  请求参数
         * @param fn 请求成功的回调
         */
        this.jsonp = function (url, params, fn) {
            /**
             * 跨域的步骤
             * 1. 在本地创建一个函数并随机生成函数名
             * 2. 通过src属性请求网络，把本地的函数名传递过去
             * @type {string}
             */
            // 1. 回调函数的名字（随机生成，且不能还有小数点）
            var callBackName = 'wmx_callback'+ Math.random().toString().slice(2);

            // 2. 通过$window创建一个callback的函数
            $window[callBackName] = function (args) {
                fn(args);
                // 获得数据后,动态创建的script标签没有存在的必要,可以移除
                $window.document.body.removeChild(newScript);
            };

            // 3. 动态的创建一个script节点
            var newScript = $window.document.createElement('script');

            // 4. 往script标签插入src
               // 01.参数的拼接
              var res = '';
              for(var key in params){
                res += key + '=' + params[key] + '&';
              }

                // 02. 完整地址的拼接（src属性请求网络的值）
                res = url + '?' + res + 'callback=' + callBackName;

                // 03. 给src赋值
                newScript.src = res;

            // 5. 插入到dom节点下
            $window.document.body.appendChild(newScript);
        }
    }])

• 实现
  先注入服务
  调用服务
  res就是从豆瓣获取到的数据

    // 注入一个$routeParams服务
    // 注入服务baseUrl,注意写在$http的前面
    // 注入服务apiKey
    // 注入自定义服务wmxHttp
    app.controller('musicController',['$scope','$routeParams','baseUrl','apiKey','wmxHttp',function ($scope,$routeParams,baseUrl,apiKey,wmxHttp) {

        // 通过服务器获得type值
        var type = $routeParams.type;

       // 确定对应服务器的地址（先准备好下面要的参数）
        var url = baseUrl + type;
        var params = {
            apiKey:apiKey,
           //默认每次加载20条数据,修改每次加载条数
            start:0,
            count:4
        };

        //自定义服务wmxHttp
        /**
         * url 请求的地址
         * params 请求的参数
         * fn 回调函数
         */
        wmxHttp.jsonp(url,params,function (res) {
             //获取到数据
            $scope.data = res;
            console.log($scope.data);
            //更新页面显示（脏值检测的原理）
            $scope.$apply();
        })
    }]);