Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using helper methods while templating with Angular JS

Currently in the process of converting a website from its previous templating to Angular. In the previous templating process we were using we were able to call helper methods to display data correctly. For instance:

<script type="text/javascript">
$.views.helpers({
    parseDate: function (jsonDate) {
      if (jsonDate != null) {
        var newDate = Utils.PrettyDate(Utils.ConvertJsonDateToJsDate(jsonDate));
        return newDate;
      }
    }
});
</script>


<div class="post-info">
  <span class="posted-date">Posted {{ :~parseDate(CreatedDate) }}</span>
  &nbsp|&nbsp
  <span>{{ :ReplyCount }} Replies</span>
</div>

This was very nice. Trying to figure out a way to utilize the same type of functionality with Angular as far as templating goes. Is it possible to do something similar? If so how?

like image 645
yaegerbomb Avatar asked Sep 17 '12 20:09

yaegerbomb


People also ask

Which operator is not supported by template expression in Angular?

The following JavaScript and template expression syntax is not allowed: new. Increment and decrement operators, ++ and -- Operator assignment, such as += and -=

What are helper methods in JavaScript?

Helper functions are JavaScript functions that you can call from your template. Ember's template syntax limits what you can express to keep the structure of your application clear at a glance. When you need to compute something using JavaScript, you can use helper functions.

What are the elements that we can use in Angular templates?

This template uses typical HTML elements like <h2> and <p> . It also includes Angular template-syntax elements, *ngFor , {{hero.name}} , (click) , [hero] , and <app-hero-detail> . The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.


1 Answers

If you are only interested in data display, then as pkozlowski.opensource already mentioned, filters are the "Angular way" of formatting data for display. If the existing date filter is not sufficient, I suggest a custom filter. Then your HTML will look more "angular":

<span class="posted-date">Posted {{CreatedDate | dateFormatter}}</span>

The above syntax makes it clear that you're (only) formatting.

Here's a custom filter:

angular.module('OurFormatters', []).
 filter('dateFormatter', function() {               // filter is a factory function
   return function(unformattedDate, emptyStrText) { // first arg is the input, rest are filter params
       // ... add date parsing and formatting code here ...
       if(formattedDate === "" && emptyStrText) {
            formattedDate = emptyStrText;
       }
       return formattedDate;
   }
 });

By encapsulating our filters/formatters into a module, it is also easier to (re)use them in multiple controllers -- each controller that needs them just injects OurFormatters.

Another benefit of filters is that they can be chained. So if someday you decide that in some places in your app empty dates should show nothing (be blank), whereas in other places in your app empty dates should show 'TBD', a filter could solve the latter:

<span class="posted-date">Posted {{CreatedDate | dateFormatter | tbdIfEmpty}}</span>

Or your custom filter can take one or more arguments (the above example supports an argument):

<span class="posted-date">Posted {{CreatedDate | dateFormatter:'TBD'}}</span>
like image 163
Mark Rajcok Avatar answered Sep 21 '22 19:09

Mark Rajcok