通过服务Angular向服务器发送$routeParam
Sending a $routeParam to the server through a service Angular
你必须忍受我,因为我是自学成才的。我的服务器上有一个php页面,它需要一个$_get变量来对服务器端而不是客户端的数据进行排序。我在Angular中使用routeParams来发送变量。这是有效的,但是它只在刷新网页时才有效。我的头撞到墙上很疼,请有人帮帮我。
控制器:
app.controller('JuiceController', ['$scope', 'juices', function($scope, juices) {
juices.success(function(data){
$scope.juices = data;
});
}]);
服务:
app.factory('juices', ['$http', '$routeParams',function($http, $routeParams) {
return $http.get('http://madcow-app.dev/application/backend/api/products.php', {
params: {prod: $routeParams.prod}
})
.success(function(data) {
return data;
})
.error(function(err){
return err;
});
}]);
Html输出(果汁视图):
<div class="juice-wrap" ng-repeat="juice in juices">
<div class="juice-img"><img ng-src="{{ juice.imgpath }}" width="163" height="176" alt=""/></div>
<div class="juice-rght">
<div class="juice-title">{{ juice.name }}</div>
<div class="juice-desc">{{ juice.descrip }}</div>
路线提供商
$routeProvider
.when('/', {
templateUrl: 'script/views/home.html'
})
.when('/categories/', {
controller: 'CatController',
templateUrl: 'script/views/categories.html'
})
.when('/juice/:prod', {
controller: 'JuiceController',
templateUrl: 'script/views/juice.html'
})
.when('/events/', {
controller: 'EventController',
templateUrl: 'script/views/events.html'
})
.when('/qr/', {
templateUrl: 'script/views/qr.html'
})
.when('/feedback/', {
templateUrl: 'script/views/feedback.html'
})
.otherwise({
redirectTo: '/'
php函数输出json(输出到下面的php控制器,并将类别id作为变量:)
return json_encode($results);
到php控制器(这是angular服务/工厂从中提取产品json数组的页面:
<?php
include "../../init.php";
if (isset($_GET['prod']))
{
echo $MC->Api->getProductsApi($_GET['prod']);
}
else
{
echo 'error';
}
这是类别html:
<div class="cat-btn" ng-repeat="cat in cats">
<a href="#/juice/{{cat.catid}}">
<img ng-src="{{ cat.imgpath }}" width="363" height="195" alt=""/>
<div class="cat-btn-text"> {{ cat.name }} </div>
</a>
基本上,我想要实现的是,当用户在前端单击一个类别时,使用类别id作为php函数的过滤器,以角度路由到产品视图,从而只使用该类别中的果汁填充json输出。
我不确定我是否应该这样做,或者我是否需要从另一个角度击球。请记住,我是一个完整的javascript noob和外行将是伟大的答案。
提前谢谢。。。。。
工厂:
app.factory('juices', [
'$http', '$routeParams', function ($http, $routeParams) {
var self = this;
function getJuices() {
$http.get('http://madcow-app.dev/application/backend/api/products.php', {
params: {prod: $routeParams.prod}
})
.success(function (data) {
self.juices = data.data;
})
.error(function (err) {
});
}
return {
getJuices: getJuices,
juices: self.juices
}
}
]);
控制器:
app.controller('JuiceController', [
'$scope', 'juices', function ($scope, juices) {
juices.getJuices();
$scope.$watch(function () {
return juices.juices
}, function (newJuices, oldJuices) {
// This is triggered when juices.juices changes
// newJuices containes the juices retrieved from server
// This is needed because it is asynchronous
});
}
]);
相关文章:
- 使用JSP从服务器检索和显示图像
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 客户端服务器REST API captcha实现
- 正在将base64 jpeg从input-type=file上传到服务器
- Webpack开发服务器和React服务器端渲染
- 提示使用服务器端事件处理程序激活JavaScript
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 如何使用Socket.io将命令从客户端发送到服务器
- jQuery blueimp文件上传:将N-1个文件上传到IE中的服务器
- 使用jasmine模拟对服务器的调用
- 如何轻松地将服务器端变量从Java代码转移到客户端代码
- 从客户端获取修改后的对象,并将其与服务器上的原始对象组合
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 如何使用Javascript将空数组发送到PHP服务器
- 如何在HTML中显示服务器对象变量
- 如何配置分析以将数据发送到我自己的服务器
- 我无法使用angularJs($http)访问服务器
- 如何检测第三方广告服务器请求
- 如何:浏览器将JSON发送到服务器
- 通过服务Angular向服务器发送$routeParam