这两天接到项目，项目框架是同事已经搭到的，大概看了一下，用的是AngularJS框架，表示没用过，临时看了一下文档，还好文档通俗易懂，整体不是很难，大概算是有个了解。
附上教程地址：AngularJS教程
好了，下面说正事，由于项目需求，整个项目都是调用的Api，那么问题来了，MVC WebApi也是同事搭的，但是并没有考虑到跨域问题，所有Api在一个项目里面单独存在，A项目要用js访问Api的接口，所以项目开始之前的第一个问题来了，跨域。
刚开始先用了JQuery Ajax来调用接口，OK，访问成功了，欣喜之余发现了一个小bug，就是在数据返回成功后不能及时刷新，对于我这样js入门级别的小菜鸟来说，一脸懵逼。
页面代码
<div ng-app="myApp" ng-controller="getCity">
<select ng-model="selectedSite" ng-options="x.city for x in selectedModel"></select>
你选择的是: {{selectedSite.city}}
编号为: {{selectedSite.cityid}}
提示信息 {{msg}}
</div>
Controller（js）代码
var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
$.ajax({
type: "get",
url: "http://localhost:8000/api/Account/City",
dataType: "jsonp",
data: {},
success: function (data, status) {
$scope.selectedModel = data.AppendData;
$scope.msg = data.Message;
},
error: function (e) {
},
complete: function () {
}
});
//$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
//.success(function (response) {
// $scope.selectedModel = response.AppendData;
// $scope.msg = response.Message;
//});
});
现在就已经看到问题了吧，Ajax调用接口成功了，但是页面却没有更新数据，这就很难受了，好吧，放弃，不纠结了，还是去看看AngularJS的HTTP吧
附上PHP Ajax 跨域问题最佳解决方案
用PHP的朋友可以看看，我们继续
AngularJS实现跨域的几种方法
文档里面也介绍了，我没有犹豫，还是选择使用JSONP。
$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
// The name of the callback should be the string JSON_CALLBACK.
以上是文档介绍的方法，我试了一下，访问成功了，但是返回的数据不会，大家都知道的，使用jsonp访问api要返回指定格式的数据，这里不多说，下面配图，然后现在的问题就是，虽然访问成功了，但是返回的数据却是json类型，js报错
走到这里其实就已经很简单了，我去api项目里面看了一下后台的配置，发现这样访问是进不到配置的设置里面的，参数不对，我就做了一些调整
var MyApp = angular.module("myApp", []);
MyApp.controller('getCity', function ($scope, $http) {
$http.jsonp("http://localhost:8000/api/Account/City?callback=JSON_CALLBACK")
.success(function (response) {
$scope.selectedModel = response.AppendData;
$scope.msg = response.Message;
});
});
把jsonp=...换成我在后台配置的参数
好吧，问题解决了，看到这里我想很多人想对我说一句第四音的：“卧槽！”
其实我的内心也是这样想的下面我配上MVC WebApi后台支持跨域的代码跟jsonp返回数据格式的截图：
这里是用AngularJs返回的，Ajax跟这个返回也是不一样的，有兴趣的可以去上面配图里面找找看。
