如何Rails的意见与angularjs NG-视图集成？ [英] How to integrate Rails views with angularjs ng-view?
问题描述
我已经创建Rails视图（ERB）。不过，我想将其整合到angularjs $ routeProvider ，但我不知道我应该填成什么网址 templateUrl 给我相应的导轨视图。例如，我想：
$ routeProvider.when（'/页/富'，{
templateUrl：/页/ foo的，
控制器：PageFoo
}）
但结果显示为空白页。
有两个特征，甚至integrateable？还是我创造的，而不是使用preexisting .html.erb 的.html 文件， p>
角JS提供了自己的路线。导轨当你想你的意见与数据库（CRUD）连接线路将始终使用。这是与数据绑定angular.js现在我会告诉你如何与导轨使用它...
我想用JS角度的看法添加新用户，并列出所有用户。我会用钢轨作为后端存储的用户数据库中，所以我将创建user_controller
-
首先创建的用户资源。我们不会产生任何的意见，所以要小心为
导轨摹资源的用户名：字符串 -
然后去route.rb检查有创建路由，并创建索引操作Home控制器，我们将作为我们的单页应用程序，其中我们的产量将产量使用。
导轨摹控制器入户指标
根：家＃指数 -
键入终端这个命令，你会看到我们的7路线。我们从来不使用新的和编辑的方法，因为新的和编辑到JSON不响应。
耙路线 -
现在我们想要一个独特的名字所有用户，以便去create_user迁移并取消这条线，然后我们将迁移数据库。
add_index：用户：姓名，唯一：真
耙分贝：迁移 -
现在修改我们的控制器，使所有的数据获取和插入将与JSON格式来完成。所以把这个code里面users_controller.rb，如果你使用的是轨道4然后按照这个否则不是。属性值将模型调整。
类UsersController＆LT; ApplicationController中
respond_to代码：JSON 高清指数
respond_with User.all
结束 打造高清
respond_with User.create（user_params）
结束 私人的
高清user_params
params.require（：用户）.permit（：名称）
结束
结束它的时间在我们的Rails应用程序中使用angulajs
-
转到application.html.erb替换此标记行
＆LT; HTML NG-应用=userApp＆GT; -
现在加入驴/ JavaScript的angular.js文件，从 http://angularjs.org/
-
现在，我们将创建一个控制器来处理我们的角度应用的路线，然后就知道该控制器要由我的东西。在终端，从而输入此
的mkdir -p应用程序/资产/ Java脚本/角/控制器 -
现在让我们创建控制器文件本身。我打电话这个控制器中的userCtrl，因此，我们的文件名会
应用程序/资产/ Java脚本/角/控制器/ userCtrl.js.coffee -
在控制器userCtrl
应用程序= angular.module（userApp，[ngResource]）@userCtrl =（$范围，$资源） - GT;
用户= $资源（/用户，{ID：@id}，{更新：{方法：PUT}}）
$ scope.users = User.query（） $ scope.createUser = - ＆GT;
用户= User.save（$ scope.newUser）
$ scope.users.push（用户）（这将插入新的用户记录到数据库中，通过创建的createUser方法）
-
创建接受来自用户的输入写在家庭/ index.html.erb这个code的视图。
＆LT; DIV NG控制器=userCtrl＆GT;
＆LT;形式NG提交=的createUser（）＆GT;
＆LT;标签＆gt;输入姓名和LT; /标签＆gt;
＆LT;输入类型=文本占位符=输入用户名NG模型=newUser.name/＆GT;
＆LT;按钮NG点击=的createUser（）级=按钮微小的＆GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT;
＆LT;！ - 列出所有usres - ＆GT;
＆LT; H4 NG秀=$用户解决和放大器;＆功放; users.length→1＆GT;所有用户和LT; / H4＆GT;
＆LT;跨度NG重复=C用户的＆GT;
{{c.name}}＆LT; BR＆GT;
＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
运行应用程序并观察输出。
I have created rails view (ERB). However, I want to integrate it into angularjs $routeProvider, but I don't know what url should I fill into templateUrl to give me the appropriate rails view. For example, I tried:
$routeProvider.when('/pages/foo', {
templateUrl: "/pages/foo",
controller: "PageFoo"
})
But the result appears as a blank page.
Are the two features even integrateable? Or do I have to create new .html files, instead of using preexisting .html.erb
Angular js provides its own routes. rails routes will always be used when you want to connect your views with database(CRUD). that is data binding with angular.js now i will show you how to use it with rails...
I want to add new user using angular js views and list all users. i will use rails as backend to store users in database so i will create user_controller
First Create resource of user. we will not create any views so be carefull for that
rails g resource user name:stringThen go to route.rb and check there is a route created, and create Home controller with index action that we will use as our single page application where our output will be yield.
rails g controller home index root to: "home#index"type this command on terminal where you will see our 7 routes. we never use new and edit method, because new and edit don't respond to json.
rake routesNow we want all user with a unique name so go to create_user migration and uncomment this line and then we will migrate the database.
add_index :users, :name, unique: true rake db:migrateNow modify our controller so that all data fetching and insertion will be done with json format. so put this code inside users_controller.rb, if you are using rails 4 then follow this otherwise not. attributes will be adjustable in model.
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 endIts time to use angulajs in our rails application
Go to application.html.erb replace tag line with this
<html ng-app="userApp">Now add angular.js file in asses/javascripts, download it from http://angularjs.org/
Now we will create a controller to handle our angular application routes to know then that this controller wants something from me. so type this on terminal
mkdir -p app/assets/javascripts/angular/controllersNow let's create the controller file itself. I'm calling this controller the "userCtrl", Thus our filename will be app/assets/javascripts/angular/controllers/userCtrl.js.coffee
In controller 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)(This will insert new user record into database, by creating createUser method)
Create a view for taking input from user write this code in 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>
Run application and watch output.
这篇关于如何Rails的意见与angularjs NG-视图集成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
