17

I'm new to AngularJS and i see this syntax a lot:

function someFunc(){
   return function(input){
    return 'hello' + input;
  }
}

The function above is a general syntax i tend to see a lot but problem is specific with this example for custom filter:

angular.module('bookFilters', [])
    .filter('newBookFilter', function(){
          return function(input){
        return 'The Book: ' + input.name + 'is new !';
   };
});

I understand that wrapping the function with another function gives me an opportunity to use dependency injection, Here is my questions about it:

Does the filter get the function returned from the wrapping function? Then is it able to use dependency injection to inject the value into the function? Theoretically that:

This code:

{{bookObj | newBookFilter}}

Will become:

{{   bookObj | function(input){return 'The Book: ' + input.name + 'is new !'; }  }}

And finally the {{}} will return the final value from the function.

Why can't i just inject the input to the first function like:

angular.module('bookFilters', [])
         .filter('newBookFilter', function(input){
             return 'The Book: ' + input.name + 'is new !';
     });

Why dependency injection will only work on returned function?

I know i really confused here, If anyone can help me i will be very thankful, Thank you all and have a nice day.

4
  • we use the same function (.filter) with the same parameters => there should be only one implementation. How can the angular framework differentiate between your first case and your second case?
    – Khanh TO
    Commented Jan 11, 2014 at 9:39
  • if there were something like that, there would be 2 different functions similar to what we have like .factory and .service
    – Khanh TO
    Commented Jan 11, 2014 at 9:41
  • Can you help me understand why angularjs require 2 functions to be able to use dependency injection? Commented Jan 11, 2014 at 9:49
  • no, it's not that angular js requires 2 functions. I mean if there were multiple ways to declare a service (to be injected to others), there must be different functions, each for one implementation.
    – Khanh TO
    Commented Jan 11, 2014 at 9:52

3 Answers 3

22

The answer is opposite to your question. Angular injects only into factory function but not into resulting function:

   .filter('newBookFilter', function($log, ...){ // <- factory function
       return function(input, ...){              // <- resulting function
       };
   })

Factory function have arbitrary injected parameters. Resulting function have fixed parameters.

Second reason is that you can do some initialization in factory function. This is useful for example when you define new directive. Also factory returns closure which can capture variables and arguments from factory function. See example below. It uses dependency injection to get logging object. Here is full example.

  .filter('joinBy', function ($log) {     // <- injected here
    return function (input, delimiter) {  // <- used here
      var res = (input || []).join(delimiter || ',');
      $log.info(res);
      return res;
    };
  });
6
  • Hey vassiliy thank you for your answer can you explain: "Factory function have arbitrary injected parameters. Resulting function have fixed parameters.".... Commented Jan 11, 2014 at 10:32
  • I marked which function is factory and which is resulting(see first code block). By "arbitrary injected parameters" I mean that angular will pass "required" parameters inside this function. Angular sees function arguments names to understand that function want to "eat" as a parameter. Commented Jan 11, 2014 at 10:41
  • By "fixed parameters" I mean that angular always sends same set of parameters and doesn't see to arguments names. Good example is "link" function in definition of new directive. It always have 4 parameters (last is optional). I don't 100% sure about result of filter function. I will search for documents. Commented Jan 11, 2014 at 10:49
  • Here is description of arguments for resulting function. Here is answer to initial question "filter definition consists of a factory function which is annotated with dependencies and is responsible for creating a filter function" (filter function is not annotated with dependencies) Commented Jan 11, 2014 at 11:01
  • If you are minifying this, it won't work. The minification will eat the $log and then angular won't be able to resolve it. Do you know how to define this with the string notation like you do controllers etc? Commented Jun 29, 2015 at 22:44
11

I think of Angular factory, service, filter, directive wrappers as ovens that create JavaScript objects and functions with Angular flavors. So, to borrow the same style from Vasiliy's answer:

// Don't use this code in a real app. It's just to illustrate a point.
angular.module('App', [])

// The following oven makes an Angular flavored JavaScript function that 
// formats a currency
.service('currencyBadFilterFn',
  // We inject a built-in Angular filter, currencyFilter, into our oven
  function(currencyFilter) { 
    // oven produces a function that can be used in other places in Angular code
    return function(number) {
      // produced function returns a currency-formatted number when used
      return currencyFilter(number)   
    }
  }
)

.controller('MainCtrl',
  function($scope, currencyBadFilterFn) {
    $scope.amount = currencyBadFilterFn(10) // $10.00
  }
)

As you can see, the same pattern is used in creating services. Here, we are creating a service that returns a function that we can use in other places in our code.

The first function, the oven function, along with the .service or .factory or .filter wrapper, tells Angular how to build your function. The return value of that first function is what you will use in your code.

9
  • So as i understand i can use dependency injection only for the wrapper function, The all idea is like factory which instantiate ones the the value used multiple times? Commented Jan 11, 2014 at 11:37
  • @uBlankText yes! The value that's returned by these wrappers is a singleton that can be used in other places in your code.
    – M.K. Safi
    Commented Jan 11, 2014 at 11:39
  • So the reason(besides the singleton advantage) for using 2 functions is that 1 (wrapper function) will take dependencies and the returned function will receive the the actual values, Because as i notice on Vasiliy example i can't use any of the actual values passed inside the wrapper function but only the returned function is getting the values. Commented Jan 11, 2014 at 12:03
  • Also i wanted to ask, Is the function inside a function is a type of closure? Commented Jan 11, 2014 at 12:16
  • 1
    let us continue this discussion in chat
    – M.K. Safi
    Commented Jan 11, 2014 at 12:27
2

This is how I did it.

myApp.filter("myCustomDateFormatter", ['MyFactoryWithCustomFunctions', function (InjectedCustomFunction) {
    return function (input) {
        return InjectedCustomFunction.GetDateFromDotNetJson(input);
    }
}]);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.