I want to factor out the angularjs $http success callback function so that instead of having two (or N) anonymous callback functions I have one named callback function.
Here are the two controllers:
function CreateCurriculumCtrl($scope, $http, $location, select2Options){
$scope.curriculumInfo = {};
$scope.curriculumInfo.statusOK = true;
$scope.select2Options = select2Options;
$scope.saveCurriculum = function(){
$http.post('bignibou/curriculum/new', $scope.curriculumInfo).success(function(curriculumInfo) {
if(curriculumInfo.statusOK == true){
$scope.curriculumInfo.statusOK=true;
$location.path('/view/'+curriculumInfo.curriculum.id);
}
else{
$scope.curriculumInfo.statusOK = false;
$scope.curriculumInfo.errors = curriculumInfo.errors;
}
});
};
}
function EditCurriculumCtrl($scope, $http, $location, select2Options, $routeParams){
$scope.curriculumInfo = {};
$scope.curriculumInfo.statusOK = true;
$scope.select2Options = select2Options;
$scope.id = $routeParams.id;
$http.get('/bignibou/utils/findCurriculumById.json',{params: {id: $routeParams.id}}).success(
function(curriculum){
$scope.curriculumInfo.curriculum = curriculum;
});
$scope.editCurriculum = function(){
$http.post('bignibou/curriculum/edit/'+$routeParams.id, $scope.curriculumInfo)
.success(function(curriculumInfo) {
if(curriculumInfo.statusOK == true){
$scope.curriculumInfo.statusOK=true;
$location.path('/view/'+curriculumInfo.curriculum.id);
}
else{
$scope.curriculumInfo.statusOK = false;
$scope.curriculumInfo.errors = curriculumInfo.errors;
}
});
};
}
I am not sure how to do that because what will become the named callback function has a couple of dependencies (i.e. $scope and $location).
If I extract the function (named callback) out of the angularjs controllers, then the named
callback has no longer access to its dependencies.
Can anyone please help with factoring out the success callback function and making sure the dependencies are satisfied?
Just pass them as arguments.
First, $http.post expects the callback to accept one argument. So we write the function that post expects:
function (curriculumInfo) {
// .....
}
But the body of the function needs access to $scope and $location. So we write a function that accepts those and return the function that post expects:
function (scope,location) {
return function (curriculumInfo) {
// ... use scope and location in here
}
}
Now we can name the function appropriately. Lets see, it's handling the response to new curriculum so I'd call it either new_curriculum_callback or new_curriculum_callback or handle_new_curriculum to indicate that it's a callback:
function handle_new_curriculum (scope,location) {
return function (curriculumInfo) {
}
}
Now you can call it to return the callback function to post:
$http
.post('bignibou/curriculum/new',$scope.curriculumInfo)
.success(handle_new_curriculum($scope,$location));
Create a Curriculum service and refactor every call to the backend into it.
Your controllers shouldn't care on how to getting the data. Inject the Curriculum service into your controllers. Your controllers then simply call functions on the Curriculum service and get the data.
angular.module('resources.curriculum', ['..'])
.factory('Curriculum', function ($http, $q) {
return {
create: function(dataToSave) {
var deferred = $q.defer()
http.get('...').success(function(data) {
deferred.resolve(data)
}).error(function(err) {
deferred.reject(err)
})
return deferred.promise
}
}
})
.controller('SomeCtrl', function($scope, Curriculum) {
$scope.someValue = Curriculum.create($scope.someDataToSave)
})
You would probably want to create angularjs service and call particular request on click of some button. This way you call requests in a synchronous way.
Related
I am new to angularjs and so i was going through the basic examples i found online initially just to understand the working and concepts used. When i encountered the concept of "factory service creation" (which is a way to expose data from server to views in and angularjs), i found it difficult to understand the flow between the service's function arguments and the calls made to it .
`<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'country-list.html',
controller: 'CountryListCtrl'
}).
when('/:countryName', {
templateUrl: 'country-detail.html',
controller: 'CountryDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
});
countryApp.factory('countries', function($http){
return {
list: function(callback){
$http.get('countries.json').success(callback);
},
find: function(name, callback){
$http.get('countries.json').success(function(data) {
var country = data.filter(function(entry){
return entry.name === name;
})[0];
callback(country);
});
}
};
});
countryApp.controller('CountryListCtrl', function ($scope, countries){
countries.list(function(countries) {
$scope.countries = countries;
});
});
countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
countries.find($routeParams.countryName, function(country) {
$scope.country = country;
});
});
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>`
so in the code i ve posted, can anyone let me know or explain the flow between the "factory's list and find methods( keeping the callback argument particularly in mind)?
i am not able to understand why the same factory method is called again by itself( callback argument)
please help me out..
Regarding the list function
When the CountryListCtrl controller is instantiated, the countries service (which is an object) is being passed as an argument.
Then the countries.list function (defined within countries service obviously) is being called and passed a callback function.
The countries.list function makes a GET request, and if successful (i.e. the $http promise is resolved with success), the anonymous callback function, that was passed in when the function was called in the CountryListController controller is called and the $http service passes the returned data as an argument - Which the anonymous function then assigns to the $scope.countries property.
The countries.find function is the same basic pattern, with the difference that $routeParams is picking up the /:countryName from the route, and passing it into the countries.find function as an argument for the purpose (it seems) of picking out a specific country from the response data returned by the server and then assigning it to the $scope.country property.
the portion of code i am commenting on is
countryApp.factory('countries', function($http){
return {
list: function(callback){
$http.get('countries.json').success(callback);
},
find: function(name, callback){
$http.get('countries.json').success(function(data) {
var country = data.filter(function(entry){
return entry.name === name;
})[0];
callback(country);
});
}
};
});
Here the factory is returning an object with two functions namely list and find.
both the function has a parameter called callback. callback is basically the function that you want to call when the service is executed successfully. As both list and find are going to make Asynchronous calls to server, you would want to be notified when the call is done.
Angular however has a neater way of doing this, called promise. and if we implement promise api the code becomes
countryApp.factory('countries', function($http, $q){
return {
list: function(){
var defered = $q.defer();
$http.get('countries.json').success(function(result){
defered.resolve(result);
})
.error(function(error){
defered.reject(error)
})
return defer.promise
},
find: function(name){
var defered = $q.defer();
$http.get('countries.json').success(function(data) {
var country = data.filter(function(entry){
return entry.name === name;
})[0];
defered.resolve(country);
})
.error(function(error){
defered.reject(error)
})
return defer.promise;
}
};
});
Angulars promise api is very well documented here
https://docs.angularjs.org/api/ng/service/$q
in short what it says is promise object is a contract that when an asynchronous work is completed then it would either be resolved() (completed successfully) or rejected (completed unsuccessfully) and promise objects then function would be called.
then(success(), error())
your controller would become.
countryApp.controller('CountryListCtrl', function ($scope, countries){
countries.list().then(function(countries) {
$scope.countries = countries;
});
}, function(error){
console.log("unable to fetch the list of countries : " + error)
});
countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
countries.find($routeParams.countryName).then(function(country) {
$scope.country = country;
}, function(error){
console.log("unable to find the country: " + error)
}));
Hope it helped you.
first of all we are defining modules for any application in angularJS.
then we are defining configuration for the module where inside [] we are keeping all required dependency.we can define our own angular directive which will connect java controller to get value in respective format like json etc.Then while defining angular controller we can invoke our defined directive in our angular controller to make availability for data, and from angular controller we can get value to angular view which will display in html or any view page.
I have a problem in controller with the properties of object. My factory return one object with another object and one function. I can call the function but i can't access in another object properties. Here is my code:
My factory
app.factory('User', function () {
var User = {};
User.get = function () {
// Call the service... done
User.data = response.data;
};
return User;
});
My controller
app.controller('Controller', function ($scope, User) {
$scope.user = User;
console.log(user); // print correct one object with
the function get and data object with user data
console.log(user.data); // undefined
});
Thanks, and sorry for my english disaster
app.factory('User', function () {
var User = {};
User.data=null;
User.get = function () {
// Call the service... done
User.data = response.data;
};
return User;
});
Controller:
app.controller('Controller', function ($scope, User) {
$scope.user = User;
console.log(user);
console.log(user.data); // null,because you did not call the method User.get();
User.get();
console.log(user.data); // this will print the response data which you assign in the User.get() method
});
In the code you given, User.data will give the object but before you have to call User.get() function.
Sorry for my English .....
You have two problems. The way you set up your factory is hurting you. So I would return the whole factory so you have that function. You don't have to define User inside the factory because it is the name of the factory (therefore it is an object)
app.factory('User', function () {
return {
get: function() {
//return API call
};
});
Next, you are defining $scope.user and then calling user. You never defined user, just $scope.user. Also, you must call the get function in user to return data. And it will not be
app.controller('Controller', function ($scope, User) {
$scope.user = User.get();
console.log($scope.user); // This will be the data
});
Is my error, i call in another controller User.get();, My problem is in time
app.controller('Controller', function ($scope, User) {
$scope.user = User;
setTimeout(function(){
console.log(user.data); // i have data
}, 5000);
});
Use settimeout will not auto fire the $digest and the 2 way data binding may not aware of the update.
user q and promise instead of timeout
if timeout is required, use $timeout instead of settimeout.
Below is the recommended way to get data into a controller from a factory using $http -- according to https://github.com/johnpapa/angularjs-styleguide
What i don't get is how the two success callbacks on $http work (i commented what i think the two callbacks are).
1) What is the point of the first callback?
2) Where does vm.avengers point to? Is it a reference to another object?
3) is 'data' in the second callback = 'response.data.results' from the first?
4) I'm counting 3 total callbacks chained, is that correct?
P.S. i already know about promises, but want to learn this pattern specifically
The factory
/* recommended */
// dataservice factory
angular
.module('app.core')
.factory('dataservice', dataservice);
dataservice.$inject = ['$http', 'logger'];
function dataservice($http, logger) {
return {
getAvengers: getAvengers
};
function getAvengers() {
return $http.get('/api/maa')
.then(getAvengersComplete)
.catch(getAvengersFailed);
//Callback One
function getAvengersComplete(response) {
return response.data.results;
}
function getAvengersFailed(error) {
logger.error('XHR Failed for getAvengers.' + error.data);
}
}
}
The Controller
function Avengers(dataservice, logger) {
var vm = this;
vm.avengers = [];
activate();
function activate() {
return getAvengers().then(function() { //Callback 3
logger.info('Activated Avengers View');
});
}
function getAvengers() {
return dataservice.getAvengers()
.then(function(data) { //Callback 2
vm.avengers = data;
return vm.avengers;
});
}}
The point of this first callback is to do any manipulation with the data prior to it entering into the app and to actually pull the useful data out of the http response object.
vm.avengers is declared at the top of your controller. It's using the "controller as" syntax and is being put on a reference to the "this" object of the controller. You're ultimately using vm.avengers to access the data in the view.
Correct.
HTTP Call -> getAvengersComplete -> getAvengers, so correct 3 callbacks.
Being new to Angular, I am not able to figure out how to load all the data required in the controller before it starts to compile the view.
I have created a factory to load JSON from server.
app.factory('myData', function ($http) {
return {
getMetaData : function () {
return $http.get('get-metadata').then(function (result) {
return result.data;
});
}
}
});
and a controller which uses that factory
app.controller('MyController', function ($scope, $http, myData) {
$scope.meta_data = {};
myData.getMetaData().then(function (data) {
$scope.meta_data = data.metadata;
});
});
I am also using a $watch in my controller like below
$scope.$watch("my_var.x", function (x, old_x) {
if (x) {
var y = $scope.meta_data.mapping[x] || [];
$scope.meta_data.y = y;
}
});
My problem is, $watch gets called before the myData.getMetaData returns, and $scope.meta_data.mapping isn't available. Due to that an error is thrown.
Any hint in the right direction would suffice.
Also, am I doing it correctly? I mean is this the case where I should be loading all data outside the controller and bootstrap my app manually using angular.bootstrap(document.getElementById('myApp'), ['myApp']);?
If you need to wait until your data is fetched before you start your $watch, just declare it in the resolved promise callback function:
app.controller('MyController', function($scope, $http, myData) {
$scope.meta_data = {};
myData.getMetaData().then(function(data) {
$scope.meta_data = data.metadata;
$scope.$watch("my_var.x", function(x, old_x) {
if (x) {
var y = $scope.meta_data.mapping[x] || [];
$scope.meta_data.y = y;
}
});
});
});
Otherwise, it might be a good practice as #apairet said to read about using resolves with routing.
I am creating a messaging service that needs to do the following 1.) Load a messsage from our messages service, get the recipient's ids, and then load the recipients' info from a users service. I've tried both using the messages service callback, and also creating a watcher on the message object, without much success. The service works, but it doesn't assign the result to the $scope correctly. Here's the controller. All of the services are working correctly:
function MessageCtrl ($scope, $http, $location, $routeParams, Messages, Members) {
if ($routeParams.mid) { // Checks for the id of the message in the route. Otherwise, creates a new message.
$scope.mid = $routeParams.mid;
$scope.message = Messages.messages({mid: $scope.mid}).query();
$scope.$watch("message", function (newVal, oldVal, scope) {
if (newVal.data) {
$scope.recipients = Members.members({uids: newVal.data[0].uids}).query();
}
}, true);
} else {
$scope.create = true;
}
// Events
$scope.save = function () { };
$scope.preview = function () { };
$scope.send = function () { };
}
The correct way to use query is to perform the action in the callback that is passed in query function. In other words$scope.message should be assigned in the callback. Also you don't need a $watch. You can call the other service within the callback directly. But to keep it clean please use deferred
http://docs.angularjs.org/api/ngResource.$resource
http://docs.angularjs.org/api/ng.$q