use*_*639 7 ruby-on-rails angularjs
我创建了rails视图(ERB).但是,我想将它集成到angularjs中$routeProvider,但我不知道应填写哪个url templateUrl以给我相应的rails视图.例如,我尝试过:
$routeProvider.when('/pages/foo', {
templateUrl: "/pages/foo",
controller: "PageFoo"
})
但结果显示为空白页面.这两个功能是否可以集成？或者我是否必须创建新.html文件,而不是使用预先存在的文件.html.erb
SSR*_*SSR 16
Angular js提供自己的路线.当您想要将视图与数据库(CRUD)连接时,将始终使用rails路由.这是与angular.js的数据绑定现在我将向您展示如何使用rails ...
我想使用angular js视图添加新用户并列出所有用户.我将使用rails作为后端来存储数据库中的用户,因此我将创建user_controller
首先创建用户资源.我们不会创建任何视图,所以要小心
rails g resource user name:string
然后转到route.rb并检查是否有创建的路由,并创建带有索引操作的Home控制器,我们将使用它作为单页面应用程序,我们的输出将是yield.
rails g controller home index
root to: "home#index"
在终端上输入此命令,您将看到我们的7条路线.我们从不使用new和edit方法,因为new和edit不响应json.
rake routes
现在我们希望所有用户都具有唯一名称,因此请转到create_user migration并取消注释该行,然后我们将迁移数据库.
add_index :users, :name, unique: true
rake db:migrate
现在修改我们的控制器,以便所有数据获取和插入都将以json格式完成.所以把这个代码放在users_controller.rb中,如果你使用的是rails 4,那么请不要这样做.属性可在模型中调整.
class UsersController < ApplicationController
respond_to :json
def index
respond_with User.all
end
def create
respond_with User.create(user_params)
end
private
def user_params
params.require(:user).permit(:name)
end
end
是时候在我们的导轨应用中使用angulajs了
转到application.html.erb替换标记行
<html ng-app="userApp">
现在在asses/javascripts中添加angular.js文件,从http://angularjs.org/下载
现在我们将创建一个控制器来处理我们的角度应用程序路由,然后知道这个控制器需要我的东西.所以在终端上键入
mkdir -p app/assets/javascripts/angular/controllers
现在让我们自己创建控制器文件.我将这个控制器称为"userCtrl",因此我们的文件名将是app/assets/javascripts/angular/controllers/userCtrl.js.coffee
在控制器userCtrl中
app = angular.module("userApp", ["ngResource"])
@userCtrl = ($scope, $resource) ->
User = $resource("/users", {id: "@id"}, {update: {method: "PUT"}})
$scope.users = User.query()
$scope.createUser = ->
user = User.save($scope.newUser)
$scope.users.push(user)
(这将通过创建createUser方法将新用户记录插入数据库)
创建一个视图,用于从用户那里获取输入,在home/index.html.erb中编写此代码.
<div ng-controller="userCtrl">
<form ng-submit="createUser()">
<label>Enter Name</label>
<input type="text" placeholder="Enter user name" ng-model="newUser.name" />
<button ng-click="createUser()" class="button tiny">Submit</button>
</form>
<!-- List all usres -->
<h4 ng-show="users.$resolved && users.length > 1">All users</h4>
<span ng-repeat="c in users">
{{c.name}}<br>
</span>
</div>
运行应用程序并观察输出.
| 归档时间： |
|
| 查看次数： |
3916 次 |
| 最近记录： |