Creating a utility module encapsulating angular js features

Question

Hi I need pointers to understand on how to create a utility module encapsulating angular js filters so that I can pass the input value(2014-11-14T22:51:04.635Z) to be formatted and get the formatted(ng-filter : 14 Nov 2014 - 02:51 PM) output from it. The goal is to utilize angular Js filter property independent of the frontend framework. Frameworks such as mustache have {{ }} tags in html, which angular also have, this can cause issues when ng-filters directly used inside the html file. So I am trying to make use of ngFilters without including them in the html. So the goal is to accept values from the template, format them in JS file using ngFilters and push the value back to the template.

Answer 1

I am not really sure what you are doing is really worth the effort. I was wondering if changing the Angular's start and ending symbols can fix your issue altogether so you can use filters directly inside Html:

AngularJS-Twig conflict with double curly braces

There are some cases you need to manually call specific filters in javascript. You can do this using $filter that needs to be injected by Angular before you use it:

How to use a filter in a controller?

Now I hope you don't need this or better put don't use this in normal angular applications, but in very rare situations you might need to access angular functionality (like $filter) inside a non angular context. In these situations you can access $scope for elements using the following:

var scope  = $("path to the DOM element").scope();

Now you can read and write into scope and even better call functions from scope. In this case, you need to put an instance of your filter in the scope like this:

$scope.filterInstance = $filter;

now you can call this filter instance from any where even outside of the angular context: var scope = $("path to the DOM element").scope(); var result = scope.filterInstance("xyz");

Answer 2

You can call $filter in javascript easily:

var input = '2014-11-14T22:51:04.635Z';
var format = 'd HHH yyyy - h:mm a';
var output = $filter('date')(new Date(input), format);

If you want to transform a array, you can use .map

// You need to get $filter somewhere
var format = 'd HHH yyyy - h:mm a';
var formatDate = $filter('date'); // Save (input.length - 1) function calls

input = ['2014-11-14T22:51:04.635Z', ...]
var output = input.map(function(in) {
  return formatDate(new Date(in), format);
});

To find out more about the date filter in angular: https://docs.angularjs.org/api/ng/filter/date

Answer 3

If you want to format dates then use http://momentjs.com/

That's what I use even in the Angular framework.

Answer 4

If you want to access some AngularJS features without actually bootstrapping AngularJS to your web-app, you can just create a stand-alone injector.

var $injector = angular.injector(['ng']);

You can then retrieve the $filter service from it

$filter = $injector.invoke(['$filter', function ($filter) { return $filter; }]);

and have access to any of the default AngularJS filters

var formattedDate = $filter('date')(originalDate, format);