I have an angularjs controller which i wanted to pass data to other angularjs controller, and here i am not using angularjs routing, only using MVC routing,
As i am using MVC Routing, i had passed data from angularjs controller to MVC controller action method, and from there i have to return to another angularjs controller, i am unable to pass data to the other controller or even it is not returning to the MVC routed View(), and in angularjs controller i used $window.location.href to rediect to the expected view, But unablt to pass data
AngularJS Controller
$http.post(attserviceBasePath + '/Dashboard/PostMembers', group)
.then(
function (response) {
window.location.href = attserviceBasePath + '/Attendance/Dashboard/GroupedTeamMembers';
}, function (error) {
//console.log(error);
});
MVC Controller:
[HttpPost]
public ActionResult PostMembers(GroupedMembers grpMembers)
{
var result = grpMembers;
return RedirectToAction("GroupedTeamMembers", result);
}
public ActionResult GroupedTeamMembers(GroupedMembers grouped)
{
return View(grouped);
}
it is not working ...
please help me to pass data from one angularjs controller to another angularjs controller through MVC controller...
Thanks In Advance.......
You have to use sessions to pass data between controllers. check this one ex
Related
I'm building a rest api with fosrestbundle and I manage the frontend with angular and Twig template. One on my url address looks like this :
http://mywebsite/myroute/idContain
When I load the url in my browser, in a twig template (kind of html), I retrieve the parameter "idContain" (comming from a fosrestbundle controller) with ng-init of angularjs like this :
<div class="container-fluid" ng-init="getContainByID({{ idContain }})">
//...lot html div with angularjs directives
</div>
And immediately, ng-init will go to my angularJS app finds getContainByID(idContain) to run it.
This one looks like this :
angular.module("myApp", ["ngSanitize", 'angular.filter', 'ui.tinymce', ...])
.config(function($interpolateProvider, ...) {
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
})
.controller("myCtrl",function ($filter,..., myService)
{
// lot of code...
$scope.getContainByID = function(idContain)
{
$scope.currentContain = myService.getContains(idContain);
$scope.containRoot = $scope.currentContain.contain.containRoot;
...
}
// lot of code...
}
The fact is that, myService.getContains(idContain) come from my rest service looking like this :
angular.module("MyServiceRest", ['ngResource'])
.factory("myService", function ($rootScope, $resource) {
var apiData = $resource(
"/api", {},
{
...
"getContains": {method: 'GET', isArray: false, url: "mywebsite/api/myroute/:containid"}
...
});
return {
getContains: function (idContain) {
return apiData.getContains({containid: idContain});
}
}
});
Now the problem is, when I run my angularjs App, $scope.containRoot doesn't wait until myService.getContains(idContain) (coming from my asynchroeous $resource service) finished to load, and caused errors making my webapp crash.
How can I do, to force $scope.containRoot and the rest of my angular code to waiting until myService.getContains(idContain) (connected to the api resource) completly finished to load before continuing ?
$resource makes an asynchronous request but immediately reurns an empty object or array.
There are numerous ways you could handle your issue.
One would be not to worry about declaring $scope.containRoot and just using currentContain.contain.containRoot in the view. This property will get rendered after the request is received
Another is to use the $promise that is also returned by $resource and assign the scope property in promise callback
$scope.currentContain = myService.getContains(idContain);
$scope.currentContain.$promise.then(function(){
$scope.containRoot = $scope.currentContain.contain.containRoot;
});
Another is to use a routing resolve based on the same promise so the route( or state depending on router) is noot entered until the request is complete
I am working on an MVC5 + angularJS project.
I have an angularjs code that hits MVC controller. And I expect the view to show. But The view does not come up. the screen remains the same.
My MVC method:
[HttpGet]
public ActionResult InitiatePayment()
{
string strForm="";
return View(model: strForm);
}
When I access the controller from URL the view comes up.
But when I access the method from angularJs method, the view does not come up. The old screen remains as it is. There are no error thrown either.
My angularJs code:
payment.factory("PaymentService", function ($http) {
return {
getSearchresult: function ( callback) {
return $http.get("/Payment/MigsPayment/InitiatePayment/").success(callback);
}
}
});
When I type in the browser:
http://localhost:52095/Payment/MigsPayment/InitiatePayment
the IntiatePayment view comes up. So what am I missing or making mistake?
I have a controller I am calling an API on MVC.
This API returns me back a partial view, This partial view is associated with my controller from which I am calling the API .
Now as soon as I getting the partial view back, I am vanishing the html of the view and then re-rendering the view.
but my controller method never get initated, I guess because the controller is already initiated.
Question is can I call method of controller when it loads back.
html :
<div id="pageholder">
<-- here is my view , which I am changing thru API , and I want to re render it, and also want to perform certain controller methods -->
</div>
ANGULAR :
$http({
method: 'POST',
url: url,
data: {
config: item,
parameter: itemParametrs
}
}).success(function(data, status) {
$('#pageholder').empty();
$scope.username="username";
$('#pageholder').html(data);
});
PLEASE HELP!
You need to compile that new HTML you get. No directive or controller will be watched by Angular if you dynamically write HTML:
.success(function(data, status) {
$scope.username="username";
var $pholder = $('#pageholder');
$pholder.empty();
$pholder.html(data);
// Recompile the HTML so angular can process it
$compile($pholder)($scope);
});
PS: you will need to get the $compile service in your directive/controller (the same way you get $http)
im using spring mvc with angular js.
i would like to know if there's a way to use angularjs router instead
using spring mvc router?
//Java
#RequestMapping(value = "cases", method = RequestMethod.GET)
public String showCase() {
return "case/cases";
}
//angular
app.angular.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
controller : 'UserController',
templateUrl : 'login.html'
}).when('/case', {
controller : 'CaseController',
templateUrl : 'case/cases.html',
})
} ]);
If you want to use angularjs routing features, you need to design restful api with spring. Your controllers should return json data that can be easily consumed by angularjs.
I am making an app and I was wondering what is a better way to approach this. I want to use Laravel as the backend, and AngularJS as the frontend.
Should I then leave the entire rendering and View completely to AngularJS and only use Laravel through AJAX calls? Or should I still load the basics from Laravel, and use AngularJS to enhance the experience?
Yes. You could use Laravel as RESTFul API and consume from client without using blade (so if you want it)
Here example:
class PostController extends \BaseController {
/**
* Display a listing of the resource.
*
* #return Response
*/
public function index()
{
return Post::orderBy('created_at', 'desc');
}
}
service in angular: ( I use Restangular lib, but you can use $http)
app.factory("PostsService", function(Restangular) {
return {
/*
* GET /posts -> Trae todos los posts
*/
all: function() {
return Restangular.all('posts').getList();
}
}
});
controller angular:
app.controller('HomeController', function($scope, PostsService){
PostsService.all().then(function(posts){
$scope.posts = posts.data;
});
});