Create custom Angular filter without app name

Question

How to create custom angular filter without angular app name?

// usual way for creating filter
var app = angular.module('app', []);

app.filter('makeUppercase', function () {
  return function (item) {
      return item.toUpperCase();
  };
});

app.controller('PersonCtrl', function () {
  this.username = 'Todd Motto';
});

I only know creating angular filters with app name.

My concern is how we can create a filter without app name and inject it into a controller. Does it possible to create a javascript function and pass these to controller.

Answer 1

You will always need to attach your filter to some module, in your case var app = angular.module('app', []); is a module and you making a filter inside that module.

You can use the filter inside your controller like below:

app.controller('PersonCtrl', function ($filter) {
  this.username = 'Todd Motto';
  var caps = $filter('makeUppercase')("make me caps");//call your filter like this
});

Answer 2

Yes you can do that.

You can create a module and then create a service containing the filter.

After that you can inject that newly created module to your module and use the filter.

To add a filter through a service you can read this answer.