Angular on Rails

 
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。
是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。
如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。
AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。
但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

1. 下载angular.min.js到
 assets/javascripts/angular.min.js

2. 创建一个单页面来测试
 rails g controller home index
 rails g model User name:string contry:string
 rake db:migrate

3. 创建测试数据
 10.times do
     User.create({name: "zhangsan", contry: "beijing"})
 end

4.指令说明
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
ng-controller 指令定义了应用程序控制器。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
控制器对象有一个属性：$scope.name

加入一下内容到：views/home/index.html.erb

```ruby
<div ng-app="" ng-controller="customersController">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.contry }}
  </li>
</ul>
</div>

<script>
function customersController($scope,$http) {
    $http.get("http://localhost:3000/home/get_names")
    .success(function(response) {
        $scope.names = response;
    });
}
</script>
```

angular痛哟$http发送请求，获取用户信息后，放回给$scope.names属性
在试图页面通过ng-repeat绑定数据names，循环输出在页面。

4. 控制器，从数据库中获取所有用户json，返回姓名和所在城市

class HomeController < ApplicationController
  def index
  end

  def get_names
      users = User.all.map{|u| {name: u.name, contry: u.contry}}
      render :json => users
  end
end

5. 配置路由
get "home/get_names"

6. 访问首页localhost:3000

zhangsan, beijing
zhangsan, beijing
zhangsan, beijing
zhangsan, beijing
zhangsan, beijing
zhangsan, beijing
...