Parameter passing Angular JS

Question

I am new to Angular and quite frankly Java Script in general. I have been building a prototype app from some examples and tutorials and have run into a presumably simple issue that can be solved by passing parameters.

I want to receive a parameter in my controller (myKey) and pass it along to the factory which in turn will pass it along to a web API. I can define a constant for myKey in the factory and have everything work, I am having an issue in passing a parameter along.

Sorry for the newbie question and yes I have more study to do.

Thanks

'use strict';

/* Factories */

angular.module("myApp.myViewer.factories", []).factory('myThings', ['$resource',
      function ($resource) {
          var resource = $resource('/api/myThings', {}, { get: { method: 'GET', params: { myKey:"M1234" } } });

        return resource;
    }
]);


/* Controllers */

angular.module("myApp.myViewer.controllers", [])
   .controller('myCtrl', ['$scope', 'myThings', function ($scope, myThings) {

      myThings.get(function (response) {
          console.log(response);
          $scope.myThing = response;
      });
  }]);

You'll probably want to provide some HTML to your question to see if you are using ng-submit or ng-model correctly. — Dr G.
– Dr G., Commented Jul 18, 2015 at 11:07

Matt Herbstritt · Accepted Answer · 2015-07-18 11:40:42Z

2

You have two separate modules there that know nothing about each other. You would have to add one module as a dependency of the other, so something like this:

angular.module("myApp.myViewer.controllers", ["myApp.myViewer.factories"])

But I think that would over complicate things in this case and I think you would be better of combining the two modules like this:

You also need to add ngResource as a dependency and make sure you have it loaded on your pages as it doesn't come with Angular.

angular
  .module("myApp", ['ngResource'])
  .factory('myThings', ['$resource', function ($resource) {

        return {

          // define a function that returns your $resource after
          // passing in the 'myKey' parameter
          resource: function(myKey){
            return $resource('/api/myThings', {}, { 
              get: { 
                method: 'GET', 
                params: { myKey: myKey }
              } 
            });
          }

        };

      }

  ])
  .controller('myCtrl', ['$scope', 'myThings', function ($scope, myThings) {

      // inject the myThings service and call the resource function
      // that we defined to create your resource object.
      var Keys = myThings.resource(myKey)

      // make a get request on your resource and
      // assign the response value to a $scope variable
      // so any properties on your response object can be displayed in 
      // your view template
      Keys.get(function (response) {
          console.log(response);
          $scope.myThing = response;
      });
  }]);

edited Jul 18, 2015 at 11:40

answered Jul 18, 2015 at 11:11

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Fenske Over a year ago

Thanks Matt, that certainly works for my example. What's the best way to get the parameter into the controller? For example, if I put up a page that has the user enter a search string and clicks a button, how to get that entered value into this controller?

Mike Fenske Over a year ago

NVM, fixed it up using $route and grabbing a parameter from the route provider. Thanks again

Collectives™ on Stack Overflow

Parameter passing Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related