Rails+AngularJS 实现Ajax前后端完全分离

因为网上的教程字数太多，而且都是英文的（没错这才是重点）。想要前后端完全分离的我完全懒得考虑这么多，就自己开始折腾能不能很轻松的完全只是用Control和Model而不管View，不引入gem，现在简单的小demo终于成功了。

Rails的初始准备见：Rails 处理跨站请求

准备完这个，接下来我们就只要管Control怎么写就行了。

首先来尝试一下get，最简单。

    def index
        json_str = {"xx" => "hello"}.to_json
        render :json=>json_str, status=>'200'
    end

在这里我们用了一个to_json方法来处理，把Hash转换为json格式，to_json方法是Rails中特有的，并非Ruby本身的方法。

接着我们就可以滚去前端了：
在需要调用的位置使用：$http.get('http://localhost:3000');，这是最简单的获取方法，当然我们自然不可能获取了就走人，这只是一个测试，接下来我们要使用then来进行get之后的操作。

提示：使用$http接收之后json都会经过fromJson等一系列方法，务必保证收到的是JSON,否则会报错。

.then(function(res) {
    console.log(res);
    angular.forEach(res.data, function(value, key) {
        $scope.message.push({author: key, content: value});
    });
});

我们把get的分号去掉，加上这个，为了确定res收到的是什么，我们可以在控制台输出看一下，res.data里存储的就似乎收到的json（Object），用angular.forEach遍历即可。

这样一个简单的get就完成了。

POST相比较之下就比较折腾了，但也不是很复杂，最主要的是要确定怎么样才能获取POST的值，这里并没有像$_POST这样简单的变量。

在[Controller 详解]()中我们知道：

如果在初始化脚本中开启了 config.wrap_parameters 选项，或者在控制器中调用了 wrap_parameters 方法，可以放心的省去 JSON 格式参数中的根键。Rails 会以控制器名新建一个键，复制参数，将其存入这个键名下。因此，上面的参数可以写成：

{ "name": "acme", "address": "123 Carrot Street" }

会自动进行转换，然后就可以用对应控制器名来访问。

这里我们检查config>initializers的对应文件夹，发现默认开启，，使用这个黑科技。

    def create
        json_str = params[:article]
        json_str = json_str.to_json
        render :json=>json_str, status=>'200'
    end

我们的Controller是ArticlesController，所以很明显的这样子获取传进来的值，转换为json，接着传出（只是一个测试，理论上接下来要实验写入数据库）。

接下来开始写前端的部分：$http.post('http://localhost:3000/create', message)简单的POST操作，尝试是否成功获取到值。

post的参数非常有意思：post(url, data, [config]);其中data可以传入任意类型，他会尽可能的转换成json传入，之后获取到的值也会用fromJson尽可能的转换，供之后使用。

在post的之后是由是否成功来进行分支处理的，这里我们只写success。

.success(function(res) {
    console.log(res);
    $scope.message.push({author: res.author, content: res.content});
});

一样，可以在控制台看看输出的值，会发现是一个json的Object，没有其他信息，直接使用即可。