AngularJS: passing parameters from the controller to the service

Question

I am having trouble figuring out a way to pass parameters from my angular controller to service

 #my controller 'use strict'; angular.module('recipeapp') .controller('recipeCtrl', ['$scope', 'recipeService', function($scope, recipeService){ $scope.recipeFormData={}; $scope.recipeSave = function(){ recipeService.saveRecipe(); } }]); #my service 'use strict'; angular.module('recipeapp').service('recipeService',['$http', function($http){ this.saveRecipe = save; function save(callback){ //calling external http api } }]); 

What I'm trying to do here is get $scope.formData from my form, and the controller should pass this to service . In my opinion, I cannot use $scope inside the service , so I need to find a way to pass $scope.formData to the service

a tough idea would be in the controller recipeService.saveRecipe($scope.formData); but I'm not sure how to assemble it from the service,

when I changed the service this.saveRecipe(val) = save; , he does not work: (

any help will be assigned

Answer 1

This example demonstrates the correct structure of an angular application:

• Initializing a model inside your controller
• Implement singleton service and insert into your controller
• Using $ http promises to asynchronously invoke the web API and provide callers with your services the ability to handle their success / failure.
• Using the controller-like syntax to expose functions from your controller, rather than displaying functions directly from the scope.
• Binding two-way data binding (text field for recipe and recipe for text field)

Initialize your model in your controller:

 angular.module('recipeapp') .controller('recipeCtrl', ['$scope', 'recipeService', function($scope, recipeService){ // initialize your model in you controller $scope.recipe={}; // declare a controller function that delegates to your service to save the recipe this.saveRecipe = function(recipe) { // call the service, handle success/failure from within your controller recipeService.saveRecipe(recipe).success(function() { alert('saved successfully!!!'); }).error(function(){ alert('something went wrong!!!'); }); } }]); 

In the recipe service, define the saveRecipe function:

 angular.module('recipeapp').service('recipeService',['$http', function($http){ // expose a saveRecipe function from your service // that takes a recipe object this.saveRecipe = function(recipe){ // return a Promise object so that the caller can handle success/failure return $http({ method: 'POST', url: '/api/recipe/add', data: recipe}); } }]); 

Link your recipe to your view; add a button to call the controller function saveRecipe and save the recipe (going through the model's recipe object):

 <div ng-app="recipeapp" ng-controller="recipeCtrl as ctrl"> <form name="recipeForm"> Recipe Name: <input type="text" ng-model="recipe.name" /> <button ng-click="ctrl.saveRecipe(recipe)">Save Recipe</button> </form> </div> 

Answer 2

 var module = angular.module('example.service', []); module.services('ExampleServices', ['$http', '$q', function ($http, $q) { var resourceUrl; return { setResourceUrl: function(resourceUrl) { this.resourceUrl = resourceUrl; }, create: function(params) { //access params here sent from controller //make call to server using $http //return back the promise or response }, remove: function(id) { //access id here sent from controller //make call to server using $http //return back the promise or response } } 

Later in your controller, enter the ExampleServices command

And then access:

 ExampleServices.create(params) 

params can be any object, most likely data written using forms.

 ExampleServices.remove(id) 

id can be the primary identifier for a record to be removed from the database.

Hope that helps :)