问题描述
我开始与Angularjs +导轨后端,并试图从服务器获取用户数据 - 相当于为控制器/指数
行动轨
我按照一些教程,发现这个code是最清楚的....
问题
1.如何正确链接角模块插入看法?
2.如何在这篇文章中使用预输入和样本数据来获取数据。
这里是
code是如下:
的意见
< DIV NG-应用='用户'>
< DIV CLASS ='集装箱液'NG控制器=UsersIndexCtrl>
< pre>产品型号:{{结果| JSON}}< / pre>
<输入类型=文本NG模型=结果预输入=的用户建议的建议($ viewValue)>
< / DIV>
< / DIV>
控制器
<脚本> // ['ui.bootstrap','ngResource']) VAR应用= angular.module('用户',['ui.bootstrap','ngResource']);
//工厂 - 资源的用户
//相当于轨用户/指数
app.factory(用户,函数($资源){
返回$资源('/ users.json',{},{
指数:{方法:GET,IsArray的:真正}
});
}); //工厂 - 用户资源
//相当于用户显示,更新
app.factory(用户,函数($资源){
返回$资源('/用户/:user_id.json',{},{
显示:{方法:GET},
更新:{方法:把'}
});
});//控制器 - 用户/指数
//相当于导轨控制器轨/索引 VAR UsersIndexCtrl =功能($范围,用户){ $ scope.users =用户;
};< / SCRIPT>
和我在这里栈,我得到这个错误:
错误:未知提供商:usersProvider< - 用户
此code的目标是使用typehead并提供数据给用户。
我的'/users.json'网址如下:
[{FULL_NAME:利亚卡特赖特,ID:1,图片网址:无icon.jpg},{FULL_NAME:希尔顿特纳,标识:2,图片网址:无icon.jpg},{FULL_NAME:奥布里巴罗斯,ID:3,图片网址:无icon.jpg}, {FULL_NAME:唐尼克里斯,ID:4,图片网址:无icon.jpg},{FULL_NAME:Eryn拉特,ID:5,图片网址:无icon.jpg},{FULL_NAME:恺迪来费伊,ID:6,图片网址:无icon.jpg},{FULL_NAME:阿莉特龙普,身份证 7,图片网址:无icon.jpg},{FULL_NAME:波多黎各克莱恩,ID:8,图片网址:无icon.jpg},{FULL_NAME: 古德龙敢为天下先,ID:9,图片网址:无icon.jpg},{FULL_NAME:内森Langworth,ID:10,图片网址:无icon.jpg },{FULL_NAME:迪安娜斯特罗曼,ID:11,图片网址:无icon.jpg},{FULL_NAME:仙妮亚斯特罗曼,ID:12,IMAGE_URL :无icon.jpg},{FULL_NAME:卢佩哈维,ID:13,图片网址:无icon.jpg},{FULL_NAME:阿姆斯特朗康斯 ID:14日,图片网址:无icon.jpg},{FULL_NAME:里根特伦布莱,ID:15日,图片网址:无icon.jpg},{ FULL_NAME:默里赛普斯,ID:16,图片网址:无icon.jpg},{FULL_NAME:Dandre克洛科,ID:17日,图片网址:NO- icon.jpg},{FULL_NAME:Haylee莫纳汉,ID:18日,图片网址:无icon.jpg},{FULL_NAME:佛罗伦萨Harber,ID:19 图片网址:无icon.jpg},{FULL_NAME:诺韦尔托·霍普,ID:20,图片网址:无icon.jpg}]
您必须注用户
不是用户
,它是区分大小写的。
旁注:
没有必要建立两个模型,替换:
app.factory('用户',函数($资源){
返回$资源('/ users.json',{},{
指数:{方法:GET,IsArray的:真正}
});
});app.factory(用户,函数($资源){
返回$资源('/用户/:user_id.json',{},{
显示:{方法:GET},
更新:{方法:把'}
});
});
与
app.factory(用户,函数($资源){
返回$资源(用户/:ID,{ID:'@id'},{
指数:{方法:GET,IsArray的:真实,responseTyp的:JSON},
显示:{方法:GET,responseTyp的:JSON},
更新:{方法:把',responseTyp的:'JSON'}
});
})
其他的东西,在你的控制器,做的:
VAR UsersIndexCtrl =功能($范围,用户){
$ scope.users = User.index();
};
最后一件事,可以考虑使用:
I am starting with Angularjs + rails backend and trying to fetch users data from the server - equivalent to to controller/index
action in rails.
I have followed several tutorials and found this code as the most clear one....
questions1. How to properly link angular module into views ?2. How to fetch data using typeahead and sample data in this post.
here is plunker version of the code
Code is as follows:
views
<div ng-app='users'>
<div class='container-fluid' ng-controller="UsersIndexCtrl">
<pre>Model: {{result | json}}</pre>
<input type="text" ng-model="result" typeahead="suggestion for suggestion in users($viewValue)">
</div>
</div>
controller
<script>
// ['ui.bootstrap', 'ngResource'])
var app = angular.module('users', ['ui.bootstrap', 'ngResource']);
// factory - resources users
// equivalent to rails users/index
app.factory('Users', function($resource) {
return $resource('/users.json', {}, {
index: { method: 'GET', isArray: true}
});
});
// factory - user resource
// equivalent to users show, update
app.factory('User', function($resource) {
return $resource('/users/:user_id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT' }
});
});
// controller - users/ index
// equivalent to rails controller rails/index
var UsersIndexCtrl = function($scope, users) {
$scope.users = users;
};
</script>
and I am stack here, as I am getting this error:
Error: Unknown provider: usersProvider <- users
The goal of this code is to use typehead and provide data to the user.
My '/users.json' url is as follows:
[{"full_name":"Lia Cartwright","id":1,"image_url":"no-icon.jpg"},{"full_name":"Hilton Turner","id":2,"image_url":"no-icon.jpg"},{"full_name":"Aubrey Barrows","id":3,"image_url":"no-icon.jpg"},{"full_name":"Donnie Kris","id":4,"image_url":"no-icon.jpg"},{"full_name":"Eryn Rath","id":5,"image_url":"no-icon.jpg"},{"full_name":"Caden Fay","id":6,"image_url":"no-icon.jpg"},{"full_name":"Arlie Tromp","id":7,"image_url":"no-icon.jpg"},{"full_name":"Rico Klein","id":8,"image_url":"no-icon.jpg"},{"full_name":"Gudrun Dare","id":9,"image_url":"no-icon.jpg"},{"full_name":"Nathan Langworth","id":10,"image_url":"no-icon.jpg"},{"full_name":"Deanna Stroman","id":11,"image_url":"no-icon.jpg"},{"full_name":"Shania Stroman","id":12,"image_url":"no-icon.jpg"},{"full_name":"Lupe Harvey","id":13,"image_url":"no-icon.jpg"},{"full_name":"Constance Armstrong","id":14,"image_url":"no-icon.jpg"},{"full_name":"Reagan Tremblay","id":15,"image_url":"no-icon.jpg"},{"full_name":"Murray Sipes","id":16,"image_url":"no-icon.jpg"},{"full_name":"Dandre Klocko","id":17,"image_url":"no-icon.jpg"},{"full_name":"Haylee Monahan","id":18,"image_url":"no-icon.jpg"},{"full_name":"Florence Harber","id":19,"image_url":"no-icon.jpg"},{"full_name":"Norberto Hoppe","id":20,"image_url":"no-icon.jpg"}]
You must inject Users
not users
, it's case sensitive.
Side notes:
No need to create two models, replace:
app.factory('Users', function($resource) {
return $resource('/users.json', {}, {
index: { method: 'GET', isArray: true}
});
});
app.factory('User', function($resource) {
return $resource('/users/:user_id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT' }
});
});
with:
app.factory('User', function($resource) {
return $resource("users/:id", { id: '@id' }, {
index: { method: 'GET', isArray: true, responseType: 'json' },
show: { method: 'GET', responseType: 'json' },
update: { method: 'PUT', responseType: 'json' }
});
})
Other thing, in your controller, do:
var UsersIndexCtrl = function($scope, User) {
$scope.users = User.index();
};
Last thing, consider using: Angular Rails resource
这篇关于如何使用Rails服务器取角指标数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!