Category Archives: AngularJS

AngularJS, Linux

Experimenting with different layout options flexibly using AngularJS

Leave a comment

One of the great things about AngularJS is the way you can easily reuse and embed templates and controllers. Recently I was asked to create two versions of a control panel – one where there were several individual pages, and another where we had the pages as tabs. As I was already using the excellent AngularJS Bootstrap plugin I thought about doing something like:

<tabset>
  <tab ...>
    <div ng-include=... />
  </tab ...>
  ...
<tabset>

However the issue with this is that you load all the templates (and controllers) at page-load so if I update data in one tab it will still show the old data (from page-load time) when I change to another tab.

After scratching my head for a while I came up with the following simple method:

<div ng-controller="Tabs">

  <ul class="nav nav-tabs noprint">
    <li role="presentation"><a href="#/">
      <span class="glyphicon glyphicon-circle-arrow-left"></span>
        Dön
    </a></li>
    <li role="presentation" ng-class="{ active: type == 'recipe' }"><a href="#/edit/recipe/{{ rec_id }}">
      <span class="glyphicon glyphicon-edit"></span>
      Tarife
    </a></li>
    ...
  </ul>

  <div ng-include="'templates/' + template + '.html'"></div>

</div>

Then create a simple controller:

t.controller('Tabs', function($scope, $routeParams) {
  $scope.rec_id = $routeParams.rec_id;
  $scope.template = $routeParams.template;
});

And set up the routing (individual pages have their own routes&params already set up):

// For new combined tabs
path: '/edit/:template/:rec_id?'

Job done!

AngularJS, Computers

Stripping out elements when sending an using AngularJS $http

Leave a comment

I’m increasingly using AngularJS for frontend stuff to shift as much as possible into the browser. Basically it just receives some JSON, processes it and then sends it back to be stored in the database. However often to reduce the number of round-trips to the server you want to include additional data with the response. For example if you have a table of foods and you want to form a list of them in Angular, one way would be to get the list of ID’s and then fetch them either one-by-one or in bulk, however this is obviously not good for responsiveness or the backend server. So you’d typically want to send an array of rows from the server but for saving again, effectively you only actually need the ID’s as the rest of the data is already on the server. When you are dealing with big lists this can be rather annoying. Here’s an easy way to strip out keys on AngularJS before sending to the server:

$http.post('/api/save', { data_object }, {
  transformRequest: function(obj) {
    function toJsonReplacer(key, value) { // This taken from angular's function of the same name
      var val = value;
 
      if (typeof key === 'string' && key.charAt(0) === '$' && key.charAt(1) === '$') {
        val = undefined;
      }
 
      // These are the custom lines we add in to strip out certain keys - could use a regex too
      if (typeof key === 'string' && ( key == 'nutrients' || key == 'portions' ) )
        return undefined;
 
      return val;
    }
    return JSON.stringify(obj, toJsonReplacer);
  }
});

This overrides the $http.defaults.transformRequest as it basically does the same thing (using Angular’s toJson function). It would be nice if it were possible to just use toJson but specify a function for the json transformation.