I would like to save the details of my candidate after assigning questionnaire and their details like first name, last name and so on. However, I am doing it in two parts in my web api.
This is my angular controller code.
MainApp.controller('CandidateController', ['$scope', '$window', '$http', '$location', '$routeParams', '$filter', '$mdDialog', function ($scope, $window, $http, $location, $routeParams, $filter, $mdDialog) {
$scope.saveCandidate = function () {
if ($scope.mailingSameAsPermanent ) {
$scope.candidateData.MailingAddress.Address1 = "Same";
}
$http.post('api/Candidate/AddCandidate', JSON.stringify($scope.candidateData))
.then(function () { $location.path("/candidate"); },
function () { $scope.message = "Save error"; })
$http.post('api/Candidate/AssignQuestionnaire',
JSON.stringify($scope.candidateData))
.then(function () { $location.path("/candidate"); },
function () { $scope.message = "Save error"; })
};
}]);
How do I post two http posts in one scope?
Related
amcApp.service('utilService', function ($http, $q,$rootScope) {
var getSupportTypes = function () {
var deferred = $q.defer();
$http.get($rootScope.BaseUrl+'vendor/supportTypes')
.then(function daoSuccess(response) {
console.log("Getting Sub Customer Service call success ", response);
deferred.resolve(response);
}, function daoError(reason) {
console.log("Getting SubC data service call error", reason);
deferred.reject(reason);
});
return deferred.promise;
};
return{
getSupportTypes : getSupportTypes,
};
});
Above is the service I defined.
Below is the controller I defined.
amcApp.controller('contractForm', ['$scope', '$http','$rootScope','$filter', '$uibModal', '$state', 'testService','utilService','contractService',
function ($scope, $http,$rootScope, $filter,$uibModal, testService,utilService,contractService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function(response){
$scope.supportTypes = response.data.UtilDataType;
});
}]);
This is the error I'm getting:
Can I get any suggestions?
Check the dependencies what you inject into the controller, you have an extra $state in the array which has not been passed to the function. I would suggest to remove as the following:
amcApp.controller('contractForm', ['$scope', '$http', '$rootScope', '$filter', '$uibModal', 'testService','utilService','contractService',
function ($scope, $http, $rootScope, $filter, $uibModal, testService, utilService, contractService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function (response){
$scope.supportTypes = response.data.UtilDataType;
});
}]);
On the other hand I would simply remove all the not used services, I assume this is working also fine:
amcApp.controller('contractForm', ['$scope', 'utilService', function ($scope, utilService) {
//Service of getting the Support Types.
utilService.getSupportTypes().then(function (response) {
$scope.supportTypes = response.data.UtilDataType;
});
}]);
Just a suggestion - if you keep your code clean it is much easier to figure out the root cause of any issues.
hi all i using angular js i need to transfer the value from one page controller to another page controller and get that value into an a scope anybody help how to do this
code Page1.html
var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
function ($scope, $http, $window, $filter, $notify, $cookieStore)
{
$scope.Message="Hi welcome"
}]);
now i want to show scope message into page2 controller
var app = angular.module("app", ["xeditable", "angularUtils.directives.dirPagination", "ngNotify", "ngCookies","ngRoute"]);
app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore',
function ($scope, $http, $window, $filter, $notify, $cookieStore)
{
///here i want get that scope value
}]);
You can use $rootScope instead of $scope:
// do not forget to inject $rootScope as dependency
$rootScope.Message="Hi welcome";
But the best practice is using a service and share data and use it in any controller you want.
You should define a service and write getter/setter functions on this.
angular.module('app').service('msgService', function () {
var message;
this.setMsg = function (msg) {
message = msg;
};
this.getMsg = function () {
return message;
};
});
Now you should use the setMeg function in Controller1 and getMsg function in Controller2 after injecting the dependency like this.
app.controller('Controller1', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
{
$scope.Message="Hi welcome"
msgService.setMsg($scope.Message);
}]);
app.controller('Controller2', ['$scope', '$http', '$window', '$filter','$notify','$cookieStore', 'msgService',
function ($scope, $http, $window, $filter, $notify, $cookieStore, msgService)
{
///here i want get that scope value
console.log('message from contoller 1 is : ', msgService.getMsg());
}]);
You should use services for it .
Services
app.factory('myService', function() {
var message= [];
return {
set: set,
get: get
}
function set(mes) {
message.push(mes)
}
function get() {
return message;
}
});
And in ctrl
ctrl1
$scope.message1= 'Hi';
myService.set($scope.message1);
ctrl2
var message = myService.get()
Sharing data from one controller to another using service
We can create a service to set and get the data between the controllers and then inject that service in the controller function where we want to use it.
Service :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
Controllers :
app.controller('Controller1', ['setGetData',function(setGetData) {
// To set the data from the one controller
$scope.Message="Hi welcome";
setGetData.setData($scope.Message);
}]);
app.controller('Controller2', ['setGetData',function(setGetData) {
// To get the data from the another controller
var res = setGetData.getData();
console.log(res); // Hi welcome
}]);
Here, we can see that Controller1 is used for setting the data and Controller2 is used for getting the data. So, we can share the data from one controller to another controller like this.
The issue is that I can't seem to send information from Controller 1 to Controller 2... I have my service that sets/gets data but it isn't working. The actual error that I'm getting is that Controller 1's dataService.getData is not a function... when it works elsewhere.
Service 1 (in its own file)
app.service('dataService', function() {
var data, queried;
return {
setData: function(queryData) {
this.data = queryData;
this.queried = false;
},
getData: function() {
this.queried = true;
return this.data;
}
};
});
Controller 1 (sending information)
app.controller('MyCtrl', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller 2 (getting information)
app.controller('MyCtrl2', ['$scope', '$location', '$state', function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
You didn't injected service dataService inside your MyCtrl & MyCtrl2, ensure dependency should be injected before using it.
Controller
app.controller('MyCtrl', ['$scope', '$location', '$state','dataService', //<-added dependency here
function($scope, $location, $state, dataService) {
anotherService.functionName(function(err, data) {
// do some things here
actualService.doesntWork(function(err, data) {
if (!err) {
var query = {};
query.someField = data.someField;
dataService.setData(query);
$state.go("go.somewhere.else");
}
});
});
}]);
Controller2
app.controller('MyCtrl2', ['$scope', '$location', '$state','dataService',//<-added dependency here
function($scope, $location, $state, dataService) {
$scope.buttonPressed = function() {
console.log(dataService.getData());
}
}]);
I'm changing my angular controllers to minification friendly but I am getting a error with my $resource calls. all of my factories look the same as the one i am posting. I have followed the tutorials online but it is not working out for me.
//'use strict';
app.controller('documentCtrl', ['$scope', '$upload', '$filter', '$route', '$sessionStorage','$sce', '$q', '$modal', '$http', '$location', '$rootScope', function (
$scope, $upload, $filter, $route, $sessionStorage, $sce, $q, $modal, $http, $location, $rootScope) {
$scope.docTypes = Type.query(function () { });
$scope.selectType = function () {
var id = $scope.typeId.TypeId
$http.get('/api/apiType/' + id)
.success(function (result) {
$scope.TypeName = result.TypeName
console.log($scope.TypeName);
});
};//
$scope.docPipes = Pipe.query(function () { });
$scope.selectPipe = function () {
var id = $scope.pipeId.PipeId
$http.get('/api/apiPipe/' + id)
.success(function (result) {
$scope.PipeName = result.PipeName
console.log($scope.PipeName);
});
};//
Factory
'use strict'
app.factory('Type',['$resource', function ($resource) {
return $resource('/api/apiType/:id', { id: '#_id' }, {
get: {
method: 'GET', isArray: false // this method issues a PUT request
}
}, {
stripTrailingSlashes: false
});
}]);
app.factory('TypeUpdate',['$http', function ($http) {
return {
update: function (doc) {
return $http.put('/api/apiType/' + doc.TypeId, doc);
}
};
}]);
Error
ReferenceError: Type is not defined
Update
Type is a $resource call defined in my factory.
Is this the way the controllers should be defined? The examples I found online did not include variables.
app.controller('documentCtrl', ['$scope', '$upload', '$filter', '$route', '$sessionStorage','$sce', '$q', '$modal', '$http', '$location', '$rootScope', 'ngTableParams', 'notificationFactory', 'Type', 'Document', 'Plant', 'Pipe', 'Company', 'Location', function (
$scope, $upload, $filter, $route, $sessionStorage, $sce, $q, $modal, $http, $location, $rootScope, ngTableParams, notificationFactory, Type, Document, Plant, Pipe, Company, Location) {
You have declared a factory called "Type". This needs to be listed in your controller dependencies.
I have a controller that updates my awards scope:
Controller 1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
})
}
}])
Controller 2
I have another controller 2 with a click event thats outside of this controllers scope. Is it possible for the controller below to call the $scope.updateAwardScope function from controller 1?
.controller('MainController', function ($rootScope, $scope) {
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});
I've found the use of the factory/service pattern to be a very effective way of reusing code in angular applications. For this particular case you could create an AwardFactory, inject it in your controllers and then call the update function. i.e
AwardFactory
myApp.factory('AwardFactory', ['TokenRestangular', function(TokenRestangular.all) {
var factory = {
awards: []
};
factory.update = function() {
resource = TokenRestangular.all('award');
resource.getList().then(function (awards) {
factory.awards = awards;
});
return factory.awards; // You can skip the return if you'd like that
};
return factory;
}]);
YourController
.controller('MainController', function ($rootScope, $scope, AwardFactory) {
$scope.updateAwardScopeClick = function () {
AwardFactory.update();
}
});
Hope it helps!
You can use angular broadcast and receive
Controller1
.controller("awardController", ['$scope', '$rootScope', 'Restangular', "$q", "$location", "TokenRestangular",
function ($scope, $rootScope, Restangular, $q, $location, TokenRestangular) {
$scope.updateAwardScope = function () {
resource = TokenRestangular.all('award');
resource.getList()
.then(function (awards) {
$scope.awards = awards;
$rootScope.broadcast("update.awards");
})
}
}])
Controller 2
.controller('MainController', function ($rootScope, $scope) {
$rootScope.$on('update.awards', function(){
$scope.updateAwardScopeClick();
});
$scope.updateAwardScopeClick = function () {
// somehow call function from controller 1
}
});